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