How to use the Checkout express or SDK?

Required: IE11, Chrome, Firefox.

How is it used?

1. You must first include the library

To install the frontend SDK you have to include rebill.min.js in the HTML of your application. You can achieve this by adding the following script inside the head tag.

<script src="https://sdk.rebill.to/rebill.min.js"></script>

2. Create an instance of the Rebill class

You must create an instance of the Rebill class to continue.

const rebill = new Rebill(object);

This class receives in its constructor an object that can contain the following attributes:

* You will find the UUID parameter in the configuration of your organization in your dashboard. If you can't find it, contact us.

** By default it is https://api.rebill.to/v1/.

3. Configure instance

3.a. Add a customer

This setting is mandatory. To add use:

rebill.setCustomer(object);

The object that is passed by parameter can contain the following attributes:

* It is recommended to add these attributes since doing so improves the approval rate.

** If your customer already exists you can enter the customer_id and you will not need to fill in any additional fields (even the required ones).

3.b. Add card 🆕

This setting is optional and does not replace the popup form at the moment. To add it use:

rebill.setCard(arrayOfObjects);

The parameter corresponding to this configuration is an array of objects, and in turn, each object can contain the following attributes:

** If your client already exists and their corresponding cards are registered, you can enter the card_id and you will not need to complete any additional fields (even the mandatory ones).

3.c. Add recipient

This configuration is optional. To add it use:

rebill.setRecipients(arrayOfObjects);

The parameter corresponding to this configuration is an array of objects, and in turn, each object can contain the following attributes:

3.d. Add items

This configuration is optional. To add it use:

rebill.setItems(arrayOfObjects);

The array of objects to be saved together with the subscription does not have a defined structure, so each object can contain the format you need.

3.e. Add redirect to success page

This configuration is optional. This method will allow you to add a url callback that will redirect the client to the web page defined in the parameter when the process completes successfully. Note that in addition to returning to the link you want, it will add a subscription_id parameter with the value of the id generated by the operation.

rebill.setCallbackUrl('www.yourwebsite.com');

3.f. Add a function to execute in case the operation was successful

This setting is optional, and only applies to subscription payments flows or requests payment. This method will allow you to add a function to execute in case the operation has been successfully processed.

rebill.onProcessSuccess(myFunction); 

You must bear in mind that myFunction is the reference to the function that will be executed when the payment has been successfully completed. You must take into account that your function can receive the response of the request made to carry out the payment as a parameter. An example of use could be:

const myFunction = (response) => {
  console.log(response);
};
rebill.onProcessSuccess(myFunction); 

3.g. Add a function to execute in case the operation was rejected

This setting is optional, and only applies to subscription payments flows or requests payment. This method will allow you to add a function to execute in case the operation has been rejected for some reason.

rebill.onProcessFailed(myFunction); 

You must bear in mind that myFunction is the reference to the function that will be executed when the payment process has been rejected for some reason. You must bear in mind that your function can receive the response of the request made by parameter. An example of use could be:

const myFunction = (response) => {
  console.log(response);
};
rebill.onProcessFailed(myFunction); 

4. Define an operation

After an instance is created and configured, an operation must be added. It can be a payment to a previously created plan, a one-time payment, a one-time recurring subscription, or a card upgrade.

4.a. Define the payment flow of a plan

This functionality will allow you to create a modal with the objective of requesting the payment of a plan (or a set of plans) to associate your client with a subscription.

rebill.setSubscriptionFlow(object);

The object assigned by parameter to the setSubscriptionFlow method can contain:

* The list of numbers should contain the ID of the plan (s) you want to request to pay. Only one plan is supported at the moment, therefore the list should only contain one ID.

** By default it is mercadopago_ar.

4.b. Define the flow of a subscription on the fly payment 🆕

This functionality will allow you to create a Modal in order to request a single payment.

rebill.setSubscriptionOnTheFlyFlow(object);

The object assigned by parameter to the setOneTimePaymentFlow method can contain:

* By default it is 1.
** By default it is mercadopago_ar.

4.c. Define the flow of a single payment

This functionality will allow you to create a modal in order to request a single payment.

rebill.setOneTimePaymentFlow(object);

The object assigned by parameter to the setOneTimePaymentFlow method can contain:

* By default it is 1.
** By default it is mercadopago_ar.

5. Open the popup

5.a. Open popup by method

To open the popup you can use the openPopup method of the instantiated rebill object.

rebill.openPopup();

5.b. Add button to open the popup

Also, in case you don't want to define a programmatic moment to open the popup, you can create a button in your code and use the setButton method of the instantiated rebill object to add the action of opening the popup.

const yourButton = document.getElementById("theIdOfYourButton"); rebill.setButton(yourButton);

5.c. Iniciar transacción 🆕

We can not require the popup and directly initiate a transaction. The required settings are:

• setCustomer

• SetCard

• setOneTimePaymentFlow, setSubscriptionFlow or setSubscriptionOnTheFlyFlow

Once the above requirements are configured, the transaction is executed with the following method:

rebill.submitTransaction();

Examples of use

Subscribing to a plan

<html>
  <head>
    <title>Subscription payment example</title>
    <script src="https://sdk.rebill.to/rebill.min.js"></script>
  </head>
  <body>
    <button id="theButton">Open</button>
    <script>
      const rebill = new Rebill({
        orgUuid: "123404f-7b8f-4430-a853-faf3adc1234",
        customApiUrl: "https://api.rebill.to/v1/",
      });
      rebill.setCustomer({
        firstName: "Nahuel",
        lastName: "Candia",
        email: "email@test.com",
        vat_type: "DNI",
        vatID_number: "123123123",
        personalID_type: "DNI",
        personalID_number: "123123123",
      });
      rebill.setSubscriptionFlow({
        plans: [200],
      });
      const myButton = document.getElementById("theButton");
      rebill.setButton(myButton);
      rebill.openPopup();
    </script>
  </body>
</html>

Direct transaction of a subscription without plan and with actions of success or failure

<html lang="en">
<head>
<title>Subscription on the fly with transaction process example</title>
<script src="https://sdk.rebill.to/rebill.min.js"></script>
</head>
<body>
<script>
const rebill = new Rebill({
orgUuid: "123asd-123asd-123asd-123asd-123asd",
});
rebill.setCustomer({
firstName: "Nahuel",
lastName: "Candia",
email: "email@test.com",
vat_type: "DNI",
vatID_number: "123123123",
personalID_type: "DNI",
personalID_number: "123123123",
});
rebill.setCard({
cardNumber: "4509 9535 6623 3704",
expirationDate: "11/25",
cvcCode: "123",
cardholderName: "APRO",
documentType: "DNI",
documentNumber: "123123123",
});
rebill.onProcessSuccess((subscriptionResult) => {
console.log("success: ", subscriptionResult)
});
rebill.onProcessFailed((error) => {
console.log("failed: ", error)
});
rebill.setSubscriptionOnTheFlyFlow({
description: "subscrition on the fly service",
amount: 5,
currency_id: "ARS",
frequency: 12,
frequency_type: "days",
});
rebill.submitTransaction();
</script>
</body>
</html>

Single payment

<html>
  <head>
    <title>One time payment example</title>
    <script src="https://sdk.rebill.to/rebill.min.js"></script>
  </head>
  <body>
    <button id="theButton">Open</button>
    <script>
      const rebill = new Rebill({
        orgUuid: "123404f-7b8f-4430-a853-faf3adc1234",
        customApiUrl: "https://api.rebill.to/v1/",
      });
      rebill.setCustomer({
        firstName: "Nahuel",
        lastName: "Candia",
        email: "email@test.com",
        vat_type: "DNI",
        vatID_number: "123123123",
        personalID_type: "DNI",
        personalID_number: "123123123",
      });
      rebill.setOneTimePaymentFlow({
        description: "One time payment",
        amount: 5,
        currency: "ARS",
      });
      const myButton = document.getElementById("theButton");
      rebill.setButton(myButton);
    </script>
  </body>
</html>