Transparent checkout

All you need to know about our transparent checkout integration!

Integration

Before starting the integration, bear in mind that, as this is a delicate operation that involves sensitive data from an end user, your development and production environment must be secure and have a certificate https. What we recommend is installing and using the ngrok CLI.

Importing the

The first step for importing the SDK is to check its integration environment:

For development use the sandbox SDK via the URL below.

https://sdk.sandbox.wepayments.com.br/v1

For the production environment use the production SDK via the URL below.

https://sdk.wepayments.com.br/v1

To carry out the import of the transparent checkout SDK, it is necessary to add the following block of code to the head of your HTML.

<!DOCTYPE html>
<html>
  <head>
    <script
      src="URL_SDK_WEPAYMENTS"
      type="text/javascript"
    ></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Initializing the SDK

The SDK can be initialized in 2 ways: manually or automatically.

Manually

To manually initialize the SDK, it is necessary to have a publicKey, in this way the transparent checkout SDK will have the necessary configurations of your merchant.

Your publicKey is visible within the payin settings view in your dashboard

SDK publicKey

With your key in hand, now you need to instantiate the SDK as follows:

const sdk = WEPayin.init({
  publicKey: "YOUR_PUBLIC_KEY",
});

Automatically

To automatically initialize the SDK, it is necessary to include the window.autoInitWeSdk instruction before including the script in the page, as in the following example:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      window.autoInitWeSdk = true;
    </script>

    <script
      src="URL_SDK_WEPAYMENTS"
      type="text/javascript"
    ></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

With that, the SDK will be instantiated in the global variable window.wesdk.

And it is also necessary allow, in your dashboard, the domain of the page where the SDK is being included. To do this, go to Payin > SDK management.

Recover installments

With the SDK instantiated, we now have control over the installments method, where we can retrieve data related to the installments that the customer will be able to pay. In order to obtain this data, we must send the SDK the total amount of the payment that the customer wants to make (in cents) and also the first six digits of the customer's card number, this number is called BIN.

Payload
const installments = await sdk.installments({
  amountInCents: 100000,
  bin: "533278",
});

Param	Type	Description
`amountInCents`	number \| string	Payin amount in cents	Required
`bin`	string	Credit card six first digits	Required

The installments method used is a Promise that returns the following object, according to the number of installments configured:

Response
{
    "installments": [
        {
            "installmentsNumber": 1,
            "installmentsAmountInCents": 100000,
            "installmentsTotalAmountInCents": 100000,
            "recommendedMessage": "1 parcela de R$ 1.000,00 (R$ 1.000,00)"
        },
        {
            "installmentsNumber": 2,
            "installmentsAmountInCents": 50000,
            "installmentsTotalAmountInCents": 100000,
            "recommendedMessage": "2 parcelas de R$ 500,00 (R$ 1.000,00)"
        }
    ],
    "issuer": {
        "name": "Visa",
        "thumbnail": "http://logos.com/visa.png",
        "paymentMethodId": "visa"
    }
}

Tokenize card data

As informed at the beginning of the integration, the SSL certificate is required to operate. as this is a delicate operation involving sensitive data from an end user, your development and production environment must be secure and have a https certificate.

With SSL configured, we can start tokenizing the credit card data. For this, it is necessary to call the tokenize method passing its required parameters over the customer's card data.

Payload
const cardToken = await sdk.tokenize({
  cardNumber: "5031433215406351" ,
  cardholderName: "CARDHOLDER NAME",
  cardExpirationMonth: "11",
  cardExpirationYear: "2025",
  securityCode: "123",
  identificationType: "CPF",
  identificationNumber: "53595590040",
});

Param	Type	Description
cardNumber	string	Credit card number (16-19)	Required
cardholderName	string	Cardholder name	Required
cardExpirationMonth	string	Credit card expiration month (MM)	Required
cardExpirationYear	string	Credit card expiration year (YY - YYYY)	Required
securityCode	string	Credit card security code number (3-4)	Required
identificationType	string	Document type (CPF - CPNJ)	Required
identificationNumber	string	Document number	Required

The tokenize method used is a Promise that returns the following object:

Response
{
  "token": "8e832a8bd0b896fb203fb33b13a4c601",
  "expirationMonth": 11,
  "expirationYear": 2025,
  "firstSixDigits": "503143",
  "lastFourDigits": "6351",
  "cardholder": {
    "identification": {
      "number": "53595590040",
      "type": "CPF"
    },
    "name": "CARDHOLDER NAME"
  }
}

With the data finally tokenized, we can now start the process of creating and paying the charge, which will occur simultaneously through a single call to the WEpayments API.

Checkout

With the token of the credit card, the amount of installments that will be paid and the other data regarding the billing, we can start the checkout. Through the endpoint below, which is currently used to create charges, a new object will now be passed in your payload called checkout. If this object is filled in, at the time of creation of the charge, payment will also be made.

endpoint: /v1/payin/payments/credit-card

method: POST

Payload
{
  "title": {
    "expireDate": "2023-03-16T18:46:11",
    "amountInCents": 100000,
    "instructions": "Payin instructions"
  },
  "buyer": {
    "email": "buyer@email.com",
    "name": "Buyer Name",
    "document": {
      "type": "CPF",
      "number": "53595590040"
    },
    "address": {}
  },
  "statement_descriptor": "merchant_descriptor",
  "clientId": 123,
  "external_urls": {},
  "product_info": [
    {
      "title": "Product title",
      "category_id": "1",
      "id": "1",
      "quantity": "1",
      "unit_price": "12300",
      "description": "Product description"
    }
  ],
  "sender": {
    "name": "",
    "document": "",
    "helpdesk": "merchant.com"
  },
  "checkout": {
    "token": "058f00af2efbadftc85dddb532cf19d0",
    "installments": 2,
    "payment_method_id": "master",
    "payer_name": "Payer Name",
    "payer_phone": "11999999999",
    "payer_address": {
      "zip_code": "01311000",
      "street_name": "Avenida Paulista",
      "street_number": "123"
    }
  }
}

More details about the required fields and types of values to be sent in this endpoint in our OpenAPI. After sending the data, the API will then return the response with the payment status at the time of completion of the request, as in the example below.

Response
{
  "id": 1234,
  "key": "4d81e367c4ba0r07e3cb2ag4b1bbfe1f5bdcf15a5c74989a4bfea9034f9a60x6",
  "clientId": 123,
  "subscriptionId": null,
  "clientName": "WE Payments - Credit Card",
  "senderName": null,
  "senderDocument": null,
  "senderHelpdesk": "merchant.com",
  "buyerName": "Buyer Name",
  "buyerDocument": "53595590040",
  "buyerEmail": "buyer@email.com",
  "customNumber": null,
  "ourNumber": null,
  "digitableLine": null,
  "barCodeNumber": null,
  "status": {
    "id": 6,
    "name": "Awaiting Approval"
  },
  "sender": {
    "name": null,
    "helpdesk": null,
    "document": null
  },
  "typePayin": "credit-card",
  "instructions": "",
  "amountCents": 100000,
  "paidAmountCents": null,
  "paidAt": null,
  "expiresAt": "2023-03-16 18:46:11",
  "createdAt": "2023-03-15T15:01:23.000000Z",
  "fine": null,
  "discount": null,
  "splits": [],
  "statusHistory": [
    {
      "status": {
        "id": 1,
        "name": "Created"
      },
      "id": 9557,
      "updatedAt": "2023-03-15T15:01:23.000000Z"
    },
    {
      "status": {
        "id": 6,
        "name": "Awaiting Approval"
      },
      "id": 9558,
      "updatedAt": "2023-03-15T15:01:23.000000Z"
    },
  ],
  "refundMode": "FULL_REFUND_CLIENT",
  "refundAmountCents": 0,
  "payinRefunds": []
}

After this request has been completed, you can check the status of the charge via a GET method on the following endpoint - /v1/payin/payments/credit-card/{key}/status - Passing the billing key created and returned in the above Response as key.

Integration​

Importing the​

Initializing the SDK​

Manually​

Automatically​

Recover installments​

Tokenize card data​

Checkout​