3D Secure
Step by Step Integration
Table of Contents
3DS Client side flow
If you are using an older version of our SDK where 3D Secure 2 is not supported, you'll first need to upgrade to our latest SDKs.
If you would like to use a merchant account ID other than your default,
specify the
merchant_account_id
when generating the client token. The merchant account ID used to create the
client token must match
the merchant account ID used to create the subsequent transaction
or
verification.
3DS Server side flow
An alternative way of performing 3DS is to make the 3DS call from the server instead of from the client machine.
To meet the device data collection requirements for 3DS, merchants must
either make a prerequisite prepareLookup call in the client SDK
or pass in the browser fields directly as input parameters.
Prepare the 3DS lookup
The prepareLookup call will return the data needed to perform a
3D Secure lookup call. This call is triggered from the client's device. The
payload returned by this call should be passed on to the server so a 3DS
lookup can be done from there.
- JavaScript
threeDSecure.prepareLookup({
nonce: hostedFieldsTokenizationPayload.nonce,
bin: hostedFieldsTokenizationPayload.details.bin
}, function (err, payload) {
if (err) {
console.error(err);
return;
}
// send payload to server to do server side lookup
});Make the 3DS lookup call
Use the GraphQL mutation performThreeDSecureLookup to attempt
to perform 3D Secure Authentication on credit card payment method. This may
consume the payment method and return a new single-use payment method.
Including device data is mandatory. This can be done either by passing along
the dfReferenceId or browserInformation.
- Mutation
mutation PerformThreeDSecureLookup($input: PerformThreeDSecureLookupInput!) {
performThreeDSecureLookup(input: $input) {
clientMutationId
threeDSecureLookupData {
authenticationId
}
paymentMethod {
id
details {
... on CreditCardDetails {
bin
threeDSecure {
authentication {
cavv
eciFlag
liabilityShifted
liabilityShiftPossible
}
}
}
}
}
}
}- Variables
{
input: {
paymentMethodId: single_use_payment_method_id,
amount: "10.00",
transactionInformation: {
browserInformation:
{
javaEnabled: false,
acceptHeader: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
language: "en-GB",
colorDepth: 24,
screenHeight: 720,
screenWidth: 1280,
timeZone: "0",
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safar i/537.36",
javascriptEnabled: true,
}
ipAddress: "82.34.105.112",
deviceChannel: "BROWSER",
},
}
}Trigger 3DS challenge
This call will launch the iframe challenge using a 3D Secure lookup response from a server side lookup. This call is only necessary if a challenge is required.
- JavaScript
threeDSecure.initializeChallengeWithLookupResponse(lookupResponseFromServer).then(function (payload) {
if (payload.liabilityShifted) {
// Liability has shifted
submitNonceToServer(payload.nonce);
} else if (payload.liabilityShiftPossible) {
// Liability may still be shifted
// Decide if you want to submit the nonce
} else {
// Liability has not shifted and will not shift
// Decide if you want to submit the nonce
}
});