Guides

Creating a card checkout page with your own form

Background
Before starting this tutorial, make sure you understand the following topics from the Quick start section:

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.

    <html>
  <body>
    <form id="myForm">
    </form>
  </body>
</html>

  2. Add fields to your form to capture any information you need from the customer (such as first and last name, address, and so forth). 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). Alternately, if supported by the connection or gateway, you can use the full card number along with the expiration date.
    • Payment type (processingOptions.paymentType) - The type of transaction being processed using stored payment credentials. Use this parameter to properly flag initial and subsequent transactions. For more information about this parameter and when to use each option, see the paymentType documentation and reference table.

    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. When the customer accesses the checkout page, chooses to pay with a saved 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), type (as processingOptions.paymentType, and the card token from step 2 (as tokenex.token). 

    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"
  },
  "processingOptions": {
    "paymentType": "initialUnscheduled"
  }
}'

    👍

    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. Select the proper option for the processingOptions.paymentType parameter. For example, initialUnscheduled.
    6. Replace any other content in the body that you want. For example, with the customer address information.
    7. Click the Try It! button.
      The response shows the JSON returned.

  4. Listen for Nexio's response and use it 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.

    Additionally, you may want to store the id returned in the response as this is the payment ID and you can use it to query the status of the transaction (using the View transaction by payment ID endpoint) within about a minute. You may also want to store the transactionId. You can only get this parameter after the transaction runs. You get it in the webhook with the transactionId (note that this parameter is not returned for legacy webhooks) or in the id returned in any of the following endpoints:

Updated 17 days ago