0

I am modifying an existing plugin, and it has a form. The perfect place for me to add my code is at the end of the form but before the submit button. I want to add a form that will allow users to enter their credit card info, but nesting my form within the plugin's form is causing problems.

I was wondering if it would be possible for my form nesting to somehow work with AJAX. So basically, I just need 4 input areas (CC#, Exp date, CCV, amount) to be submitted that to Braintree's servers. I need to maintain PCI compliance with anything I do, so is this possible? Is it recommended? If not, what is?

EDIT - I found a question on here that made me wonder if it would be possible to separate the 2 forms but use CSS to make it look like my screenshot. Below is a quote from one of the question's answers.

Why not place the input inside the form, but use CSS to position it elsewhere on the page?

Update - I'm still confused...

Improve this question
8
  • Of course it is possible. AJAX is just a method for sending asynchronous requests. Some javascript magic and research in the plugin framework should fix everything Commented Oct 14, 2015 at 23:38
  • @PhilipTsang So then I shouldn't experience any more form submission issues? One of the ones I had was that one form's submit button submitted the other form....it was bad... Commented Oct 14, 2015 at 23:53
  • 1
    You can't nest forms in HTML. But the fields you submit using AJAX don't need to be in a form. Commented Oct 15, 2015 at 0:09
  • @PhilipTsang but what if using AJAX means I am not PCI compliant? I'm reading on Google that sending credit card info via AJAX to a 3rd party payment processing company isn't recommended... Commented Oct 16, 2015 at 1:28
  • 1
    I wouldn't trust giving my CC credentials on your 'forms' :/ Commented Oct 16, 2015 at 1:31

1 Answer 1

Reset to default
2

It is against the standards to do nested forms like you are thinking. (See this question for more about that: Can you nest html forms?)

That doesn't mean that you can't have the form send data to multiple locations on submit. Register a submit handler for the form with two ajax methods. The first takes the four pieces of data and sends them to your server. The second grabs the rest of the data and sends it to the location specified by the form.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Do you think it would be safe to send credit card info via AJAX?
I do not think that it is safe to submit cc data over ajax. If you are new to web development, I would shy away from dealing with cc data. And instead use a third party to handle that aspect of it. The security implications are not something you want to deal with.
Well I am using Braintree for payment processing. Their API allows me to create a custom form, which I then will upgrade to an iFrame. However, I do not want to redirect the user to a payment page. It really hurts the flow of the site as a whole. Isn't it possible to send cc info via AJAX to their servers?
It is possible, but you need to make sure that the data is sent over a secure connection to prevent it being viewed by a third party during transit. Submitting the data yourself makes you responsible for the security of that data. You are taking on the responsibility that the users data won't get hacked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.