Create a payment Kajita

Learn how to create and use the payment Kajitas

How to create a payment form or Kajita?

Follow the instructions below to create a payment Kajita from the console and obtain its script for it to implement on your front-end.

  1. Log in with your credentials https://console.kushkipagos.com/auth if you are going to create a Kajita for a production environment or https://uat-console.kushkipagos.com/auth, to use a test environment.
  2. Click on the Configuration option from the left side menu. Several configuration options for your business will appear.
  3. Click Kajita from the Integrations section. A window called Kajita will open. In case you have already created Kajitas, you will see the detail of these.

Integraciones Kajita

  1. Click the +Create a new form button and select the type ofform you want to create: one-time payments or subscriptions form. For this example, we select the OnePayment option. A window will open to configure your payment form.
  2. Proceed with the configuration of the fields of your payment forms:
  • Alias: Set up your Kajita’s alias. Since you will have the possibility to create more than one form, the alias will help to identify the form and search for it from the summary of Kajitas created.
  • Payment options: you will have the possibility to configure the means of payment that you want to show your customers. In case you require it, you can include a payment method selection window in your form. In the case of payment forms for subscriptions, you will have the possibility to configure the regularity of charges, the number of charges, and even add different predefined plans for your user to select the one of their preference.
  • Fields: according to the payment methods you have selected in the previous configuration, you will be able to select which fields will be requested from your clients, assign the label and the placeholder that will appear when your clients complete their data.
  • Additional settings: you can configure the default language, the currency (in case there is more than one currency available for your country) and add a Callback URL, this will be the URL to which you will return your customers once the payment process is finished on an external site, in cases where a redirection is required.
  1. Click on Save form to finish. The system will direct you to the Configurations> Kajita window. From there you can see the created form and its details.

The following video will guide you through the process of creating a payment form:

Customize your payment form (Optional)

Kushki allows you to customize your forms according to the styles of your company. You will be able to customize aspects such as form orientation, colors, themes, fields and button texts.

  1. Login with your credentials to https://console.kushkipagos.com/auth or https://uat-console.kushkipagos.com/auth, to use a test environment.
  2. Click on the Configuration option from the left side menu. Several configuration options for your business will appear.
  3. Click Kajita from the Integrations section. A window called Kajita will open. In case you have already created Kajitas, you will see the detail of these.
  4. Click on the more options button and then click Edit. A configuration window for your form will open.

Editar Kajita

  1. Click on the Style option from the top left of the screen. You can configure the following options:
  • Orientation: you can choose whether you want to display your form horizontally or vertically.
  • Theme: you can choose if you want to configure your form in night mode (Night) or day (Light). In case you have dark mode detection from your application in React, you can activate the option Automatic detection of night mode.
  • Templates: from this option you can configure the styles of the form fields, assign a primary and secondary color and a color for error messages.
  • Additional Styles: Enter the style of the payment button and the text that will appear on the button. In the case of subscriptions, you can edit it to say for example Save Card or Subscribe.
  1. Click Save Form to finish your customizations.

How to integrate a Kajita in your front end?

To integrate a Kushki Kajita in your front-end, follow the following steps:

1. Import Kajita

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. Do not include the script in a bundle or package or host a copy of it.

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

2. Add Kajita to your website

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

<form id="my-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.

3. Obtain the script of your Kajita

3.1. From the Administration Console go to Configuration>>Integrations and click on Kajita. You can see the forms (Kajitas) available in your business. 3.2. Click the View Code button. A window will open with the script that corresponds to the selected Kajita. 3.3. Copy the Kajita code as shown in the following GIF:

Copiar script de Kajita

4. Add the script of your Kajita

Finally, add the Kajita script copied in the previous step on the <body> of your website.

<script type="text/javascript">
var kushki = new KushkiCheckout({
kformId: "HmJXukKb5",
form: "my-form",
publicMerchantId: "${publicCfredentialId}",// Replace this with your public credential.
amount: {
subtotalIva: 0,
iva: 0,
subtotalIva0: 1000,
}
});
</script>