Toggle navigation

3D Secure 2.0 Integration

Version 1.0.0

3-D Secure

Our software integration sits between the shopping cart and the gateway; authenticating transactions in real time with absolutely no lag. Everything happens in the background with no impact on the customer experience. Before we get started in the integration please make sure you can accept 3-D Secure values first.

1. Banks that support 3-D Secure:

U.S. banks support 3-D Secure. If you are using an international bank please reach out to them to confirm that they support it as well.

2. Processing platforms that support 3-D Secure:

The solution works with all processing platforms that have the pass through fields to capture 3D Secure data (ECI, CAVV, XID), and this is the case with almost all major processors. The only processing platform that we know does NOT have the fields for 3D Secure, is First Data’s Omaha platform.

If you are using Authorize.net, 3D Secure authentication can only happen if you are on one of the following processing platforms:

TSYS
Chase Paymentech
First Data’s Nashville Platform
Global Payments

3. Confirmed Gateways that Support 3D Secure

3D Secure is qualified with many gateways but we’ve listed a few that have been confirmed. If they are not listed below, please reach out to the gateway to verify that they support 3D Secure.

Authorize.net*

NMI

Rebilly

Verifi

Inovio Pay

Payeezy

TranSafe

JetPay

Payflow

USAePay

DurangoPay

Authorize.net * you need to enable 3D Secure (if you don’t know how, reach out to help@3dsintegrator.com and we will send you instructions).

4. Implementing 3DS Integrator

3DS Integrator offers a number of implementation options that accommodate a variety of needs. Choosing a method:

SDK 2.0

  • Serverless:
    The integration can be applied to any customizable checkout page. It will take a few minutes and can be done by anyone.
  • Serverside
    Coding experience is needed. You’ll need access to your servers to generate your own token. Programing language specific.

API

  • Serverless:
    This integration consists of 2 to 3 calls to the API.
  • Serverside
    This integration consists of 1 to 2 call to the API.

Still Need Help?

If you have any additional questions feel free to reach out to us by sending us an message through the “Need Help?” button on the bottom right. Or you could reach us directly at help@3dsintegrator.com

1. Serverless

The integration can be applied to any customizable checkout page. It will take a few minutes and can be done by anyone.

  1. Quick Start integration – Implementation instructions only
  2. Regular Integration – Instructions and reference tables
Programming Language

JavaScript

2. Serverside

Coding experience is needed. You’ll need access to your servers to generate your own token. Programing language specific.

  1. Quick Start integration – Implementation instructions only
  2. Regular Integration – Instructions and reference tables
Programming Language

Quick Start Serverless

Before you get started you’ll need:

  1. Unique API key. This can be found in our dashboard.
  2. A checkout page that is customizable. We will need to drop in a few lines of code in there.

Reference documentation

  1. Checkout page [code] example
  2. Test Credit Cards and Liability Shift Conditions
  3. Video Tutorial

1. Drop-in HTML

Copy the below data-threeds=" " HTML and place them where you are collecting the clients information from your checkout page.

Drop-in HTML:

1. data-threeds="amount"
2. data-threeds="pan"
3. data-threeds="month"
4. data-threeds="year"

Example:

//Before:
<input type="text" name="x_amount" value="10" />
<input type="text" name="x_card_num" value="4111111111111111" />
<input type="text" name="x_exp_month" value="12" />
<input type="text" name="x_exp_year" value="18" />

//After:
<input type="text" name="x_amount" value="10" data-threeds="amount" />
<input type="text" name="x_card_num" value="4111111111111111" data-threeds="pan" />
<input type="text" name="x_exp_month" value="12" data-threeds="month" />
<input type="text" name="x_exp_year" value="18" data-threeds="year"/>

For 2.0 Amex requires to add on additional fields:

*Discover, Mastercard and Visa; it will be optional.

1. data-threeds="shippingStreetAddress"
2. data-threeds="shippingZipCode"
3. data-threeds="emailAddress"
4. data-threeds="billingFirstName"
5. data-threeds="billingLastName"

We’ll be placing a whole new line of code because the last one is a bit different. It generates a unique ID. Lets go ahead and copy the <input> element and paste it right below the <form> element in your checkout page.

Drop-in Code:

<input type="hidden" name="x_transaction_id" value="1234" data-threeds="id" />

Example:

<form id="billing-form" action="" method="post">
  <input type="hidden" name="x_transaction_id" value="1234" data-threeds="id" />

Scroll to the bottom of the page and find the </body>. Found it? Great! Let’s copy and paste the below code right above it. This will generate a unique ID dynamically.

Drop-in Code:

<script type="application/javascript">
  var id = document.querySelector('[data-threeds=id]');
  var uniqueId = function() {
    return 'id-' + Math.random().toString(36).substr(2, 16);
  };
  id.value = uniqueId();
</script>

Example:

      <script type="application/javascript">
        var id = document.querySelector('[data-threeds=id]');
        var uniqueId = function() {
          return 'id-' + Math.random().toString(36).substr(2, 16);
        };
        id.value = uniqueId();
      </script>
    </body>

2. Include the SDK Library

Now that we’ve set up the drop-in codes, we will need to add the library. Copy and paste the below code right above the previous code you just placed on top of the </body> like we did before.

Drop-in Code:

<script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>

Example:

      <script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
      <script type="application/javascript">
        var id = document.querySelector('[data-threeds=id]');
        var uniqueId = function() {
          return 'id-' + Math.random().toString(36).substr(2, 16);
        };
        id.value = uniqueId();
      </script>
    </body>

3. Instantiate Library

The next step is to activate the library but before we get into that there are two types we can set this up for; Sandbox and Production.

  1. Sandbox is a simulated testing environment.
  2. Production is when you are ready to go live.

It is best practice to set up the sandbox environment first. After everything is working in sandbox make the transition to Production.

Sandbox Environment:

Copy and paste the below code underneath the JavaScript library.

Drop-in Code:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

 

verbose:true in the options prints out the process of authentication on your browser console. This is a great way to debug your integration either in sandbox and production.

Example:

<script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>
<script type="application/javascript">
  var id = document.querySelector('[data-threeds=id]');
  var uniqueId = function() {
    return 'id-' + Math.random().toString(36).substr(2, 16);
  };
  id.value = uniqueId();
</script>
</body>

Great! At this point we’ve added all the drop-in codes.

Let’s go ahead and fill in your form ID and your API key inside the instantiating method.

  1. Form ID: It’s the id="billing-form" code inside your <form in your checkout page. If it’s not there you’ll have to add one.

Example:

<form id="billing-form" action="" method="post">
  1. API key: This could be found in our dashboard. For this example we will use “123abc098qWret”.

The end result should look like:

<script >
    var tds = new ThreeDS("billing-form","123abc098qWret",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

4. Check if it works

We are done with the integration portion! If everything has been set up correctly you should be able to have your transactions authenticated.

  1. Fill in a test credit card information. Additional Test Credit Cards
    Credit Card #: 4111111111111111
    Exp month:  01
    Exp year: 21
    
  2. If the transaction was authenticated by default it will be appended to your page. Right click your page and click Inspect. Click the Elements tab. Scroll all the way down until you see </form>. Right above that you should see <div>. Click on that and you should see all the 3DS elements there. The below example shows the initial and the rebill that got authenticated.

 

If you have verbose:true on you can also see it print out in your browser console. Right click your page and click Inspect. Click the Console tab and scroll all the way to the bottom.

5. Moving into Production

To go into production you’ll have to take out the endpoint and verbose:true argument inside the options {}.

Example:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>");
</script>
</body>

 

You can keep verbose:true in your options to help you debug until you have everything set for live traffic.

  1. Deploy your checkout page to a live test URL.
  2. Make sure that you are pointing towards production.
  3. For testing purposes change the authenticated amount to $1.
  4. You’ll have to use a real credit card #, exp year, and exp month. Test cards provided will not work in production.
  5. If the transaction was authenticated it will show up in your dashboard. After you’ve confirmed it was able to get authenticated make the actual purchase.

 

If didn’t work contact support to troubleshoot by clicking the Help on the bottom right corner of this page.

6. Confirming with the Gateway

Now, that you’ve finished the integration we need to confirm that your gateway is receiving the 3DS values. Depending on your gateway it will be displayed differently. Below are listed the most popular ones. If it’s not part of the list, please call your gateway and inquire.

Auth.net: Only Visa cards show up but Mastercard does get protected. You’ll need to enable to accept 3DS. Account > Security Setting > Cardholder Authentication and then check off “I am enrolled in Verified by Visa and I am enrolled in MasterCard SecureCode”.

NMI: Will indicate in the actual Transaction ID if it was protected by showing Cardholder Authenticated, CAVV, and XID fields.

USA epay: If it’s protected the CAVV, XID and ECI values in the transaction details. If not it will show “Not Sent”

Inovio – You need to make sure that you are not on the Payon platform. If you are on it, you can ask them to switch you to TYSYS.

 

If your card gets prompted that means that the ACS(banks) is asking for additional information.

That’s it! You are ready to have live traffic to your site.

Chargeback

Once you go live and you noticed you got a chargeback on a protected transaction, please notify us immediately.

Additional

Rebills

For platforms that support rebills, the SDK can be configured to automatically do another authentication if the initial has successfully completed. You can add this feature by adding {rebill: 2.99} inside your options.

//Sandbox Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null, {endpoint:"https://sandbox-api.3dsintegrator.com", rebill: 2.99});

//Production Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null, {rebill: 2.99});

Options

For additional methods in the options you can click here

Video Tutorial

SDK Serverless

3DS Javascript SDK Integration Tutorial

Before you get started you’ll need:

  1. Unique API key. This can be found in our dashboard.
  2. A checkout page that is customizable. We will need to drop in a few lines of code in there.

Reference documentation

  1. Checkout page [code] example
  2. Test Credit Cards and Liability Shift Conditions
  3. Video Tutorial

1. Drop-in HTML

The drop-in lines of code consists of a small amount of HTML, which will be activated using the our JavaScript SDK.

Copy the below data-threeds=" " HTML and place them where you are collecting the clients information from your checkout page.

Drop-in HTML:

1. data-threeds="amount"
2. data-threeds="pan"
3. data-threeds="month"
4. data-threeds="year"

Example:

//Before:
<input type="text" name="x_amount" value="10" />
<input type="text" name="x_card_num" value="4111111111111111" />
<input type="text" name="x_exp_month" value="12" />
<input type="text" name="x_exp_year" value="18" />

//After:
<input type="text" name="x_amount" value="10" data-threeds="amount" />
<input type="text" name="x_card_num" value="4111111111111111" data-threeds="pan" />
<input type="text" name="x_exp_month" value="12" data-threeds="month" />
<input type="text" name="x_exp_year" value="18" data-threeds="year"/>

For 2.0 Amex requires to add on additional fields:

*Discover, Mastercard and Visa; it will be optional.

1. data-threeds="shippingStreetAddress"
2. data-threeds="shippingZipCode"
3. data-threeds="emailAddress"
4. data-threeds="billingFirstName"
5. data-threeds="billingLastName"

We’ll be placing a whole new line of code because the last one is a bit different. It generates a unique ID. Lets go ahead and copy the <input> element and paste it right below the <form> element in your checkout page.

Drop-in Code:

<input type="hidden" name="x_transaction_id" value="1234" data-threeds="id" />

Example:

<form id="billing-form" action="" method="post">
  <input type="hidden" name="x_transaction_id" value="1234" data-threeds="id" />

Scroll to the bottom of the page and find the </body>. Found it? Great! Let’s copy and paste the below code right above it. This will generate a unique ID dynamically.

Drop-in Code:

<script type="application/javascript">
  var id = document.querySelector('[data-threeds=id]');
  var uniqueId = function() {
    return 'id-' + Math.random().toString(36).substr(2, 16);
  };
  id.value = uniqueId();
</script>

Example:

      <script type="application/javascript">
        var id = document.querySelector('[data-threeds=id]');
        var uniqueId = function() {
          return 'id-' + Math.random().toString(36).substr(2, 16);
        };
        id.value = uniqueId();
      </script>
    </body>

Now that we’ve set up the Drop-in HTML and you want to understand what they are for see the below reference table.

Value
Description
Required

id

Unique identifier for transaction. This should not be more than 20 characters long.

Yes

pan

Input containing the credit card number.

Yes

amount

Input that has the amount to be charged.

Yes

month

2 digit expiration month. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

Yes

year

2 digit expiration year. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

Yes

2. Include the SDK Library

Now that we’ve set up the drop-in codes, we will need to add the library. Copy and paste the below code right above the previous code you just placed on top of the </body> like we did before.

Drop-in Code:

<script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>

Example:

      <script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
      <script type="application/javascript">
        var id = document.querySelector('[data-threeds=id]');
        var uniqueId = function() {
          return 'id-' + Math.random().toString(36).substr(2, 16);
        };
        id.value = uniqueId();
      </script>
    </body>

3. Instantiate Library

Before we start filling the required information, we need to understand the two types of environments. They’re sandbox and production.

  1. Sandbox is a simulated testing environment.
  2. Production is when you are ready to go live.

It is best practice to set up the sandbox environment first. After everything is working in sandbox make the transition to Production.

*If you would like to customize the initializer you can click here.

Sandbox Environment:

Copy and paste the below code underneath the JavaScript library.

Drop-in Code:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

 

verbose:true in the options prints out the process of authentication on your browser console. This is a great way to debug your integration either in sandbox and production.

Example:

<script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>
<script type="application/javascript">
  var id = document.querySelector('[data-threeds=id]');
  var uniqueId = function() {
    return 'id-' + Math.random().toString(36).substr(2, 16);
  };
  id.value = uniqueId();
</script>
</body>

Great! At this point we’ve added all the drop-in codes.

Let’s go ahead and fill in your form ID and your API key inside the instantiating method.

  1. Form ID: It’s the id="billing-form" code inside your <form in your checkout page. If it’s not there you’ll have to add one.

Example:

<form id="billing-form" action="" method="post">
  1. API key: This could be found in our dashboard. For this example we will use “123abc098qWret”.

The end result should look like:

<script >
    var tds = new ThreeDS("billing-form","123abc098qWret",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

FYI – endpoint inside the options indicates that it is pointing towards the sandbox environment.

Argument
Description
Required
Examples

Form ID

ID element of the form. It’s telling the library to look for the information we marked up with the data-threeds=""

Yes

<form id=”billing-form” class=”billing-form”>

API Key

Unique api key found in our dashboard

Yes

null

JWT place holder for sandbox environment

Yes

(sandbox environment only)

Additional conditions that override default settings

No

{autoSubmit: true, addResultToForm: true, verbose: false, etc.}

4. Check if it works

We are done! If everything has been set up correctly you should be able to have your transactions authenticated.

  1. Fill in a test credit card information. Additional Test Credit Cards
    Credit Card #: 4111111111111111
    Exp month:  01
    Exp year: 21
    
  2. If the transaction was authenticated by default it will be appended to your page. Right click your page and click Inspect. Click the Elements tab. Scroll all the way down until you see </form>. Right above that you should see <div>. Click on that and you should see all the 3DS elements there. The below example shows the initial and the rebill that got authenticated.

 

If you have verbose:true on you can also see it print out in your browser console. Right click your page and click Inspect. Click the Console tab and scroll all the way to the bottom.

5. Moving into Production

To go into production you’ll have to take out the endpoint and verbose:true argument inside the options {}.

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>");
</script>
</body>

 

You can keep verbose:true in your options to help you debug until you have everything set for live traffic.

  1. Deploy your checkout page to a live test URL.
  2. Make sure that you are pointing towards production.
  3. For testing purposes change the authenticated amount to $1.
  4. You’ll have to use a real credit card #, exp year, and exp month. Test cards provided will not work in production.
  5. If the transaction was authenticated it will show up in your dashboard. After you’ve confirmed it was able to get authenticated make the actual purchase.

 

If didn’t work contact support to troubleshoot by clicking the Help on the bottom right corner of this page.

6. Confirming with the Gateway

Now, that you’ve finished the integration we need to confirm that your gateway is receiving the 3DS values. Depending on your gateway it will be displayed differently. Below are listed the most popular ones. If it’s not part of the list, please call your gateway and inquire.

Auth.net: Only Visa cards show up but Mastercard does get protected. You’ll need to enable to accept 3DS. Account > Security Setting > Cardholder Authentication and then check off “I am enrolled in Verified by Visa and I am enrolled in MasterCard SecureCode”.

NMI: Will indicate in the actual Transaction ID if it was protected by showing Cardholder Authenticated, CAVV, and XID fields.

USA epay: If it’s protected the CAVV, XID and ECI values in the transaction details. If not it will show “Not Sent”

Inovio – You need to make sure that you are not on the Payon platform. If you are on it, you can ask them to switch you to TYSYS.

 

If your card gets prompted that means that the ACS(banks) is asking for additional information.

That’s it! You are ready to have live traffic to your site.

Chargeback

Once you go live and you noticed you got a chargeback on a protected transaction, please notify us immediately.

Additional

Rebills

For platforms that support rebills, the SDK can be configured to automatically do another authentication if the initial has successfully completed. You can add this feature by adding {rebill: 2.99} inside your options.

//Sandbox Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null, {endpoint:"https://sandbox-api.3dsintegrator.com", rebill: 2.99});

//Production Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null, {rebill: 2.99});

Custom initializer

If you want to customize the initializer you could use the verify method. You have to set autoSubmit:false in your options and create an event that will call the verify method.

The verify method takes 3 arguments.

Example:

tds.verify(response, reject, {autoSubmit:false, amount:20})

You can see a code example here.

Argument
Description
Required

Response

Function to call if a successful result is returned

Yes

Reject

Function to call if it fails and error is returned

Yes

Amount

Amount that you would like to get authenticated

Yes

Options Chart

These are the default parameters you can change by adding them into your options.

Parameter
Default
Description

rebill

false

First rebill only. This gets authenticated right after your initial if your initial got protected.

verbose

false

Output information in your browser console that is helpful in debugging.

endpoint

To point to sandbox environment. You can take this out once you want to go into production.

false

This will display the iframe only if the user gets prompted. If it has a form it will continue to authenticate upon the client filling it out.

iframeId

false

ID of the iframe created.

prompt

false

Function to call to handle personalized logic if client gets prompted. This will not show the iframe. You need to create this function.

autoSubmit

true

Automatically submits the form once all required inputs fields have valid value from the client.

allowRetry

false

Upon the event of the credit card fields being changed it will trigger automatically to authenticate again.

authorizationComplete

false

Serverless only. Function to call if you were able to receive the token from our server. You need to create this function.

start

false

Function to call if authentication has started. You need to create this function.

resolve

false

Function to call if a successful result is returned. You need to create this function.

reject

false

Function to call if it fails and error is returned. You need to create this function.

eciInputId

eci

The input to set eci to when result is returned.

cavvInputId

cavv

The input to set cavv to when result is returned.

xidInputId

xid

The input to set xid to when result is returned.

statusInputId

status

The input to set the status to when the result is returned.

Video Tutorial

Quickstart Serverside

3DS SDK Integration Tutorial

Before you get started you’ll need:

  1. Unique API key and secret. This can found in our dashboard.
  2. A checkout page that is customizable. We will need to drop in a few lines of code in there.
  3. Access to your back-end server.
  4. Text editor of your choice.

Reference documentation

  1. Checkout page (code) example (PHP)
  2. Test Credit Cards and Liability Shift Conditions
  3. JWT Signature Generator
  4. JWT
  5. JWT libraries

1. Drop-in HTML

Copy the below data-threeds=" " HTML and place them where you are collecting the clients information from your checkout page.

Drop-in HTML:

1. data-threeds="amount"
2. data-threeds="pan"
3. data-threeds="month"
4. data-threeds="year"

Example:

//Before:
<input type="text" name="x_amount" value="10" />
<input type="text" name="x_card_num" value="4111111111111111" />
<input type="text" name="x_exp_month" value="12" />
<input type="text" name="x_exp_year" value="18" />

//After:
<input type="text" name="x_amount" value="10" data-threeds="amount" />
<input type="text" name="x_card_num" value="4111111111111111" data-threeds="pan" />
<input type="text" name="x_exp_month" value="12" data-threeds="month" />
<input type="text" name="x_exp_year" value="18" data-threeds="year"/>

We’ll be placing a whole new line of code because the last one is a bit different. It generates a unique ID. Lets go ahead and copy the <input> element and paste it right below the <form> element in your checkout page. The <?=uniqid();?> is the unique # generator in PHP.

Drop-in Code:

<input type="hidden" name="x_transaction_id" value="<?=uniqid();?>" data-threeds="id" />

Example:

<form id="billing-form" action="confirmation.php" method="post">
  <input type="hidden" name="x_transaction_id" value="<?=uniqid();?>" data-threeds="id" />

2. Include the SDK Library

Now that we’ve set up the drop-in codes, we will need to add the library. Copy and paste the below code right above the previous code you just placed on top of the </body> like we did before.

Drop-in Code:

<script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>

Example:

      <script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
    </body>

3. Instantiate Library

The next step is to activate the library but before we get into that there are two types we can set this up for; Sandbox and Production.

  1. Sandbox is a simulated testing environment.
  2. Production is when you are ready to go live.

It is best practice to set up the sandbox environment first. After everything is working in sandbox make the transition to Production.

Sandbox Environment:

Copy and paste the below code underneath the JavaScript library.

Drop-in Code:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

 

verbose:true in the options prints out the process of authentication on your browser console. This is a great way to debug your integration either in sandbox and production.

Example:

  <script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
  <script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
  </script>
</body>

Great! At this point we’ve added all the drop-in codes.

Let’s go ahead and fill in your form ID and your API key inside the instantiating method.

  1. Form ID: It’s the id="billing-form" code inside your <form in your checkout page. If it’s not there you’ll have to add one.

Example:

<form id="billing-form" action="confirmation.php" method="post">
  1. API key: This could be found in our dashboard. For this example we will use “123abc098qWret”.

The end result should look like:

<script >
    var tds = new ThreeDS("billing-form","123abc098qWret",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>
  1. JWT: Testing in Sandbox Environment a JWT doesn’t need to be generated. There’s a placeholder for this that is the nullparameter.

4. Check if it works

We are done! If everything has been set up correctly you should be able to have your transactions authenticated.

  1. Fill in a test credit card information. Additional Test Credit Cards
    Credit Card #: 4111111111111111
    Exp month:  01
    Exp year: 21
    
  2. If the transaction was authenticated by default it will be appended to your page. Right click your page and click Inspect. Click the Elements tab. Scroll all the way down until you see </form>. Right above that you should see <div>. Click on that and you should see all the 3DS elements there. The below example shows the initial and the rebill that got authenticated.
    Everything works? Great! Let’s go ahead and move towards setting this for production.

 

f you have verbose:true on you can also see it print out in your browser console. Right click your page and click Inspect. Click the Console tab and scroll all the way to the bottom.

5. Moving into Production

To go into production you’ll have to take out the endpoint and verbose:true argument inside the options {}.

We’ll have to replace the null with a real JWT and remove the endpoint inside the options.

Example:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>","<insert-JWT-here>",{verbose:true});
</script>

 

You can keep verbose:true in your options to help you debug until you have everything set for live traffic.

Creating your JWT Signature

Creating your signature will ensure that only you are making the call between our API and your application.

Requirements:

  1. You’ll need to access your code base.
  2. Your unique API key and secret.
  3. Text editor.

We’ve created a demo generator. Click here.

The JWT generator needs to take 4 parameters. The Issuer, Audience, Expiration and Secret. The generator will create a token by taking the first 3 parameters and then signing it all together with the Secret.

The following languages have documentation:

. – E
G-O
P-S

.NET

Go

Perl

1C

Groovy

PHP

C

Haskell

PostgreSQL

C++

Haxe

Python

Clojure

Java

Ruby

Crystal

JavaScript

Rust

D

kdb+/Q

Scala

Delphi

Lua

Swift

Elixir

Node.js

Erlang

Objective-C

Final run through

  1. Deploy your checkout page to a live test URL.
  2. Make sure that you are pointing towards production.
  3. For testing purposes change the authenticated amount to $1.
  4. You’ll have to use a real credit card #, exp year, and exp month. Test cards provided will not work in production.
  5. If the transaction was authenticated it will show up in your dashboard. After you’ve confirmed it was able to get authenticated make the actual purchase.

 

If didn’t work contact support to troubleshoot by clicking the Help on the bottom right corner of this page. Since this is the frictionless solution it will not be displayed to your clients.

6. Confirming with the Gateway

Now, that you’ve finished the integration we need to confirm that your gateway is receiving the 3DS values. Depending on your gateway it will be displayed differently. Below are listed the most popular ones. If it’s not part of the list, please call your gateway and inquire.

Auth.net: Only Visa cards show up but Mastercard does get protected. You’ll need to enable to accept 3DS. Account > Security Setting > Cardholder Authentication and then check off “I am enrolled in Verified by Visa and I am enrolled in MasterCard SecureCode”.

NMI: Will indicate in the actual Transaction ID if it was protected by showing Cardholder Authenticated, CAVV, and XID fields.

USA epay: If it’s protected the CAVV, XID and ECI values in the transaction details. If not it will show “Not Sent”

Inovio – You need to make sure that you are not on the Payon platform. If you are on it, you can ask them to switch you to TYSYS.

 

If your card gets prompted that means that the ACS(banks) is asking for additional information.

That’s it! You are ready to have live traffic to your site.

Chargeback

Once you go live and you noticed you got a chargeback on a protected transaction, please notify us immediately.

Additional

Rebills

For platforms that support rebills, the SDK can be configured to automatically do another authentication if the initial has successfully completed. You can add this feature by adding {rebill: 2.99} inside your options.

//Sandbox Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null, {endpoint:"https://sandbox-api.3dsintegrator.com", rebill: 2.99});

//Production Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>", "<insert-JWT-here>", {rebill: 2.99});

Options

For additional methods in the options you can click here

SDK Serverside

3DS SDK Integration Tutorial

Before you get started you’ll need:

  1. Unique API key and secret. This can found in our dashboard.
  2. A checkout page that is customizable. We will need to drop in a few lines of code in there.
  3. Access to your back-end server.
  4. Text editor of your choice.

Reference documentation

  1. Checkout page (code) example (PHP)
  2. Test Credit Cards and Liability Shift Conditions
  3. JWT Signature Generator
  4. JWT
  5. JWT libraries

1. Drop-in HTML

Copy the below data-threeds=" " HTML and place them where you are collecting the clients information from your checkout page.

Drop-in HTML:

1. data-threeds="amount"
2. data-threeds="pan"
3. data-threeds="month"
4. data-threeds="year"

Example:

//Before:
<input type="text" name="x_amount" value="10" />
<input type="text" name="x_card_num" value="4111111111111111" />
<input type="text" name="x_exp_month" value="12" />
<input type="text" name="x_exp_year" value="18" />

//After:
<input type="text" name="x_amount" value="10" data-threeds="amount" />
<input type="text" name="x_card_num" value="4111111111111111" data-threeds="pan" />
<input type="text" name="x_exp_month" value="12" data-threeds="month" />
<input type="text" name="x_exp_year" value="18" data-threeds="year"/>

We’ll be placing a whole new line of code because the last one is a bit different. It generates a unique ID. Lets go ahead and copy the <input> element and paste it right below the <form> element in your checkout page. The <?=uniqid();?> is the unique # generator in PHP.

Drop-in Code:

<input type="hidden" name="x_transaction_id" value="<?=uniqid();?>" data-threeds="id" />

Example:

<form id="billing-form" action="confirmation.php" method="post">
  <input type="hidden" name="x_transaction_id" value="<?=uniqid();?>" data-threeds="id" />

Now that we’ve set up the Drop-in HTML and you want to understand what they are for see the below reference table.

Value
Description
Example

id

Unique identifiers for transaction. This should not be more than 20 characters long.

Yes

pan

Input containing the credit card number.

Yes

amount

Input that has the amount to be charged.

Yes

month

2 digit expiration month. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

Yes

year

2 digit expiration year. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

Yes

2. Include the SDK Library

Now that we’ve set up the drop-in codes, we will need to add the library. Copy and paste the below code right above the previous code you just placed on top of the </body> like we did before.

Drop-in Code:

<script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>

Example:

    <script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
  </body>

3. Instantiate Library

The next step is to activate the library but before we get into that there are two types we can set this up for; Sandbox and Production.

  1. Sandbox is a simulated testing environment.
  2. Production is when you are ready to go live.

It is best practice to set up the sandbox environment first. After everything is working in sandbox make the transition to Production.

Sandbox Environment:

Copy and paste the below code underneath the JavaScript library.

Drop-in Code:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

 

verbose:true in the options prints out the process of authentication on your browser console. This is a great way to debug your integration either in sandbox and production.

Example:

  <script src="https://cdn.3dsintegrator.com/threeds.min.latest.js"></script>
  <script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
  </script>
</body>

Great! At this point we’ve added all the drop-in codes.

Let’s go ahead and fill in your form ID and your API key inside the instantiating method.

  1. Form ID: It’s the id="billing-form" code inside your <form in your checkout page. If it’s not there you’ll have to add one.

Example:

<form id="billing-form" action="confirmation.php" method="post">
  1. API key: This could be found in our dashboard. For this example we will use “123abc098qWret”.

The end result should look like:

<script >
    var tds = new ThreeDS("billing-form","123abc098qWret",null,{endpoint:"https://sandbox-api.3dsintegrator.com", verbose:true});
</script>

Please refer to the below table for further explanation.

Argument
Description
Required
Examples

Form ID

ID of the form. It’s telling the library to look for the information we tagged with the data-threeds="".

Yes

<form id=”billing-form” action=”confirmation.php” method=”post”>

API Key

Unique Api Key found in our dashboard. This is a unique identifier.

Yes

Encryption of various information.

Yes

Additional conditions that override default settings.

No

{autoSubmit: true, addResultToForm: true, verbose: false, etc.}

4. Check if it works

We are done! If everything has been set up correctly you should be able to have your transactions authenticated.

  1. Fill in a test credit card information. Additional Test Credit Cards
    Credit Card #: 4111111111111111
    Exp month:  01
    Exp year: 21
    
  2. If the transaction was authenticated by default it will be appended to your page. Right click your page and click Inspect. Click the Elements tab. Scroll all the way down until you see </form>. Right above that you should see <div>. Click on that and you should see all the 3DS elements there. The below example shows the initial and the rebill that got authenticated.

 

If you have verbose:true on you can also see it print out in your browser console. Right click your page and click Inspect. Click the Console tab and scroll all the way to the bottom.

5. Moving into Production

We’ll have to replace the null with a real JWT and remove the endpoint inside the options.

Example:

<script >
    var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>","<insert-JWT-here>",{verbose:true});
</script>

 

You can keep verbose:true in your options to help you debug until you have everything set for live traffic.

Creating your JWT Signature

Creating your signature will ensure that only you are making the call between our API and your application.

Requirements:

  1. You’ll need to access your code base.
  2. Your unique API key and secret.
  3. Text editor.

We’ve created a demo generator. Click here.

The JWT generator needs to take 4 parameters. The Issuer, Audience, Expiration and Secret. The generator will create a token by taking the first 3 parameters and then signing it all together with the API Secret.

JWT Fields
Description
Input

Issuer

We are the issuer

3dsinetegrator_Authentication_Server

Audience

API key

Your unique API key

Expiration

Time you want this token to expire

Unix amount

Secret

API secret

Your unique API secret

The following languages have documentation:

. – E
G-O
P-S

.NET

Go

Perl

1C

Groovy

PHP

C

Haskell

PostgreSQL

C++

Haxe

Python

Clojure

Java

Ruby

Crystal

JavaScript

Rust

D

kdb+/Q

Scala

Delphi

Lua

Swift

Elixir

Node.js

Erlang

Objective-C

Final run through

  1. Deploy your checkout page to a live test URL.
  2. Make sure that you are pointing towards production.
  3. For testing purposes change the authenticated amount to $1.
  4. You’ll have to use a real credit card #, exp year, and exp month. Test cards provided will not work in production.
  5. If the transaction was authenticated it will show up in your dashboard. After you’ve confirmed it was able to get authenticated make the actual purchase.

 

If didn’t work contact support to troubleshoot by clicking the Help on the bottom right corner of this page. Since this is the frictionless solution it will not be displayed to your clients.

6. Confirming with the Gateway

Now, that you’ve finished the integration we need to confirm that your gateway is receiving the 3DS values. Depending on your gateway it will be displayed differently. Below are listed the most popular ones. If it’s not part of the list, please call your gateway and inquire.

Auth.net: Only Visa cards show up but Mastercard does get protected. You’ll need to enable to accept 3DS. Account > Security Setting > Cardholder Authentication and then check off “I am enrolled in Verified by Visa and I am enrolled in MasterCard SecureCode”.

NMI: Will indicate in the actual Transaction ID if it was protected by showing Cardholder Authenticated, CAVV, and XID fields.

USA epay: If it’s protected the CAVV, XID and ECI values in the transaction details. If not it will show “Not Sent”

Inovio – You need to make sure that you are not on the Payon platform. If you are on it, you can ask them to switch you to TYSYS.

 

If your card gets prompted that means that the ACS(banks) is asking for additional information.

That’s it! You are ready to have live traffic to your site.

Chargeback

Once you go live and you noticed you got a chargeback on a protected transaction, please notify us immediately.

Additional

Rebills

For platforms that support rebills, the SDK can be configured to automatically do another authentication if the initial has successfully completed. You can add this feature by adding {rebill: 2.99} inside your options.

//Sandbox Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>",null, {endpoint:"https://sandbox-api.3dsintegrator.com", rebill: 2.99});

//Production Environment
var tds = new ThreeDS("<insert-form-id>","<insert-your-api-key-here>", "<insert-JWT-here>", {rebill: 2.99});

Custom initializer

If you want to customize the initializer you could use the verify method. You have to set autoSubmit:false in your options and create an event that will call the verify method.

The verify method takes 3 arguments.

Example:

tds.verify(response, reject, {autoSubmit:false, amount:20})

You can see a code example here.

Argument
Description
Required

Amount

Amount that you would like to get authenticated

Yes

Response

Function to call if a successful result is returned

Yes

Reject

Function to call if it fails and error is returned

Yes

Options Chart

These are the default parameters you can change by adding them into your options.

Parameter
Default
Description

rebill

false

First rebill only. This gets authenticated right after your initial if your initial got protected.

verbose

false

Output information in your browser console that is helpful in debugging.

endpoint

To point to sandbox environment. You can take this out once you want to go into production.

false

This will display the iframe only if the user gets prompted. If it has a form it will continue to authenticate upon the client filling it out.

iframeId

false

ID of the iframe created.

prompt

false

Function to call to handle personalized logic if client gets prompted. This will not show the iframe. You need to create this function.

autoSubmit

true

Automatically submits the form once all required inputs fields have valid value from the client.

allowRetry

false

Upon the event of the credit card fields being changed it will trigger automatically to authenticate again.

authorizationComplete

false

Serverless only. Function to call if you were able to receive the token from our server. You need to create this function.

start

false

Function to call if authentication has started. You need to create this function.

resolve

false

Function to call if a successful result is returned. You need to create this function.

reject

false

Function to call if it fails and error is returned. You need to create this function.

eciInputId

eci

The input to set eci to when result is returned.

cavvInputId

cavv

The input to set cavv to when result is returned.

xidInputId

xid

The input to set xid to when result is returned.

statusInputId

status

The input to set the status to when the result is returned.

1. Serverless

This integration consists of 2 to 3 calls to the API.

2. Serverside

This integration consists of 1 to 2 call to the API.

API Serverless

3DS API Integration Tutorial

Before you get started you’ll need:

  1. Unique API key and secret. This can found in our dashboard.
  2. A checkout page that is customizable.
  3. Access to your back-end server.
  4. Text editor of your choice.

Reference documentation

  1. Test Creditcards
  2. API reference calls
  3. Code Example

1. Obtain information from the form

You’ll need to collect in total of 5 fields from the form.

  1. Unique transaction ID
  2. Amount (Needs to be an integer or a float)
  3. Credit Card #
  4. Month
  5. Year
Value
Type
Description

id

string

Unique identifiers for transaction. This should not be more than 20 characters long.

pan

string

Input containing the credit card number.

amount

integer or float

Input that has the amount to be charged.

month

integer

2 digit expiration month. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

year

integer

2 digit expiration year. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

2. Authorize

The first call will be made to our server to obtain the JWT. You’ll have to pass your API key in the header. The token will expire every 5 minutes.

Before you build it out you can test each call to our Sandbox API through our demo.

Sandbox

In this environment you’ll have to make the first call to the below endpoint.
Endpoint:

https://sandbox-api.3dsintegrator.com/authorize

Sandbox Example:

For this tutorial we’ll be making a jQuery ajax call in the browser.

    $.ajax({
      type: "POST",
      url: "https://sandbox-api.3dsintegrator.com/authorize",
      headers:{'X-3DS-API-KEY': '<insert-your-api-key>'},
      dataType: "json",
      success: function(res, status, xhr){
        var jwt = xhr.getResponseHeader('authorization');
      },
      fail: function(res){
       <insert-fail-response-handler>
      }
    });

Production

Once you are ready to go into production you’ll make the call to the below end point.
Endpoint:

https://api.3dsintegrator.com/authorize

Great! We did our first call to the 3DS server. We’ve obtained the JWT and stored it in a variable. We’ll be using this token to make our next call.

3. Authenticate

Upon the success of the first call we’ll make the second call to the API. This call is for Payment Authentication Request. This starts the authentication process by retrieving the acquirer info to show in the browser. Here is were you are going to pass all the information that you’ve collected from the clients browser. The API will then return a AcsUrl, PaReq, TermUrl, MD in the response.

Sandbox

Endpoint:

https://sandbox-api.3dsintegrator.com/authenticate

Sandbox Example:

    $.ajax({
        type: "POST",
        dataType:"json",
        url:"https://sandbox-api.3dsintegrator.com/authenticate",
        headers:{'X-3DS-API-KEY': '<insert-api-key-here>',
        'authorization': '<insert-JWT-here>'},
        data: { 'transactionId' : transactionId, 'amount' : amount, 'pan': pan, 'month': month, 'year': year },
        success: function(resp){
        },
        fail: function(res){
          <insert-fail-response-handler>
      }
   });

Production

Endpoint:

https://api.3dsintegrator.com/authenticate

If the call was successful it should look similar to the below:

{
    "AcsUrl": "https://acs.demo.3dsintegrator.com/send",
    "TermUrl": "https://sandbox-api.3dsintegrator.com/acs-response/886e77a5-b6e7-4e4a-952d-9060c16e8450",
   "transactionId": "613d6cd6-a20b-4d90-851d-c595f8ec3a2c"
    "MD": "123",
    "PaReq": "eyJwYW4iOiI0MTExMTExMTExMTExMTExIiwibW9udGgiOjEyLCJ5ZWFyIjoyMywiYW1vdW50IjoxMiwidHJhbnNhY3Rpb25JZCI6IjEyMyJ9"
}

Detailed explanation of each property for your reference is listed below.

Property
Description
Example

AcsUrl

URL that points to the bank’s directory server

PaReq

Data that is encoded and sent to the directory server

eJx1kduOgkAMhl/FmL2mHJWQ2oRFE7nQGOV+M4FGSJaDA4i==

TermUrl

URL that the response is returned to

MD

The ID used to reference the transaction

123

transactionId

Transaction ID used to reference the transaction internally

613d6cd6-a20b-4d90-851d-c595f8ec3a2c

3. Send Data to Directory Server In Browser

This is a new step but this will be happening upon the success of the previous step. You’ll be creating a hidden iframe that will auto submit a HTTP POST to the AcsUrl that you’ve received. This way the Customer “thinks” he’s still on the cart’s site, while in the background, we do plenty of redirects.

Inside the iframe you’ll need to provide a few things.

Requirements:

  1. Create an iframe with a unique formID.
  2. Populate the iframe with all the properties that you received from the second call
  3. POST: AcsUrl
<html>
<body>
<form name="form3ds" action="'<insert-AcsUrl-here>'" method="post">
  <input type="hidden" name="PaReq" value="'<insert-PaReq-here>" />
  <input type="hidden" name="TermUrl" value="'<insert-TermUrl-here>'" />
  <input type="hidden" name="MD" value="'<insert-MD-here>'" />
  <input type="submit" value="submit" />
</form>
</body>
</html>

If the response was not received then you’ll have to delete the iframe because then the hidden iframe will not allow the client to continue with the transaction.

4. Authentication Response

This call is to check if there is a response if you don’t want to create an event listener. You’ll have to make a call every so often to see if the results was received from the 3DS server.

Additional

Rebills

Upon the success of the first authentication you can trigger a second call with the rebill amount.

API Serverside

3DS API Integration Tutorial

Before you get started you’ll need:

  1. Unique API key and secret. This can found in our dashboard.
  2. A checkout page that is customizable.
  3. Access to your back-end server.
  4. Text editor of your choice.

Reference documentation

  1. Test Creditcards
  2. API reference calls
  3. JWT Signature Generator
  4. JWT
  5. JWT libraries

1.Obtain information from the form

You’ll need to collect in total of 5 fields from the form.

  1. Unique transaction ID
  2. Amount (Needs to be an integer or a float)
  3. Credit Card #
  4. Month
  5. Year
Value
Type
Description

id

string

Unique identifiers for transaction. This should not be more than 20 characters long.

pan

string

Input containing the credit card number.

amount

integer or float

Input that has the amount to be charged.

month

integer

2 digit expiration month. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

year

integer

2 digit expiration year. If expiration is not 1 or 2 digits then you may need to implement a customized forms.

2. Creating your JWT Signature

Creating your signature will ensure that only you are making the call between our API and your application.

Requirements:

  1. You’ll need to access your code base.
  2. Your unique API key and secret.
  3. Text editor.

We’ve created a demo generator. Click here.

The JWT generator needs to take 4 parameters. The Issuer, Audience, Expiration and Secret. The generator will create a token by taking the first 3 parameters and then signing it all together with the API Secret.

JWT Fields
Description
Input

Issuer

We are the issuer

3dsinetegrator_Authentication_Server

Audience

API key

Your unique API key

Expiration

Time you want this token to expire

Unix amount

Secret

API secret

Your unique API secret

The following Libraries have documentation:

. – E
G-O
P-S

.NET

Go

Perl

1C

Groovy

PHP

C

Haskell

PostgreSQL

C++

Haxe

Python

Clojure

Java

Ruby

Crystal

JavaScript

Rust

D

kdb+/Q

Scala

Delphi

Lua

Swift

Elixir

Node.js

Erlang

Objective-C

3. Authenticate

This call is for Payment Authentication Request. This starts the authentication process by retrieving the acquirer info to show in the browser. Here is were you are going to pass all the information that you’ve collected from the clients browser. The API will then return a AcsUrl, PaReq, TermUrl, MD in the response.

Sandbox

Endpoint:

https://sandbox-api.3dsintegrator.com/authenticate

Sandbox Example:

    $.ajax({
        type: "POST",
        dataType:"json",
        url:"https://sandbox-api.3dsintegrator.com/authenticate",
        headers:{'X-3DS-API-KEY': '<insert-api-key-here>',
        'authorization': '<insert-JWT-here>'},
        data: { 'transactionId' : transactionId, 'amount' : amount, 'pan': pan, 'month': month, 'year': year },
        success: function(resp){
        },
        fail: function(res){
          <insert-fail-response-handler>
      }
   });

Production

Endpoint:

https://api.3dsintegrator.com/authenticate

If the call was successful it should look similar to the below:

{
    "AcsUrl": "https://acs.demo.3dsintegrator.com/send",
    "TermUrl": "https://sandbox-api.3dsintegrator.com/acs-response/886e77a5-b6e7-4e4a-952d-9060c16e8450",
    "transactionId": "613d6cd6-a20b-4d90-851d-c595f8ec3a2c",
    "MD": "123",
    "PaReq": "eyJwYW4iOiI0MTExMTExMTExMTExMTExIiwibW9udGgiOjEyLCJ5ZWFyIjoyMywiYW1vdW50IjoxMiwidHJhbnNhY3Rpb25JZCI6IjEyMyJ9"
}

Detailed explanation of each property for your reference is listed below.

Property
Description
Example

AcsUrl

URL that points to the bank’s directory server

PaReq

Data that is encoded and sent to the directory server

eJx1kduOgkAMhl/FmL2mHJWQ2oRFE7nQGOV+M4FGSJaDA4i==

TermUrl

URL that the response is returned to

MD

The ID used to reference the transaction

123

transactionId

Transaction ID used to reference the transaction internally

613d6cd6-a20b-4d90-851d-c595f8ec3a2c

3. Send Data to Directory Server In Browser

This is a new step but this will be happening upon the success of the previous step. You’ll be creating a hidden iframe that will auto submit a HTTP POST to the AcsUrl that you’ve received. This way the Customer “thinks” he’s still on the cart’s site, while in the background, we do plenty of redirects.

Inside the iframe you’ll need to provide a few things.

Requirements:

  1. Create an iframe with a unique formID.
  2. Populate the iframe with all the properties that you received from the second call
  3. POST: AcsUrl
<html>
<body>
<form name="form3ds" action="'<insert-AcsUrl-here>'" method="post">
  <input type="hidden" name="PaReq" value="'<insert-PaReq-here>" />
  <input type="hidden" name="TermUrl" value="'<insert-TermUrl-here>'" />
  <input type="hidden" name="MD" value="'<insert-MD-here>'" />
  <input type="submit" value="submit" />
</form>
</body>
</html>

If the response was not received then you’ll have to delete the iframe because then the hidden iframe will not allow the client to continue with the transaction.

4. Authentication Response

This call is to check if there is a response if you don’t want to create an event listener. You’ll have to make a call every so often to see if the results was received from the 3DS server.

Additional

Rebills

Upon the success of the first authentication you can trigger a second call with the rebill amount.

Serverless & Serverside

1. 400 (Bad Request)

ERROR {"error":"Invalid ApiKey","transactionId":"2e48a2ed-f7cf-4b17-8c90-508d48d097b1"}

Check if you’ve set up your account in the dashboard correctly. It could be because the Website URL field hasn’t been field in.

2. Low authentications

It could be that your form is too short that the authentication doesn’t have enough time to complete before the client hits submit.

3. Too many requests are happening

Make sure that your credit card and expiration dates have empty values.

4. I am not seeing the OTP

You won’t see an OTP (One-Time Password) in the United States because it is risk based authentications. If a bank were to prompt it won’t show because our solution is frictionless. You can allow the prompt to pop-up in the options.

Serverless & Serverside

1. Iframe is won’t allow to continue

This means that you have to provide an X option for the user to delete the iframe if they choose no to authenticate but want to move forward.