3-Include Javascript

Javascript

const authToken: = "sYWd3XzBiMTVjN2E5ZjI4NmQxODl"; // Token (Generated in Step 2)
const script = document.createElement("script");
script.src = "https://sulpayments.ch/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_id
      value: 50.00,
    },
    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.HOMOLOG,
    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 to 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 [HOMOLOG OR PRODUCTION], just change the constant in the example below:

Latam.Environment.HOMOLOG

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.