Recurring Payments through Webpay OneClick

Register your customers' card data through Webpay OneClick to perform charges with the frequency you prefer

Web

Android

iOS

This functionality is available for the following models:

☐ Acquirer

☑ Aggregator

Kushki allows you to offer recurring payments through Transbank Webpay OneClick, making the process more reliable. Your customers may register their credit cards and RedCompra debit cards to make their scheduled payments.

Additionally, unlike other integration methods, here the customer will be redirected to the Transbank payment portal, and to his/her bank, to complete the registration process.

To keep in mind

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.

How does it Work?

A card registration flow in Webpay OneClick usually follows these steps:

The user starts the registration process in your website or application.

The user is redirected to the Webpay OneClick portal to perform the registration, where his/her card data should be entered.

Then, the user is taken to the credit card issuer's portal (a bank or other financial entity) where the customer's identity is authenticated using his/her credentials.

Once the authentication has been completed, the registration is authorized and the user is taken back to your website.

A message notifying the success or failure of the operation to the user will be displayed, depending on the result of registration process.

Kushki automatically executes the recurring charge to the registered card.

To consider

Cards without a brand or a trademark (Visa, Mastercard, Amex, etc), or that do not have a CVV will not work, such as some of the oldest account cards issued by a Bank.

The flow that you will integrate is shown below:

1. Set up your Front End

The front end is responsible for collecting and generating a token for the user's data through Kushki's servers, and sending that information to the back end to create a subscription.

You have two options to integrate: Kajita and Kushki.js.

Kajita

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

Cajita: our first version of the payment form. Not customizable.

Kajita: is the second version, which allows you to add customizations from your Administration Console and even have several versions of Kajita, one for each payment method, for example.

Create and customize your Kajitas

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

Set up 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 Website

Kajita needs a space within your page. Enter the following code in your website's <body>, 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 obtain the token.

Then, add the script tag.

For the Kajita (v.2) You can obtain this script from your [Administration Console] (https://uat-console.kushkipagos.com/auth) as explained here.

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

This will create a predesigned form on your website to accept payments.

Kushki.js

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

Set up Kushki.js

Option 1 - CDN

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

Option 2 - NPM

Install the package from npm.

Then import it in your code using the following code.

Set up `Kushki` object

Add the following code to your application

Collect User Information and Send it to your Back End

You may collect users' data as you prefer. For this case, we only need an e-mail address, so you can provide it directly if you already have this information, or include an email field for the user to enter his/her address.

Once you have the user's email address, add a Kushki token request to send it to your back end, as shown below:

For more details, check our full reference of Kushki.js

2. Set up your Back End

The back end is responsible for receiving the token obtained from your front end and creating a subscription with Kushki.

When the user submits the form, your front end sends a token to an endpoint that you specified previously. With this token, you must make a call to our [Webpay OneClick subscription endpoint] (https://api-docs.kushkipagos.com/chile/online-payments/async-card-recurring-charges/init) for initializing registration and redirectig the user.

JavaScript

Check our API Reference for more information.

As a response to the call, you will obtain the variable redirectUrl that you must use to redirect the user to Webpay OneClick payments portal. Your customer will complete the registration process in the portal.

For redirecting, try not to 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.

3. Capture the Response

Once the registration is complete, the customer will be taken back through a GET call to the callbackUrl provided as a parameter in step 1. This call will be accompanied by a parameter called subscriptionId placed in the path, which stands for the subscription's unique identifier.

For example, for callbackUrl = "http://www.example.com/return the customer will be returned to GET http://www.example.com/return?subscriptionId=1591842658589000 where subscriptionId is equal to 159184265858900.

If an error occurs during the registration process, the customer will be returned to GET http://www.example.com/return?code=E1&message=Rechazo where code and message notify that the credit card registration was not successfully completed.

According to the response you receive, show the user a success or fail screen to inform the customer if the subscription was created correctly, or if an error occurred.

4. Test your Integration

You can use some test cards in test mode to ensure that your integration is ready. Use them with any CVC and a future expiration date.

Approved transaction: 4023655102252133

Declined transaction: 4568652646042584.

5. Prepare your Certification

Read the following guidelines for technical certification approval (required to obtain productive account credentials):

Tax calculations must be correct.

Messages displayed on screen are in line with Kushki's responses.

All Kushki responses must be saved (required in case you need support).

The first payment date (startDate) must be a future date.

The subscription is also cancelled in Kushki when your customer decides to cancel his/her recurring charges.

All the required data as specified in the API Reference must be submitted.

Kushki's logo must be visible to the customer. You can find our logo in several formats here.

If you are using Kushki.js, also check the following:

The payment button must be disabled after the first click.

Kushki's logo must be visible to the customer. You can find our logo in several formats here.

Manage your Subscriptions

Edit data or cancel automatic charges.

Accept Webhooks

Manage correctly post-payment events.

Recurring Payments through Webpay OneClick

How does it Work?#

1. Set up your Front End#

Kajita#

Create and customize your Kajitas#

Set up Kajita#

Add Kajita to your Website#

Kushki.js#

Set up Kushki.js#

Option 1 - CDN#

Option 2 - NPM#

Set up Kushki object#

Collect User Information and Send it to your Back End#

2. Set up your Back End#

3. Capture the Response#

4. Test your Integration#

5. Prepare your Certification#

How does it Work?

1. Set up your Front End

Kajita

Create and customize your Kajitas

Set up Kajita

Add Kajita to your Website

Kushki.js

Set up Kushki.js

Option 1 - CDN

Option 2 - NPM

Set up `Kushki` object

Collect User Information and Send it to your Back End

2. Set up your Back End

3. Capture the Response

4. Test your Integration

5. Prepare your Certification