Receive payments with authorization and capture

Separate the authorization and capture to create a charge now, but capture your funds later.

Web

iOS

Android

This functionality is available for the following models:

☑ Acquirer

☐ Aggregator

Receiving one-time card payments under the authorization and capture scheme guarantees the availability of the amount on the customer's card for a maximum of 9 days. If the payment is not captured in that time, held funds may be released by the issuing bank back to the cardholder.

An example of what you will integrate is as follows:

The flow you will integrate will be as follows:

1. Obtain one-time payment token

The responsibility of the front-end is to collect the user's card information in a secure manner, tokenize that information through Kushki's servers and then send that information to the back-end to initiate the authorization process.

You have three options for integrating: Kajita, Kushki.js and Kushki.js Hosted Fields .

Kajita

Kushki has payment forms ready to collect card information securely. You will be able to use any of our versions:

Cajita: the first version of the payment form. It is not customizable.

Kajita: the second version. It allows you to customize your payment forms from your Administration Console and even have several versions of Kajita, for example, one for each payment method.

Create and customize your Kajitas

With Kushki you can create your Kajitas from the Admin Console. Click here to learn how to do it.

Configure Kajita

Include the kushki-checkout.js script in your payment page by adding it to the <head> of your HTML file. Always load kushki-checkout directly from cdn.kushkipagos.com. Do not include the script in a bundle or package or host a copy of it.

Add Kajita to your site

Kajita needs a space within your page. Enter the following code in the <body> of your site where you want the payment form to be displayed.

For Kajita (v.2):

For Cajita (v.1)

Remember to configure the action of the action form according to the corresponding endpoint in your back-end, to get the token.

Then, add the script tag.

For Kajita (v.2) you can get the script from your Admin Console as explained here.

For v.1 (Cajita), add the following script, making sure that the form has loaded:

This will create a predefined form on your page to accept payments.

You can use Kajita to offer not only card payments, but also cash and by wire-transfer.

Kushki.js

Use Kushki.js if you need more control over the look & feel of your payment form.

Configure Kushki.js

Option 1 - CDN

Use the following script tag at the end of the <body> on your payment page.

Option 2 - NPM

Install the package from npm.

Then import it into your code using the following code.

Collect user information and send it to your back-end.

First, add the form to your payment page with the required fields. You can design it in any way you like.

For example:

Then, when the user submits the form, request the token and send it to your back-end.

Kushki.js Hosted Fields

With Hosted Fields, included in Kushki.js, you can securely collect customer payment information through fields stored on Kushki infrastructure. Returns a token which allows the payment flow to continue from the back-end.

Import Kushki.js Hosted Fields into your app

Option 1 - CDN

Import the Kushki.js Hosted Fields library into your application via a <script> tag inside the <body> tag. Once imported, you will be able to access the resources described below to create a payment flow with Kushki.

It is necessary to import the libraries kushki.min.js (which brings the necessary code to store your merchant's credentials) and card.min.js (the module that brings the necessary functionalities for the flow with card payments).

Option 2 - NPM

Install the Kushki.js Hosted Fields library as an npm package inside your application with the following code:

Option 3 - YARN

Install the Kushki.js Hosted Fields library as a yarn package inside your application with the following code:

Create an instance of `KushkiOptions`

To use the Kushki.js Hosted Fields library, it is necessary to create an instance of KushkiOptions which allows you to set the public key of the work environment (test or production) through the init() method.

Add the following code to your application:

Check the reference for more information about the KushkiOptions instance.

Initialize the form on the front-end

Follow the steps below to render the hosted fields. This way, your clients will be able to enter the necessary data to carry out transactions.

Step 1. Define containers for hosted fields.

Before calling the initCardToken() method, it is required to place the necessary elements to be able to render each hosted field.

Step 2. Create an instance of `CardOptions`

Create an instance of CardOptions with the transaction information, such as the amount, currency, among other parameters.

Step 3. Render hosted fields with the initCardToken() method

After creating an instance of CardOptions, you need to call the initCardToken() function to initialize an instance of ICard.

Check the reference for more information on form initialization.

Request a token to continue the payment flow

Request a card payment token that you can later use to charge a customer with the endpoint to make a one-time payment or to create a recurring charge.

To obtain a card payment token, it is necessary to call the requestToken() method on the previously initialized card instance. This method performs 3DS, OTP and Sift Science validations automatically. Also, validate that all the fields are correct; otherwise it will throw an exception.

Once the token is obtained, send it to your back-end to continue the payment flow.

To perform validations using OTP, check out OTP validation.

See the reference for more information about the token request.

2. Make the authorization

The responsibility of the back-end is to use the collected token to make an authorization request, in case it is approved, make a capture or void depending on the case.

When the user submits the form, your front-end transfers a token to an endpoint you have specified. With this token, you must make a call to our authorization endpoint to initiate the authorization of funds.

JavaScript

Python

PHP

3. Kushki verifies authorization

Kushki will validate the availability of funds with the card-issuing entity.
Once you receive a response from Kushki, save the ticketNumber, as this will be the identifier for the reauthorization, capture or cancellation.

4. Reauthorize the charge (optional)

Extend the validity or amount of the authorization before capturing your funds by calling our reauthorization endpoint.

JavaScript

Python

PHP

5. Execution of the charge

5.1. Make the capture (Optional)

Capture the amount you define according to the authorized by calling our capture endpoint, using the ticketNumber obtained in the authorization.

JavaScript

Python

PHP

5.2 Cancel authorization (Optional)

If you need to cancel an authorization you can do it by calling our charge cancellation enpoint, using the ticketNumber obtained in the authorization.

JavaScript

Python

PHP

You can get more information in our API reference.

Test your integration

There are test cards you can use in the UAT environment to make sure your integration is ready. Use them with any CVV, zip code and future expiration date.

Approved transaction: 5451951574925480

Declined transaction on token request (front-end): 4574441215190335

Transaction declined on authorization: 4349003000047015

Transaction declined on capture: 4547004841271012

Receive payments with authorization and capture

1. Obtain one-time payment token#

Kajita#

Create and customize your Kajitas#

Configure Kajita#

Add Kajita to your site#

Kushki.js#

Configure Kushki.js#

Option 1 - CDN#

Option 2 - NPM#

Collect user information and send it to your back-end.#

Kushki.js Hosted Fields#

Import Kushki.js Hosted Fields into your app#

Option 1 - CDN#

Option 2 - NPM#

Option 3 - YARN#

Create an instance of KushkiOptions#

Initialize the form on the front-end#

Step 1. Define containers for hosted fields.#

Step 2. Create an instance of CardOptions#

Step 3. Render hosted fields with the initCardToken() method#

Request a token to continue the payment flow#

2. Make the authorization#

3. Kushki verifies authorization#

4. Reauthorize the charge (optional)#

5. Execution of the charge#

5.1. Make the capture (Optional)#

5.2 Cancel authorization (Optional)#

Test your integration#

1. Obtain one-time payment token

Kajita

Create and customize your Kajitas

Configure Kajita

Add Kajita to your site

Kushki.js

Configure Kushki.js

Option 1 - CDN

Option 2 - NPM

Collect user information and send it to your back-end.

Kushki.js Hosted Fields

Import Kushki.js Hosted Fields into your app

Option 1 - CDN

Option 2 - NPM

Option 3 - YARN

Create an instance of `KushkiOptions`

Initialize the form on the front-end

Step 1. Define containers for hosted fields.

Step 2. Create an instance of `CardOptions`

Step 3. Render hosted fields with the initCardToken() method

Request a token to continue the payment flow

2. Make the authorization

3. Kushki verifies authorization

4. Reauthorize the charge (optional)

5. Execution of the charge

5.1. Make the capture (Optional)

5.2 Cancel authorization (Optional)

Test your integration