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.
-
Create a Form on Your Web Page
<html> <form id="myForm"> </form> </html>
-
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.
- Cardholder name (
-
Send a
POST
request to the ecommerce Create one-time-use token endpoint.
Any iframeuiOptions
orprocessingOptions
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 . . .
- Go to the Create one-time-use token endpoint.
- In the main content area, click the "SAVE CARD TOKEN API REQUEST" option.
- In the right pane, type your API username and password.
- Select the language you want to use (or leave the default selection).
- Click the Try It! button.
See thetoken
in the Response area.
-
Load the Form
Load the form on your page and allow the user to type their information.
-
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.
-
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.
-
Send Card Information to Your Server
Send the encrypted card number and other card information to your server. -
Post Card Information to Nexio
When the customer accesses the save card page, completes the form, and submits the information, send aPOST
request from your server to the Save card token endpoint with the one-time-use token from step 3 (as thetoken
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 . . .
-
Go to the endpoint.
-
Type your username and password in the Authentication section.
-
Type the token you got in step 3 above in the
token
field. -
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]" }
-
Click the Try It! button.
The response shows the HTML returned to the iframe.
-
-
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.
- Save the card token (
Updated 5 months ago