3-Include Javascript
Javascript
const authToken: = "sYWd3XzBiMTVjN2E5ZjI4NmQxODl"; // Token (Generated in Step 2)
const script = document.createElement("script");
script.src = "https://latamgateway.com/javascripts/bt-3d-secure.min.js";
script.onload = () => {
const methods = {
onSuccess: (response) => {
alert("Success!");
alert(JSON.stringify(response));
},
onError: (response) => {
alert("Error!");
alert(JSON.stringify(response));
}
};
const data= {
order: {
id: "7c0b8129-f556-4357-bb6e-8189c2943024", /* Latam order id */
},
customer: {
name: "Customer’s full name",
document: "111.222.333-44",
email: "[email protected]",
phone: "11999999999",
birth: "1996-03-09"
},
credit_card: {
holder_name: "CUSTOMER F NAME",
card_number: '4111111111111111',
cvv: "123",
due_date: "04/27",
brand: "visa",
},
address: {
street: "Av Marechal Camara",
number: "160",
neighborhood: "Centro",
complement: "Sala 934",
zip: "20020080",
city: "Rio de Janeiro",
state: "RJ",
}
};
const latamInstance = {
environment: Latam.Environment.SANDBOX,
callbacks: methods,
authorizationToken: authToken,
data: data
};
latamThreeDs = new Latam.ThreeDSecure(latamInstance);
latamThreeDs.process();
};
document.body.appendChild(script);
Process Explanation
Note: An HTTPS server is required for PRODUCTION.
This javascript should only be executed after the customer fills up the credit card and address info.
After that set the credit_card and address object with that info. Also set the risk info.
All objects with their attributes are required.
Environment
To switch between environments [SANDBOX OR PRODUCTION], just change the constant in the example below:
Latam.Environment.SANDBOX
Callbacks
After executing the 3DS call we have the following JS callbacks:
onSuccess
Card is eligible and has successfully completed the authentication process.
onError
All validation and 3ds errors .
Response
{
"order": {
"code":"123",
"value": 50
},
"customer": {
"name": "Customer’s full name",
"document": "111.222.333-44",
"email": "[email protected]",
"phone": "11999999999",
"birth": "1996-03-09"
},
"credit_card": {
"holder_name": "CUSTOMER F NAME",
"card_number": '4111111111111111',
"cvv": "123",
"due_date": "04/27",
"brand": "visa",
},
"address": {
"street": "Av Marechal Camara",
"number": "160",
"neighborhood": "Centro",
"complement": "Sala 934",
"zip": "20020080",
"city": "Rio de Janeiro",
"state": "RJ",
},
"credentials": {
"payment_method_nonce": "d9745a74-7054-104d-72c7-e4eaf1f274ec"
}
}
The response data will be needed in the next step.