SDK

This guide covers the integration and use of our JavaScript SDK for payment processing. The SDK complies with PCI DSS standards to ensure security.

Prerequisites

Ensure JavaScript is enabled in your environment.
Retrieve your API key and Organization ID from the dashboard.

Setup and Configuration

Add the Rebill Library: Insert the Rebill SDK script into your HTML.
<script src="https://sdk.rebill.com/v2/rebill.min.js"></script>

Initialize SDK: Configure the SDK with your credentials.

const initialization = {
  organization_id: 'YOUR_ORGANIZATION_ID',
  api_key: 'YOUR_API_KEY',
  api_url: 'https://api.rebill.com/v2'
};
const rebill_checkout = new Rebill.PhantomSDK(initialization);

Embed Rebill Elements: Securely gather payment information using Rebill Elements included in our SDK. Simply place the following HTML tag where you want the payment form to appear in your site:
<div id="rebill_elements"></div>
Next, integrate the payment fields into your web page by activating the Rebill Elements in your JavaScript code. Connect them to your initialized SDK using the following method:
rebill_checkout.setElements('rebill_elements');

Styles & customization

Customize the appearance of these elements to align with your site's design by using the setStyles method:

    rebill_checkout.setStyles({
        {
          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.

This approach ensures that sensitive payment details are handled securely, maintaining PCI compliance while integrating seamlessly with your user interface.

This section provides step-by-step instructions on using the SDK to manage customer and cardholder data, process transactions, and configure callbacks. By following these guidelines, you can integrate our payment processing capabilities into your application efficiently and securely.

Customer Data

The first step in processing a payment is to provide customer information. The SDK requires specific details to comply with payment processing standards and to personalize the customer's experience. Here’s how to set customer data:

rebill_checkout.setCustomer({
  firstName: "John",
  lastName: "Doe",
  email: 'john@doe.com',
    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"
    }
});

Cardholder Data

Next, you will need to provide information regarding the cardholder. This is a crucial step for security and verification purposes during the payment process:. Here's an example of how the fields should be filled in and which fields are supported:

{
  rebill_checkout.setCardHolder({
      name: 'John Doe',
      identification: {
          type: 'DNI',
          value: '123456789',
        },
    });
  }

Processing Transactions

A transaction requires 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	Type	Example
Prices	Array of objects	`[ { id: string, quantity: number }, { id: string, quantity: number } ]`

Here's an example of how the fields should be filled in and which fields are supported:

{
    rebill_checkout.setTransaction({
      prices: [
        { id: "PRICE_ID", 
          quantity: 1 
        }
      ]
    }).then(price_setting => console.log(price_setting));
  }

Before initiating a transaction, ensure that the necessary 'Price IDs' are created. These can be set up in your dashboard or through our API. Each 'Price ID' represents a purchasable item or service and is essential for transaction processing.

To start a transaction, use the setTransaction method with your 'Price IDs', as shown above. This method is asynchronous and returns information based on your Price ID configuration, such as whether additional customer information (like documents or phone numbers) is required. Here’s an example of what the returned data might look like:

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

If your transaction requires extra details not typically included (e.g., order IDs, special notes), incorporate these using the setMetadata method. This allows for a more tailored transaction suited to your needs.

Callbacks

Define functions to handle the results of transactions using the setCallbacks method.

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_checkout.setCallbacks({
  onSuccess: (response) => console.log("Payment Success:", response),
  onError: (error) => console.error("Payment Error:", error)
});

Practical examples

Update card

If a user needs to update their payment information, you can follow this procedure:

Include the Rebill Library: Add the Rebill SDK to your HTML's head section.

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

Place an HTML tag in the body where the payment fields should appear, with the id rebill_elements.

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

Initialize SDK for Checkout: In the script tag at the end of the body, initialize the SDK with your configuration, then set customer, cardholder, and transaction details.

<script>
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),
    });

    // Customize text fields within Rebill Elements as needed:
    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: For updating card details, especially for subscriptions, repeat the initialization with additional parameters: subscription_id and customer_token. Obtain available identification types and set cardholder information similarly.

  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),
      });

      // Customize text fields within Rebill Elements as needed:
      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. Configure maximum installments and set placeholder text for the installments dropdown in the SDK setup. 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.com/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),
    });

     // Customize text fields within Rebill Elements as needed:
    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');

SDK