This is a guide intended for payment providers that want to offer PSE payment method in a VTEX store. As part of the order transaction flow, it is necessary to inform the connector that will process the payment which bank was selected by the customer.
To provide this information in a way that is frictionless to the shopper experience, follow the steps below:
- Send banks and authentication information to VTEX.
- Update the List Payment Provider Manifest API.
- POST Create Payment configuration.
- Request through the VTEX Support Portal for the payment connector update.
To carry out the integration of the PSE, it is necessary to have a partnership contract with VTEX. If you do not have the contract, access VTEX Support Portal.
Send bank and authentication information
To start the PSE integration process, VTEX needs to receive information that will allow performing the necessary setting in API requests.
The following information should be sent to VTEX:
- GET Banks endpoint used by you to list the banks available to the customer. It should include the response body and any additional information required.
- Authentication key information required to perform the GET request call.
See below an example of the GET Banks endpoint that VTEX will make:
_10curl --request GET \_10--url https://{{providerPSEEndpoint}}/ \_10--header 'Application: application/json' \_10--header 'Content-type: application/json' \_10--header 'auth-token: token'
If there are additional steps to build the auth-token, it should also be described.
After that, VTEX expects a response body following the structure described below:
_16{_16 "banks": [_16 {_16 "name": "XXXX BANK",_16 "code": "1111"_16 },_16 {_16 "name": "YYYY BANK",_16 "code": "2000"_16 },_16 {_16 "name": "ZZZZ BANK",_16 "code": "5555"_16 },_16 ]_16}
List Payment Provider Manifest API Update
After forwarding the banking and authentication information to VTEX, it will be necessary for the payment provider to update information in the API, so that the PSE is recognized as a payment method.
The following PSE information should be added on List Payment Provider Manifest API.
_12{_12..._12"paymentMethods":[_12..._12{_12 "name": "PSE",_12 "allowsSplit": "disabled"_12},_12..._12]_12..._12}
POST Creating Payment request configuration
The bank selected by the shopper will be sent to the connector on the authorization request in the following format:
_10..._10 "metadata": {_10 "bankCode": "1051"_10 },_10 "transactionId": "xyz",_10 "paymentId": "xpt0"_10...
Use the
bankCode
attribute inside the metadata object to create the payment in the PSE and return thepaymentUrl
in order to redirect the buyer to the bank's authentication. Keep in mind that the metadata field can also be null, so the connector should also handle this case by throwing an error with the following error code:PSE_CUSTOM_APP_NOT_FOUND
.
The PSE payment method requires a pre-condition to be processed (bank selection by shopper) and it occurs in an external payment environment. Then, in addition to the fields present in a standard response body, you should use the following fields in the create payment response body:
status
: undefinedpaymentUrl
: bank’s authentication page
For more information, check POST Create Payment documentation.
By selecting the PSE payment method at checkout, your customers will be redirected to the bank environment (page). There, they will complete the necessary authentication (specified according to the chosen bank). After that, there are two possible scenarios: Payment approved (a page containing the order details is shown) or Payment denied (a page containing the specific error is shown).