Creating a save card page with your own form

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

📘

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

    <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.

    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 '{}'


    {
    "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.

  4. Load the Form

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

  5. 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.

  6. 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.

    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. Card tokens can be used to process through any MID on your account. They are not restricted to a specific merchant account or currency.

    🚧

    Important

    If you do not perform browser-based encryption in the card holder's browser, you have full PCI liability. If you use a server-based system for encryption, you can use RSA-SHA256/SHA512 for the encryption.


  7. Send Card Information to Your Server
    Send the encrypted card number and other card information to your server.

  8. 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:

    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.

  9. Listen for Nexio's Response
    If Nexio returns a 200 status:

    • Save the card token (tokenex.token). You will need this card token to run a transaction as well as to view, edit or delete the card token.
    • Display a success page to the customer.
      If Nexio returns a non-200 status:
    • Display a failure page to the customer.
    • Handle the error . See our list of Common errors for more information.

    Contact Integrations Support if you need additional help.

Updated 9 days ago