JS SDK Checkout

Rebill SDK

We must follow a few steps to create a successful payment, but before that we need to know some basic entities.

Customer

Here is an example of the customer data that is required for creating a successful payment.

{
    firstName: "john",
    lastName: "doe",
    email: '[email protected]',
    phone: {
      countryCode: "54",
      areaCode: "11",
      phoneNumber: "1122530654"
    },
    birthday: "13-01-1989",
    taxId: {
      type: "CUIT",
      value: "20940000019"
    },
    personalId: {
      type: "DNI",
      value: "94000001"
    },
    address: {
      street: "Riverside St.",
      number: "102",
      floor: "2",
      apt: "B",
      city: "New York City",
      state: "FL",
      zipCode: "90210",
      country: "USA",
      description: "Home / Office"
    }
  }

Card holder

These are the details of the card owner.

An example of how the fields should be filled in and which fields are supported:

{
    name: 'John Doe',
    identification: {
      type: 'DNI',
      value: '123456789',
    },
  }

Transaction

Transactions are the items you want to be paid for; currently, we support 1 type of transaction: a list of objects where each object contains two attributes, the price ID and the number of product / service units to be purchased at that price.

Name	Value	Example
Prices	Array	[ { id: string, quantity: number }, { id: string, quantity: number } ]

An example of how the fields should be filled in and which fields are supported:

{
    prices: [
       {
           id: "asf315fg-asf124dfh51-ahf13ghj451",
           quantity: 1,
       },
    ],
  }

Price IDs must pre-exist. These can be created by the dashboard or through API.
To obtain the mandatory information required by each price, the setTransaction asynchronous method returns the data required to make a successful transaction. This returned data corresponds to the price configuration that has been made either in the dashboard or by API. An answer could be:

{
  documentRequired: true,
  phoneRequired: true,
  billingAddressRequired: true,
  showImage: true,
  redirectUrl: "https://rebill.com/",
}

If they need to include any additional data such as order ID or additional information, they can use the setMetadata method to save a data object.

Callbacks

So that you have control of the result, we created a method that lets you configure a function that will be executed if the payment was successfully processed, and another one if the payment was rejected. You only need to use the setCallbacks.

Name	Values
onSuccess	function
onError	function

The functions you use will receive the response of the operation as a parameter if the operation is processed successfully (onSuccess) or the error if a failure occurs (onError).

Rebill elements

In order to securely collect confidential data, we have created a set of customizable user interface elements, which are easy to implement so that you can integrate them in your website or e-commerce. All you have to do is create an HTML tag where you want to represent the Rebill Elements, switch the ID to the setElements function, and done!

Rebill elements customization

You can customize the experience of Rebill elements using the setStyles function. This function receives an object in the following way:

{
    fieldWrapper: {
      base: css | Object,
      errored: css | Object
    },
    inputWrapper: {
      base: css | Object,
      errored: css | Object,
      focused: css | Object
    },
    input: {
      base: css | Object,
      errored: css | Object,
      cardNumber: css | Object,
      expiryDate: css | Object,
      cvc: css | Object
    },
    button: {
	    base:css | Object,
      logo: boolean,
    },
    errorText: {
      base: css | Object
    },
    installmentsSelect: css | Object
}

The property logo , inside button object, allows you to hide or to display the logo in the pay button.

Update card

In some cases it is necessary for the user to change or update the card. To do this, we have created a specific flow that forces us to pass subscription_id and customer_token when instantiating the SDK.

Depending on the payment gateway that uses the given subscription price, we can use the getIdentifications method that provides the different valid identification types that can be included in the setCardHolder method. It is easier than it seems to be.

Practical example

Add the Rebill library.

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

Add the Rebill Elements HTML tag.

<body>
    <div id="rebill_elements"></div>
 </body>

Checkout. At the end of the body of your HTML you must include the

const initialization = {
      organization_id: '' /* your organization ID */,
      api_key: '' /* your API_KEY */,
      api_url: 'https://api.rebill.com/v2' /* Rebill API target */,
    }
    const rebill_checkout = new Rebill.PhantomSDK(initialization);

    rebill_checkout.setCustomer(/* your customer data */);
    rebill_checkout.setCardHolder(/* card holder data */)
    rebill_checkout.setTransaction(/* transaction data */)
      .then(price_setting => console.log(price_setting));
    rebill_checkout.setCallbacks({
      onSuccess: (response) => console.log(response),
      onError: (error) => console.error(error),
    });

    // Use this method to configure the text in Rebill Elements, at the moment these are the properties that can be modified
    rebill_checkout.setText({
      card_number: 'Card Number',
      pay_button: 'Pay',
      error_messages: {
        emptyCardNumber: 'Enter a card number',
        invalidCardNumber: 'Card number is invalid',
        emptyExpiryDate: 'Enter an expiry date',
        monthOutOfRange: 'Expiry month must be between 01 and 12',
        yearOutOfRange: 'Expiry year cannot be in the past',
        dateOutOfRange: 'Expiry date cannot be in the past',
        invalidExpiryDate: 'Expiry date is invalid',
        emptyCVC: 'Enter a CVC',
        invalidCVC: 'CVC is invalid',
      },
      installments_select: 'Choose the amount of installments',
    });

    rebill_checkout.setElements('rebill_elements');
</script>

Renewal card. At the end of the body of your HTML you must include the

const initialization = {
      organization_id: '' /* your organization ID */,
      api_key: '' /* your API_KEY */,
      api_url: 'https://api.rebill.com/v2' /* Rebill API target */,
      subscription_id: '' /* Customer Subscription ID */,
      customer_token: '' /* Customer TOKEN */,
    }
    const rebill_checkout = new Rebill.PhantomSDK(initialization);

    rebill_checkout.getIdentifications()
      .then((identifications) => console.log(`Identification types available for the given subscription: ${JSON.stringify(identifications)}`))

    rebill_checkout.setCardHolder(/* your customer cardholder data */);

    rebill_checkout.setCallbacks({
      onSuccess: (response) => console.log(response),
      onError: (error) => console.error(error),
    });

    // Use this method to configure the text in Rebill Elements, at the moment these are the properties that can be modified
    rebill_checkout.setText({
      card_number: 'Card Number',
      pay_button: 'Pay',
      error_messages: {
        emptyCardNumber: 'Enter a card numbero',
        invalidCardNumber: 'Card number is invalid',
        emptyExpiryDate: 'Enter an expiry date',
        monthOutOfRange: 'Expiry month must be between 01 and 12',
        yearOutOfRange: 'Expiry year cannot be in the past',
        dateOutOfRange: 'Expiry date cannot be in the past',
        invalidExpiryDate: 'Expiry date is invalid',
        emptyCVC: 'Enter a CVC',
        invalidCVC: 'CVC is invalid',
      },
      installments_select: 'Choose the amount of installments',

    });

    rebill_checkout.setElements('rebill_elements');

Installments. In order to limit the maximum quantity of installments that will be offered to your customer, it's simple enough as include in the initialization object the key max_allowed_installments with the number of the maximum quantity of allowed installments to choose by your customers.
1. Also, you're able to customize the text to be displayed as placeholder of the installments dropdown. To do that, just pass the property installments_select as part of the parameter object in the setText method with the new placeholder value.

const initialization = {
      organization_id: '' /* your organization ID */,
      api_key: '' /* your API_KEY */,
      api_url: 'https://api.rebill.to/v2' /* Rebill API target */,
      max_allowed_installments: 12, /* The maximum quantity allowed of installments */
    }
    const rebill_checkout = new Rebill.PhantomSDK(initialization);

    rebill_checkout.getIdentifications()
      .then((identifications) => console.log(`Identification types available for the given subscription: ${JSON.stringify(identifications)}`))

    rebill_checkout.setCardHolder(/* your customer cardholder data */);

    rebill_checkout.setCallbacks({
      onSuccess: (response) => console.log(response),
      onError: (error) => console.error(error),
    });

    // Use this method to configure the text in Rebill Elements, at the moment these are the properties that can be modified
    rebill_checkout.setText({
      card_number: 'Card Number',
      pay_button: 'Pay',
      error_messages: {
        emptyCardNumber: 'Enter a card numberoo',
        invalidCardNumber: 'Card number is invalid',
        emptyExpiryDate: 'Enter an expiry date',
        monthOutOfRange: 'Expiry month must be between 01 and 12',
        yearOutOfRange: 'Expiry year cannot be in the past',
        dateOutOfRange: 'Expiry date cannot be in the past',
        invalidExpiryDate: 'Expiry date is invalid',
        emptyCVC: 'Enter a CVC',
        invalidCVC: 'CVC is invalid',
      },
      installments_select: 'Choose the amount of installments',

    });

    rebill_checkout.setElements('rebill_elements');