Create a recurring charge

Register your customers' credit or debit card data to charge them with the frequency that you define for payments

Web
iOS
Android

Receiving recurring payments with debit and credit cards on your website means capturing the card’s information, generating a token, and creating a subscription in Kushki. This allows charges to be automatically made with the periodicity you prefer.

This is an example of what you can integrate:

The payment flow that you will integrate is as shown below:

Card subscription flow

1. Set up your Front End

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

You have two options for integrating Kushki in your website: Cajita and Kushki.js.

Cajita

Use Cajita to simplify your integration. Cajita is a ready-to-use solution to collect card information safely.

Set up Cajita

Embed 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 to ensure that you comply with the PCI standard that is already contained in the CDN. Never embed the script in a bundle or package, nor host a copy of it.

<head>
<title>Checkout</title>
<script src="https://cdn.kushkipagos.com/kushki-checkout.js"> </script>
</head>

Add Cajita to your Website

Cajita needs a place to live on your page. Enter the following code in your site’s <body>, where you want the payment form to be displayed.

<form id="payment-form" action="/confirm" method="post">
<input type="hidden" name="cart_id" value="123">
</form>

Remember to configure the action of the action form according to the corresponding endpoint in your back-end. This will allow you to obtain the token.

Then, add the following script tag. Make sure that the form has been uploaded.

<script type="text/javascript">
var kushki = new KushkiCheckout({
form: "payment-form",
merchant_id: "88ba4bff110548d09acde8d326c71253", // Replace this with your Public Key
amount: "14.99",
currency: "USD",
payment_methods:["credit-card"],
is_subscription: true,
inTestEnvironment: true // Configured in test mode
});
</script>

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.

<script src="https://cdn.kushkipagos.com/kushki.min.js"></script>
Option 2 - npm

Install the package from npm.

npm install --save @kushki/js

Then import it in your code using the following code.

import { Kushki } from “@kushki/js”;

Set up Kushki Object.

Add the following code to your application

var kushki = new Kushki({
merchantId: '88ba4bff110548d09acde8d326c71253', // Replace this with your Public Key
inTestEnvironment: true, // Configured in test mode
});

Collect User Information and Send it to your Back End

First, embed the form in your payment page adding the required fields. You can design it in the way that best suits you.

For example:

<form id="payment-form">
<input placeholder="Card Number" type="text" name="number">
<input placeholder="Full Name" type="text" name="name">
<input placeholder="MM" type="text" name="expiry_month">
<input placeholder="YY" type="text" name="expiry_year">
<input placeholder="CVC" type="text" name="cvc">
<button id="submit">Pay $14.99</button>
</form>

And, for the moment the user submits the form, add the token request and take it to your back end.

kushki.requestSubscriptionToken({
currency: "USD",
card: {
name: form.name,
number: form.number,
cvc: form.cvv,
expiryMonth: form.expiry_month,
expiryYear: form.expiry_year,
},
}, (response) => {
if(!response.code){
console.log(response.token);
// Submit your code to your back-end
} else {
console.error('Error: ',response.error, 'Code: ', response.code, 'Message: ',response.message);
}
});

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. Using this token, you must make a call to our API endpoint to create the subscription.

  • Javascript
  • Python
  • PHP
var request = require("request");
var options = {
method: 'POST',
headers: [
'Private-Merchant-Id': '0c0b08cd92fc491fb37365170164f7e9', // Replace this with your Private Key
'Content-Type': 'application/json'
]
url: 'https://api-uat.kushkipagos.com/subscriptions/v1/card', // Test environment
headers: {'content-type': 'application/json'},
body: {
token: 'V0OzRB100000xhxQB8035251pHLBQsq5', // Replace this with the token you received
amount: {subtotalIva: 0, subtotalIva0: 14.99, ice: 0, iva: 0, currency: 'USD'},
planName: 'Premium',
periodicity: 'monthly',
contactDetails: {firstName": 'Juan', lastName: 'Flores', email: 'pruebas@kushki.com', phoneNumber: '+593984775632'},
startDate: '2021-09-25', // Date of the first charge
metadata: {contractID: '157AB'}
},
json: true
};
request(options, function (error, response, body) {
if (error) throw new Error(error);
console.log(body);
});
import requests
url = "https://api-uat.kushkipagos.com/subscriptions/v1/card"
payload = "{\"token\":\"V0OzRB100000xhxQB8035251pHLBQsq5\",\"amount\":{\"subtotalIva\":0,\"subtotalIva0\":14.99,\"ice\":0,\"iva\":0,\"currency\":\"USD\"},\"planName\":\"Premium\",\"periodicity\":\"monthly\",\"contactDetails\":{\"firstName\":\"Juan\",\"lastName\":\"Flores\",\"email\":\"pruebas@kushki.com\",\"phoneNumber\":\"0984775632\"},\"startDate\":\"2021-09-25\",\"metadata\":{\"contractID\":\"157AB\"}}"
headers = {'Content-Type': 'application/json',
'Private-Merchant-Id': '0c0b08cd92fc491fb37365170164f7e9' // Replace this with your Private Key
}
response = requests.request("POST", url, data=payload, headers=headers)
print(response.text)
$client = new http\Client;
$request = new http\Client\Request;
$body = new http\Message\Body;
$body->append('{"token":"V0OzRB100000xhxQB8035251pHLBQsq5","amount":{"subtotalIva":0,"subtotalIva0":14.99,"ice":0,"iva":0,"currency":"USD"},"planName": "Premium","periodicity": "monthly","contactDetails": {"firstName":"Juan","lastName":"Flores","email":"pruebas@kushki.com","phoneNumber":"0984775632"},"startDate":"2021-09-25","metadata":{"contractID":"157AB"}}');
$request->setRequestUrl('https://api-uat.kushkipagos.com/subscriptions/v1/card');
$request->setRequestMethod('POST');
$request->setBody($body);
$request->setHeaders(array(
'Private-Merchant-Id' => '0c0b08cd92fc491fb37365170164f7e9', // Replace this with your Private Key
'Content-Type' => 'application/json'
));
$client->enqueue($request)->send();
$response = $client->getResponse();
echo $response->getBody();

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

3. Test your Integration

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

  • Approved transaction: 5451951574925480
  • Transaction declined during token request (front end): 4574441215190335.

4. Prepare your Certification

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

  • Tax calculations must be correct.
  • Sensitive card data are not stored in your database (full card number, CVV, etc.).
  • Messages displayed on the 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 canceled in Kushki when your customer decides to cancel his/her recurring charges.
  • Kushki’s logo must be visible for the customer. You can find our logo in several formats here.
  • Make sure all the required data as specified in the API Reference are sent.

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

  • The cardholder’s name must be required.
  • The card number field must be required.
  • The card number field must only accept numbers.
  • The credit card field must allow a maximum of 16 digits (there may be less).
  • The CVV field must be required.
  • The CVV field must accept only numbers.
  • The CVV field must allow no more than 4 digits and no less than 3 digits.
  • The expiration date must be required.
  • The payment button must be disabled after the first click.
  • Kushki’s logo must be visible for the customer. You can find our logo in several formats here.

Manage your customers' subscriptions

Edit data or cancel automatic charges.

Accept Webhooks

Manage correctly post-payment events.