Creating a save card page with the iframe

  1. Create an Iframe on your Web Page

    Example
    <html>
        <iframe id="myIframe" src="">
        </iframe>
    </html>
    

  2. 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 our 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)
        }
    });
    
  3. Request a One-time-use Token

    Send a POST request to the ecommerce Create one-time-use token endpoint.

Any iframe uiOptions or processingOptions must be included in this request. See the endpoint reference for more information about these objects.

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 '{}'
Example 200 Response
{
  "expiration": "2022-03-14T15:43:05.664Z",
  "fraudUrl": "https://api.nexiopaysandbox.com/pay/v3/fingerprint?token=830d36f6-a5e3-4455-9600-3a55b63e2fc2",
  "token": "830d36f6-a5e3-4455-9600-3a55b63e2fc2"
}   

You will use the token in the next steps.

👍

Try it out . . .

  1. Go to the Create one-time-use token endpoint.
  2. In the main content area, click the "SAVE CARD TOKEN IFRAME" option.
  3. In the right pane, type your API username and password.
  4. Select the language you want to use (or leave the default selection).
  5. Click the Try It! button.
    See the token in the Response area.
  1. Copy or Store the Token From the Above Response

    The token is your one-time-use token.

    Notes:

    • Each one-time-use token expires after one hour.
    • Each one-time-use token can only be used to submit a single form.
  2. Load the Iframe

    a. Set the start of the iframe's URL to the Save card token with iframe endpoint. (https://api.nexiopaysandbox.com/pay/v3/saveCard).

    b. Append the one-time-use token to the iframe's URL in a query parameter called token.

    c. Assign the result to your iframe's src tag.

    Notes:

    • If an error occurs while loading an iframe, the endpoint returns a JSON object with the error message.
    • To receive an HTML response instead, include shouldReturnHtml=true as an additional query parameter in the save card token URL.
Example
var iframeBaseUrl = "https://api.nexiopaysandbox.com/pay/v3/saveCard";
var oneTimeUseToken = "?token=" + token;
var returnHtml = "&shouldReturnHtml=true";
var url = iframeBaseUrl + oneTimeUseToken + returnHtml;
window.document.getElementById('myIframe').src = url;

👍

Try it out . . .

  1. Go to the Save card token with iframe endpoint.
  2. Using the token you got from step 3 above, in the "Authentication" area, paste the token text.
  3. Click the Try It! button.
    The response shows the HTML returned to the iframe.
  1. Create an event listener

    Add an event listener to your form's submit button that triggers a POST request inside the iframe.
    Now when a user clicks submit on your outer form, the iframe submits 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
    });
    

Did this page help you?