Due to our risk policies, the available payment methods and the integration type may vary once you complete the affiliation. We will tell you how to proceed if this process applies to your merchant.
1.
Set up the payment button from your Console.
3.
Integrate the payment button in your front-end.
4.
Redirect your customer to the payment session.
5.
Check the status of the transaction and show a success or failure page to your customer.
1.2 Click on the option Configuration from the left side menu. Several settings options will appear for your merchant.
1.3. From the Integrations section, click on Payment Button. The Payment Button window opens, so you can customize your payment button.
1.4 In the Payment Button window, you can make the following settings for your payment button:1.1 Style settings#
Logo: You can upload your customized logo to appear on the payment form. Maximum size allowed 1000 × 1000. Formats: .png, .jpg.
Primary color: You can modify the color of the Payment Summary card as well as other visual elements.
Button color: It allows you to choose a different color for the payment button.
Button Shape: It allows you to choose between 3 established shapes for the payment button (Round, Semi, Straight).
Button text: It allows you to change the text of the payment button.
Show transaction amount on button: It allows you to choose whether to show the amount of the transaction on the payment button.
1.2. Advanced settings#
Default language: It allows you to choose the default language of the payment form (Spanish, English, Portuguese). The language of the form can be changed by the end customer on the payment form.
Additional product information (optional): It indicates whether additional information will be displayed in addition to the payment summary box. The added fields will go into the json object in the body of the request.
Apple Pay Activation (Beta): In this section, you will also find the option to enable Apple Pay. Please note that this feature is currently in Beta phase.
2. Set up your subdomain (optional)#
For the confidence of your customers, you can set up a subdomain for the URL of the page to which your customers will be redirected to complete their payment, as in the following example:tucomercio.kushkipagos.com
To configure the subdomain, you must request the subdomain configuration from our support team here.We suggest using a name that identifies your company and is easy to remember.
3.1 Request redirection URL#
The first step will be to use the data of your paying customer and the breakdown of the products and prices to be paid in order to make a call to our payment button creation endpoint.In Chile, debit card transactions are done through Transbank's Webpay, while credit card transactions are done through Kushki. Depending on the payment methods you wish to offer your customers, the paymentMethod has the following three options:If you only want to offer debit card on the payment button, enter only card-async.If you only want to offer credit-card in the payment button, enter only credit-card.If you want to offer both debit card and credit card, enter only card-dynamic.As a result of this call, you will get a webcheckoutUrl to which you will redirect your customer to complete the payment in the Kushki checkout experience.For redirection, try to not use containers such as Frame, Panel, or iFrame. Also, avoid using functions such as pop-up windows, as they can be blocked by the browser. Redirect the user within the same tab or window.
1.
They will appear on the payment screen under the Information tab, as it is shown in the following image:
2.
The attribute defined will be sent along with the transaction information and it can be viewed in the webhook, as part of the metadata object.
1.
Enter your Kushki console and go to the Configuration > Integrations > Payment Button section.
2.
Click on the Advanced option and enable the Additional product information feature.
3.
To add new fields, click on the + button. Two text fields, Label and Attribute, will be displayed for you to enter the necessary values. The label will be displayed in text format within the payment form. Meanwhile, the attribute will be used to create the Payment Button through the API. It will be sent along with the transaction information, and it will be visible even at the Webhook level.
4.
You should add the additionalInformation object in the request, which must contain the attribute's name exactly as configured in the Kushki console and any value.
"additionalInformation": {
"contrato": "3381",
"direccion": "Calle 67 #78-92",
"orderID": "000323"
}
Remember that only the fields sent as attributes and their values sent by API will be seen in the metadata object of the webhook.
"metadata": {
"contrato": "3381",
"direccion": "Calle 67 #78-92",
"orderID": "000323"
}
"transactionType": "PRE_AUTH" parameter in the body of the payment button creation endpoint. Your user will be redirected to the payment session to complete the transaction, which will be recorded as an authorization in your Kushki Console.To capture the amount, you must identify the transaction’s ticketNumber from your Console. With this ticketNumber you can make the capture or the void of the authorized amount using our endpoints of capture or void depending on whether or not the service has been completed.3.1.3. Installment payment message#
You can display a message to your customers that explains how the installment payment works:
Installments are banking, interest is managed by the issuer bank of each cardTo enable this message, follow the next steps:1.
Access your Kushki console and go to the Configuration > Integrations > Payment Button section.
2.
Click on the Advanced option and enable the Display installment payment message option.
Merchant Installments Display#
If you have enabled Merchant Installments, the Checkout will automatically display the Interest-free label when the customer selects the number of installments.Additionally, a reference calculation of the approximate amount to be paid per installment will be displayed at the bottom.3.1.4. Automatic redirection at end of transaction#
You can activate an automatic redirection so that once the payment is completed, your customer is redirected to the URL provided in the parameter."redirectURL":"https://www.tucomercio.com".This redirection will be effective in 10 seconds after the transaction is successfully completed.Alternatively, you can integrate a Pay with Kushki button into your Kushki front-end by following the steps below:Include the kushki-checkout.js script in your checkout page by adding it to your HTML file. Always load kushki-checkout directly from cdn.kushkipagos.com to ensure that you comply with the PCI standard. Do not include the script in a bundle or package or host a copy of it on your server.The payment button needs a permanent place on your page. Enter the following code in your website's -, where you want the payment button to be displayed.1. container: It is the id of the html element (div), where the payment button will be displayed.
2. Model: It is the type of button to be displayed (vertical, horizontal, button):Horizontal: 
Vertical: 
Button: 
merchantId: Is the merchant id obtained from the console (My Merchant > Merchant ID).
4. webcheckoutId: Is the webcheckoutId generated when consuming the endpoint to generate a Payment Button.4. Redirect your customer to the Kushki payment session#
Once you redirect your customer to the webcheckoutUrl provided by Kushki, your customer will have 15 minutes to complete the transaction. Once completed, Kushki will notify you via webhook of the status of the transaction, which can be of three types:Approved transaction: When the charge is made correctly. The user can download the payment confirmation or return to the merchant's page by clicking the Return to Store button.
Declined transaction: When the payment cannot be successfully completed, the user will be able to complete the transaction again with another valid payment method as long as the session is still active.
Session timeout: The payment form will automatically expire after 15 minutes. The user will only have the option to return to the URL set by the merchant sent in the body of the request in the redirectURL field.
redirectURL field, so that you can show them the result of the transaction on your site.5. Show the final status of the transaction on your site#
Once your customer clicks Return to shop, they will be redirected to the URL specified in the redirectURL field, so that you can show your merchant the result of the transaction on your site.To consult and display the final status of the transaction from your site, it is necessary to configure the webhooks for card, transfer o cash payments.In order to receive notifications via webhook for payments made with the payment button, in addition to configuring the means of collection of funds from the console (card, transfer and cash), the product or service must be configured (smartlinks).
