Creating an echeck checkout page with the iframe
Create a checkout page for e-check (ACH) transactions, either by using the Nexio iframe or with your own form.
Please note that e-check transactions cannot be voided or refunded.
-
Create an Iframe on Your Web Page
Example
<html> <iframe id="myIframe"> </iframe> </html>
-
Create an Event Listener
Create an event listener to monitor actions in the iframe. This listener keeps your code updated on what is happening inside the iframe. You handle the success, error, and loading states here.
See the Iframe events table for a list of possible events.
Example
window.addEventListener('message', function messageListener(event) { if (event.origin === iframeUrl) { // switch on event.data properties // (e.g. loaded, formValidations, error) } });
-
Request a One-time-use Token
Send a
POST
request to the ecommerce Create one-time-use token endpoint.Example Request
curl -X POST https://api.nexiopaysandbox.com/pay/v3/token \ -H 'Content-Type: application/json' \ -H 'Accept: application/json' \ -H 'Authorization: Basic [Base64_encoded_login]' -d '{ "data": { "amount": 29.99, "currency": "USD" } }'
Example 200 Response
{ "expiration": "2018-09-18T15:43:05.664Z", "fraudUrl": "https://api.nexiopaysandbox.com/pay/v3/fingerprint?token=01080f80-76b8-4363-845d-67e8623bf170", "token": "830d36f6-a5e3-4455-9600-3a55b63e2fc2" }
-
Copy or Store the Token From the Above Response
This is your one-time-use token. It will be used in the next step.
Notes
- Each one-time-use token expires after one hour.
- Each one-time-use token can only be used to submit a single form.
- Any iframe
uiOptions
orprocessingOptions
must be included in this step.
-
Load the Iframe
a. Append the one-time-use token to the iframe's URL a query parameter called
token
.b. Assign the result to your iframe's
src
tag.Notes
- If an error occurs while loading an iframe, the endpoint will return a JSON object with the error message.
- To receive an HTML response instead, include
shouldReturnHtml=true
as a query parameter, as in the example above.
Example
var iframeBaseUrl = "https://api.nexiopaysandbox.com/pay/v3/processECheck"; var oneTimeUseToken = "?token=ec53cd46-cee5-44db-a20f-f5c373a44fd2"; var returnHtml = "&shouldReturnHtml=true"; var url = iframeBaseUrl + oneTimeUseToken + returnHtml; window.document.getElementById('myIframe').src = url;
-
Create an Event Listener
Add an event listener to your form's submit button that will trigger a
POST
request inside the iframe.
Now when a user clicks submit on your outer form, the iframe will submit itself.
Because of the event listener you created in step 2, your code is aware of iframe responses and errors.Example
myForm.addEventListener('submit', function processPayment(event) { event.preventDefault(); const url = 'https://api.nexiopaysandbox.com'; myIframe.contentWindow.postMessage('posted', url); return false; // keeps the form from auto submitting });
Updated about 1 month ago