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...

Community
  • 1
  • 1
DarthVoid
  • 604
  • 3
  • 9
  • 21
  • 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 – q.Then Oct 14 '15 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... – DarthVoid Oct 14 '15 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. – Barmar Oct 15 '15 at 00: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... – DarthVoid Oct 16 '15 at 01:28
  • 1
    I wouldn't trust giving my CC credentials on your 'forms' :/ – Raja Khoury Oct 16 '15 at 01:31
  • Well what do you suggest @raja.khoury ? Here is a [screenshot](http://imgur.com/mPY0frW) of what I am working with, maybe someone has a creative suggestion. It looks crappy, but go with it for now. I intend for the payment form area to check to see if the user is logged in and then output the appropriate form. If logged in, user can select their list of saved payment options. If not logged in, users can simply add their credit card info (or pick something like Paypal, but I'm keeping it simple for now). – DarthVoid Oct 16 '15 at 01:38
  • @bedspread232 Don't take comments too personal. Your form does not look crappy. If I may ask, how are you going to authenticate users ? what framework are you working on ? – Raja Khoury Oct 16 '15 at 01:47
  • This is a wordpress plugin I am modifying, if that answers your first question. They have a function that checks to see if the user is logged in: [`is_user_logged_in()`](https://codex.wordpress.org/Function_Reference/is_user_logged_in). I'm not sure what you mean by framework (because I'm new to web dev). [Here is the plugin's Github if that helps.](https://github.com/anspress/anspress) – DarthVoid Oct 16 '15 at 01:52

1 Answers1

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.

Community
  • 1
  • 1
Schleis
  • 41,516
  • 7
  • 68
  • 87
  • Do you think it would be safe to send credit card info via AJAX? – DarthVoid Oct 17 '15 at 20:18
  • 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. – Schleis Oct 19 '15 at 13:41
  • 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? – DarthVoid Oct 19 '15 at 22:37
  • 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. – Schleis Oct 20 '15 at 12:26