Creating a card checkout page with your own form

You can use your own form to create a checkout page for card payments.

📘

Note

Although card data never touches your servers, using your own form changes your PCI liability from SAQ A to SAQ A-EP.

This tutorial provides information about how to set up a checkout page to support receiving card payments.

📘

Prerequisites

Before you can run a transaction using your own form you must save a card token in one of the following manners:

Card tokens can be used to process through any MID on your account. They are not restricted to a specific merchant account or currency.

Complete the following steps to create your own form on a card checkout page:

  1. Create a form on your checkout web page to collect any necessary information from the customer.

    Example Form
    <html>
    <form id="myForm">
    </form>
</html>

  2. Collect Payment Information

    You may collect some information from the user (such as first and last name, address, and so forth) through the form you created in step 1. Other information may be predefined by your site (such as amount, currency, and so forth).

    The following information is required by Nexio:

    • Amount (data.amount)
    • Card Token (tokenex.token) This is a previously saved card token (see the Prerequisites note at the beginning of this tutorial).

    Optionally, you can include the currency (data.currency). If you do not specify a value for this parameter, the system defaults to USD.

    See the Run card transaction endpoint for a complete list of possible parameters.

  3. Send Payment Information to Your Server

  4. Post Payment Information to Nexio

    When the customer accesses the checkout page, chooses to pay with a new card, and submits for payment, send a POST request to the Run card transaction endpoint.

    In the body of the request, include at least the required parameters of the payment amount (as data.amount) and the card token from step 2 (as tokenex.token). 

    Example Request
    curl -X POST https://api.nexiopaysandbox.com/pay/v3/process \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'Authorization: Basic [Base64_encoded_login]'
  -d '{
  "data": {
    "amount": 29.99,
  },
  "tokenex": {
    "token": "6ee140a0-05d1-4958-8325-b38a690dbb9d"
  }
}'

👍

Try it out . . .

  1. Go to the Run card transaction endpoint.
  2. For Authorization, type your username and password.
  3. Using the token you got from saving the card token (from Prerequisites above), replace the text in the tokenex.token parameter.
  4. Provide a value for the data.amount parameter. For example, 29.99.
  5. Replace any other content in the body that you want. For example, with the encryptedNumber for your own test card.
  6. Click the Try It! button.
    The response shows the HTML returned to the iframe.

  1. Create a Receipt for the Customer

    Listen for Nexio's response.

    Use the response to create a success (such as a receipt) or failure page for the customer. You may also want to send a receipt to the customer via email.

Updated about 2 months ago