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:

Attribute

Type

Required

orgUuid

String

Yes *

customApiUrl

String

No **

* 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:

Attribute

Type

Required

customer_id 🆕

String

No **

firstName

String

Yes

lastName

String

Yes

email

String

Yes

vat_type

String

By country

vatID_number

By country (see)

By country

personalID_type

String

By country

personalID_number

By country (see)

By country

phone_areacode

String

No *

phone_number

String

No *

address_street

String

No *

address_number

String

No *

address_zipcode

String

No *

address_city

String

No *

address_province

String

No

address_floor

String

No

address_apt

String

No

birthday

String

No

description

String

No

* 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:

Attribute

Type

Required

card_id

String

No **

cardNumber

String

Yes

expirationDate

String format: mm/aa

Yes

cvcCode

Number (min 3, max 4)

Yes

cardholderName

String

Yes

documentType

By country (see)

By country

documentNumber

String

By country

** 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:

Attribute

Type

Required

type

String

No

name

String

No

lastName

String

No

email

String

No

gender

String

No

phone_areacode

String

No

phone_number

String

No

birthday

String

No

vat_type

String

No

vatID_number

String

No

personalID_type

String

No

personalID_number

String

No

address_street

String

No

address_number

String

No

address_floor

String

No

address_apt

String

No

address_city

String

No

address_zipcode

String

No

description

String

No

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:

Attribute

Type

Required

plans

[ Numbers ] *

Yes

referralCode

String

No

externalReference

String

No

gateway

String

No **

* 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:

Attribute

Type

Required

amount

String

Yes

currency_id

One of: "ARS", "MXN", "CLP", "COP", "PEN" o "UYU"

Yes

description

String

Yes

frequency

Number

Yes

frequencyType

One of: "days", "months", "years"

Yes

repetitions

String

No

free_trial_frequency

Number

No

free_trial_frequency_type

One of: "days", "months", "years"

No

externalCode

String

No

externalReference

String

No

referralCode

String

No

installments

Number

No *

gateway

String

No **

capture

Boolean

No

* 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:

Attribute

Type

Required

amount

String

Yes

currency

One of: "ARS", "MXN", "CLP", "COP", "PEN" o "UYU"

Yes

description

String

Yes

repetitions

String

No

frecuency

String

No

frecuencyType

One of: "days", "months", "years"

No

free_trial_frequency

Number

No

free_trial_frequency_type

One of: "days", "months", "years"

No

externalCode

String

No

externalReference

String

No

referralCode

String

No

installments

Number

No *

gateway

String

No **

capture

Boolean

No

* 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>

Did this answer your question?