Skip to main content

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",
});
ParamTypeDescription
amountInCentsnumber | stringPayin amount in centsRequired
binstringCredit card six first digitsRequired

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",
});
ParamTypeDescription
cardNumberstringCredit card number (16-19)Required
cardholderNamestringCardholder nameRequired
cardExpirationMonthstringCredit card expiration month (MM)Required
cardExpirationYearstringCredit card expiration year (YY - YYYY)Required
securityCodestringCredit card security code number (3-4)Required
identificationTypestringDocument type (CPF - CPNJ)Required
identificationNumberstringDocument numberRequired

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.