0

I am using a 3rd party UI to accept payments. So the payment form is controlled by them and my job is to embed their page into mine so users can enter their card info on my site and the 3rd party can process the payment. To get the 3rd party UI displayed on my page, they expect me to submit the user data via a form and as a response they will render their page inside an iframe. To achieve that I have the following setup:

<form id="form1" target="frame1" action="https://www.example.com" method="post" />
<iframe id="frame1" name="frame1" />

Then in my Javascript, I am dynamically constructing the form with hidden input fields containing the user information and submitting it. (Something similar to the solution described here The solution is working fine and I am able to load the 3rd party UI inside the iframe. But I want to avoid creating DOM elements and instead use jQuery AJAX or XHR to submit the request. I tried using FormData to submit the form fields but the problem is that I am not able to specify the iframe which should be updated by the 3rd party. Is there a way to use ajax request and FormData and indicate the target iframe ?

Thanks for your help.

Community
  • 1
  • 1
cutiecatie
  • 51
  • 5
  • You can post data to the url that you are using in the iframe. I doubt it will work since these gateways get strict when you are playing with money. Ask them if they have any rest/soap api where you can call your own server and using curl you can communicate – joyBlanks May 04 '16 at 21:00
  • So instead of submitting an actual form, you want a solution that doesn't include meddling with elements? like ajax? – kmaork May 04 '16 at 21:30
  • I want to avoid creating the DOM elements of the form and instead use an AJAX based solution which can refresh the iframe.. Do you want to see the existing code that I have (if its going to make the problem clearer) ? – cutiecatie May 04 '16 at 23:18

0 Answers0