Creating a save card page with your own form

πŸ“˜

Note

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

  1. Create a Form on Your Web Page

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

  2. Add Fields to Your Form

    The following fields are required by Nexio:

    • Cardholder name (card.cardHolderName)
    • Expiration month (card.expirationMonth)
    • Expiration year (card.expirationYear)
    • Card number (card.encryptedNumber)
      (Your form will accept the full credit or debit card number, which you will then encrypt prior to sending it to Nexioβ€”see step 5)

    You may include any fields listed in the Save card token endpoint.

  3. 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 step 8.

πŸ‘

Try it out . . .

  1. Go to the Create one-time-use token endpoint.
  2. In the main content area, click the "SAVE CARD TOKEN API REQUEST" 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. Load the Form

    Load the form on your page and allow the user to type their information.

  2. Validate the Card Number

    Outside of the Nexio iframe, we are unable to validate card numbers for you.

    Use the Luhn algorithm to make sure the user has typed their card number correctly.

  3. Encrypt the Card Number

Prior to sending the card information to Nexio, you must encrypt it using browser-based encryption.
To do so, follow the steps below.

a. While testing in the sandbox environment, use the sandbox public key indicated below.

For the production environment, contact us to obtain the public key.

Sandbox Public Key
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvWpIQFjQQCPpaIlJKpeg
irp5kLkzLB1AxHmnLk73D3TJbAGqr1QmlsWDBtMPMRpdzzUM7ZwX3kzhIuATV4Pe
7RKp3nZlVmcrT0YCQXBrTwqZNh775z58GP2kZs+gVfNqBampJPzSB/hB62KkByhE
Cn6grrRjiAVwJyZVEvs/2vrxaEpO+aE16emtX12RgI5JdzdOiNyZEQteU6zRBRJE
ocPWVxExaOpVVVJ5+UnW0LcalzA+lRGRTrQJ5JguAPiAOzRPTK/lYFFpCAl/F8wt
oAVG1c8zO2NcQ0Pko+fmeidRFxJ/did2btV+9Mkze3mBphwFmvnxa35LF+Cs/XJHDwIDAQAB

b. Encrypt the card number using the public key and standard RSA encryption. See this JSFiddle page for an example of how to encrypt data to be tokenized.

Note: If you want to store the token in your own database you must either use a callback or use the token returned in the event info.

Important: If you do not perform browser-based encryption in the card holder's browser, you have full PCI liability.

  1. Send Card Information to Your Server

Send the encrypted card number and other card information to your server.

  1. Post Card Information to Nexio

When the customer accesses the save card page, completes the form, and submits the information, send a POST request from your server to the Save card token endpoint with the one-time-use token from step 3 (as the token parameter) and any card information you want to include, as in the following example:

Example Request
  curl -X POST https://api.nexiopaysandbox.com/pay/v3/saveCard \
    -H 'Content-Type: application/json' \
    -H 'Accept: application/json' \
    -H 'Authorization: Basic [Base64_encoded_login]'
    -d '{
    "card": {
      "cardHolderName": "John H Doe",
      "encryptedNumber": "cu3yRktaYFK2LUC6DpNK289tYDsGRCi7cO+GeG0hkeYFvT7Y8/oY5r53obMz6Q/BZ38gk2u2Ufwy8ojBcX2sfNjG5jplGTXA4NNlSIUjMFfiHe1sff1JFpThoiW/IIlifGlbWu+S1/9pqWPTzJ2+DcjwohbHzsDahhYewFhXgC8qsK0ypi/Shlp+CwRITyIvbVXESD0xz3YOTRHeZLlChvVqN8z4ZzN8nm0MXkmT1wcpYI73bH4KdnPwNU3s7XxvP/ernQP73SHHAOKSLlz4F6AEHFjJiCoXzeLF7LwEjRdxDJ0sKVXbRk3i9BGh+8Nle2VYgjpUWtk2763QkvZiQQ==",
      "expirationMonth": "12",
      "expirationYear": "28",
      "cardType": "visa",
      "securityCode": 927,
      "firstSix": "479300",
      "lastFour": "3313"
    },
    "token": "830d36f6-a5e3-4455-9600-3a55b63e2fc2",
    "data": {
      "customer": {
        "firstName": "John",
        "lastName": "Doe",
        "billToAddressOne": "2147 West Silverlake Drive",
        "billToAddressTwo": "Apt 42",
        "billToCity": "Scranton",
        "billToCountry": "US",
        "billToPhone": "1555555555",
        "billToPostal": "18503",
        "billToState": "PA",
      }
    }
  }'

πŸ‘

Try it out . . .

  1. Go to the endpoint.

  2. Type your username and password in the Authentication section.

  3. Type the token you got in step 3 above in the token field.

  4. Use the main area with the objects and parameters to replace any content in the body that you want. For example, with the encryptedNumber for your own test card.

    For example:

    "card": {
         "cardHolderName": "John H Doe",
         "encryptedNumber": "cu3yRktaYFK2LUC6DpNK289tYDsGRCi7cO+GeG0hkeYFvT7Y8/oY5r53obMz6Q/BZ38gk2u2Ufwy8ojBcX2sfNjG5jplGTXA4NNlSIUjMFfiHe1sff1JFpThoiW/IIlifGlbWu+S1/9pqWPTzJ2+DcjwohbHzsDahhYewFhXgC8qsK0ypi/Shlp+CwRITyIvbVXESD0xz3YOTRHeZLlChvVqN8z4ZzN8nm0MXkmT1wcpYI73bH4KdnPwNU3s7XxvP/ernQP73SHHAOKSLlz4F6AEHFjJiCoXzeLF7LwEjRdxDJ0sKVXbRk3i9BGh+8Nle2VYgjpUWtk2763QkvZiQQ==",
         "expirationMonth": "12",
         "expirationYear": "28
       },
       "token": "[one-time-use-token]"
     }
    
  5. Click the Try It! button.
    The response shows the HTML returned to the iframe.

  1. Listen for Nexio's Response

If Nexio returns a 200 status:

  • Save the card token (tokenex.token).
  • Display a success page to the customer.

You will need this token to run a transaction as well as to view, edit or delete the card token.

If Nexio returns a non-200 status:


Did this page help you?