Frontend Capabilities

# Payment Method Helpers

Payment method helpers using card, bank, and wallets help to initiate the payment process. Upon initiation, the user is redirected to authorize the payment.

Pass the required information to paymentInfo parameter based on the payment method helper.

Below are the different supported payment method helpers by Chargebee js.

# Card payments

# 3DS Handler

Use the below functions to explore more on the 3DS handler operations.

The 3DS handler object created using create3DSHandler method can be used to call these methods.

# setPaymentIntent

Use this function to set paymentIntent that was created at your server side. The paymentIntent will contain information about the payment gateway and the amount that needs to be charged. In case you are using the respective gateway's JS library along with this module, pass the gateway JS instance in this method. This gateway JS instance will internally be used for handling 3DS flow.

# Syntax
threeDSHandler.setPaymentIntent(paymentIntent, options);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
options
Object Hide properties
stripe
Object
Stripe.js instance. Learn more about creating an instance of the Stripe object.
braintree
Object
Braintree.js client instance
adyen
Object
Adyen.js checkout instance
# Return value

NA

# Example
cbInstance.load3DSHandler().then(threeDSHandler => {
  // Set the paymentIntent
  threeDSHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5

# updatePaymentIntent

Whenever the amount that needs to charged changes with user interaction (discount coupon applied, tax), you can do an Ajax call to your server to update the payment intent using this API (opens new window). This updated paymentIntent should then be passed to this function.

# Syntax
threeDSHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var threeDSHandler;
cbInstance.load3DSHandler().then(threeDSPaymentHandler => {
  threeDSHandler = threeDSPaymentHandler;
  // Set the paymentIntent
  threeDSHandler.setPaymentIntent(paymentIntent)
  ...
});

function updatePaymentIntent() {
  // make Ajax call to your server
  // to update the payment intent using Chargebee's update Payment intent API
  return updateIntentApi().then(updatedIntent => {
    // return the updated payment intent, to update the payment handler
  });
}

function onApplyCoupon() {
  // on change in estimate amount
  updatePaymentIntent().then(paymentIntent => {
    // Set payment intent to 3DS handler
    threeDSHandler.updatePaymentIntent(paymentIntent)
  })
}

function onSubmit() {
  return threeDSHandler.handleCardPayment();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# getPaymentIntent

Returns the payment intent object that is currently set in the 3DS handler instance.

# Syntax
threeDSHandler.getPaymentIntent();
1
# Return value

paymentIntent object.

# handleCardPayment

TIP

A paymentIntent needs to be created and setup before using this method. Learn more.

Call this function to initiate 3DS flow for the entered card details. After a successful 3DS authorization, paymentIntent will be marked as authorized.

If the transaction is from INR to any other currency, for example, USD payment made using an INR card, it is mandatory to pass the below values:

  • plan: Name/Desciption of the product.
  • customerBillingAddress: Customer billing address.
  • shippingAddress: Shipping address.
# Syntax
threeDSHandler.handleCardPayment(paymentInfo, callbacks);
1
# Parameters
paymentInfo
Object View properties
Card details collected or payment tokens can be passed here. Additionally, billing details can also be passed.
callbacks
Object View properties
Callbacks to be used for this operation.
# Return value

Authorized paymentIntent object.

# Example

var threeDSHandler;
cbInstance.load3DSHandler().then(threeDSPaymentHandler => {
  threeDSHandler = threeDSPaymentHandler;
  // Set the paymentIntent
  threeDSHandler.setPaymentIntent(paymentIntent)
  ...
});

function onSubmit() {
  return threeDSHandler.handleCardPayment().then(authorizedPaymentIntent => {
    // Make Ajax call to your server.
    // To use the authorized payment intent to create a subscriptions.
    return createSubscriptionApi(authorizedPaymentIntent.id)
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# cancel

Call this function to cancel an ongoing 3DS flow. The transaction is cancelled with the gateway, and the payment attempt is refused with authentication failed status.

An error is thrown if no payment intent is set, or if there is no ongoing 3DS transaction.

This cancel action is primarily used along with challenge callback implementation, where the 3DS redirection URL is provided.

This function has to be called, after the handleCardPayment method is called, while there is an ongoing 3DS transaction. This method does not cancel an authorized payment intent.

# Return value

Promise

# Syntax

threeDSHandler.cancel();
1

# Example

let threeDSHandler = cbInstance.create3DSHandler();
threeDSHandler
  .handleCardPayment(
    {
      card: {
        firstName: "First Name",
        lastName: "Last Name",
        number: "xxxx xxxx xxxx xxxx",
        cvv: "",
        expiryMonth: "10",
        expiryYear: "2019",
      },
    },
    {
      challenge: (redirect_url: string) => {
        // Open this redirect URL in a popup window
      },
    }
  )
  .then((intent) => {
    console.log("success");
  })
  .catch((error) => {
    console.error(error);
  });

function onCloseWindow() {
  threeDSHandler.cancel();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Bancontact Payment Handler

Use the below API reference to explore more on the capabilities of Bancontact payment handler.

The handler object created using load method can be used to call these methods.

# getPaymentIntent

Retrieves the paymentIntent attached to the payment method helper object.

# Syntax
bancontactHandler.getPaymentIntent();
1
# Return value

Payment Intent object.

# setPaymentIntent

Attaches the paymentIntent to the payment method helper object. paymentIntent contains information about the gateway and the payment.

# Syntax
bancontactHandler.setPaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var bancontactHandler;
cbInstance.load('bancontact').then(_bancontactHandler => {
  bancontactHandler = _bancontactHandler;
  // Set the paymentIntent
  bancontactHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5
6
7

# updatePaymentIntent

Updates the payment intent attached to the payment method helper object. Call this function after making any changes to paymentIntent.

# Syntax
bancontactHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var bancontactHandler;
cbInstance.load('bancontact').then(_bancontactHandler => {
  bancontactHandler = _bancontactHandler;
  // Set the paymentIntent
  bancontactHandler.setPaymentIntent(paymentIntent)
  ...
});


function onApplyCoupon() {
  // Make an Ajax call to your server to update the payment intent value to new amount
  updatePaymentIntentApi().then(updatedPaymentIntent => {
    // Set the updated payment intent in
    bancontactHandler.updatePaymentIntent(updatedPaymentIntent)
    ...
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create subscriptions or payment methods.

# Syntax
bancontactHandler.handlePayment(paymentInfo, callbacks);
1
# Parameters
paymentInfo
Object View properties
Transaction-related information can be passed here.
callbacks
Object View properties
Callback that can be passed during the payment process.
# Return value

A promise that resolves to a payment intent object after successful payment authorization.

# Example

For Adyen Card Components

cbInstance.handlePayment(
  {
    element: cardElement,
  },
  {
    success: function (d) {
      console.log("success", d);
    },
    error: function (d) {
      console.log("error", d);
    },
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13

For passing raw card details

cbInstance.handlePayment(
  {
    card: {
      number: "6703 4444 4444 4449",
      expiryMonth: "10",
      expiryYear: "2020",
    },
  },
  {
    success: function (d) {
      console.log("success", d);
    },
    error: function (d) {
      console.log("error", d);
    },
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Wallet-based payments

# Paypal Payment Handler

Use the below functions to explore more on the PayPal payment integration.

The paypal payment handler object can be created by loading the payment method using Chargebee instance.

# getPaymentIntent

Retrieves the paymentIntent attached to the Payment Method Helper object.

# Syntax
payPalHandler.getPaymentIntent();
1
# Return value

paymentIntent object.

# Example
let paypalHandler
cbInstance.load('paypal').then(_paypalHandler => {
  paypalHandler = _paypalHandler;
  // Set the paymentIntent
  paypalHandler.setPaymentIntent(paymentIntent)
  ...
});

function onClick() {
  paypalHandler.getPaymentIntent()
}
1
2
3
4
5
6
7
8
9
10
11

# setPaymentIntent

Use this method to set payment intent for payment processing.

# Syntax
paypalHandler.setPaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Example
let paypalHandler
cbInstance.load('paypal').then(_paypalHandler => {
  paypalHandler = _paypalHandler;
  // Set the paymentIntent
  paypalHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5
6
7

# updatePaymentIntent

Use this method to update the payment intent.

# Syntax
paypalHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
let paypalHandler
cbInstance.load('paypal').then(_paypalHandler => {
  paypalHandler = _paypalHandler;
  // Set the paymentIntent
  paypalHandler.setPaymentIntent(paymentIntent)
  ...
});

function onUpdateCart() {
  // Make Ajax call to your server to update the payment intent
  updatePaymentIntent().then(paymentIntent => {
    // Set the updated payment intent
    paypalHandler.updatePaymentIntent(paymentIntent)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# mountPaymentButton

Use this function to mount the PayPal payment button on the webpage.

# Syntax
paypalHandler.mountPaymentButton(selector, options);
1
# Parameters
selector
String Required
A valid CSS Selector for the element where the payment button should be mounted.
options
Object View properties
Options for PayPal button.
# Return value

Promise that resolves after successfully mounting the PayPal button.

# Example
let paypalHandler;
cbInstance.load("paypal").then((_paypalHandler) => {
  paypalHandler = _paypalHandler;
  // Set the paymentIntent
  paypalHandler.setPaymentIntent(paymentIntent);

  // Mount the button to DOM
  return paypalHandler.mountPaymentButton("#button-holder");
});
1
2
3
4
5
6
7
8
9

# handlePayment

Use this method to wait for payment processing to complete the transaction.

# Syntax
paypalHandler.handlePayment(callbacks);
1
# Parameters
callbacks
Object View properties
Callback that can be passed during the payment process.
# Return value

A promise that resolves to a payment intent object after successful payment authorization.

# Example
let paypalHandler;
cbInstance
  .load("paypal")
  .then((_paypalHandler) => {
    paypalHandler = _paypalHandler;
    // Set the paymentIntent
    paypalHandler.setPaymentIntent(paymentIntent);

    // Mount the button to DOM
    return paypalHandler.mountPaymentButton("#button-holder");
  })
  // Wait for payment authorization to complete
  .then(() => paypalHandler.handlePayment())
  .then((authorizedPaymentIntent) => {
    // Use this authorized payment intent to create a subscription
    createSubscription(authorizedPaymentIntent);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Google Pay payment Handler

# getPaymentIntent

Use this method to get the details of the payment intent thats set in Google Pay payment handler.

# Syntax
googlePayHandler.getPaymentIntent();
1
# Return value

Payment Intent object

# setPaymentIntent

Use this method to set the payment intent for payment processing.

# Syntax
googlePayHandler.setPaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
cbInstance.load('google-pay').then(googlePayHandler => {
  googlePayHandler.setPaymentIntent(paymentIntent);
  ...
})
1
2
3
4

# updatePaymentIntent

Use this method to update the payment intent.

# Syntax
googlePayHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
let googlePayHandler;
cbInstance.load('google-pay').then(_googlePayHandler => {
  googlePayHandler = _googlePayHandler;
  // Set the paymentIntent
  googlePayHandler.setPaymentIntent(paymentIntent)
  ...
});

function onUpdateCart() {
  // Make Ajax call to your server to update the payment intent
  updatePaymentIntent().then(paymentIntent => {
    // Set the updated payment intent
    googlePayHandler.updatePaymentIntent(paymentIntent)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# mountPaymentButton

Use this function to mount the Google Pay button in your webpage.

# Syntax
googlePayHandler.mountPaymentButton(selector, buttonOptions, paymentOptions);
1
# Parameters
selector
String Required
A valid CSS Selector for the element where the payment button should be mounted.
buttonOptions
Object Hide properties
Button options available for customizing Google Pay button. Learn more about supported button options for Google Pay.
buttonColor
String
Color of the Google Pay button.
Allowed Values:
default
black
white
buttonType
String
Type of the Google Pay button.
Allowed Values:
long
short
book
buy
checkout
donate
order
pay
plain
subscribe
buttonSizeMode
String
Button size options.
Allowed Values:
static
fill
buttonLocale
String
Locale options for the Google Pay Button.
paymentOptions
Object Hide properties
Config for Google Pay.
requestPayerEmail
Boolean
Set this flag to true, to return payer email after payment authorization.
requestBillingAddress
Boolean
Set this flag to true, to return billing address after payment authorization.
requestShippingAddress
Boolean
Set this flag to true, to return shipping address after payment authorization.
# Return value

Promise that resolves after successfully mounting the payment button.

# Example
cbInstance.load("google-pay").then((googlePayHandler) => {
  // Set the paymentIntent
  googlePayHandler.setPaymentIntent(paymentIntent);
  return googlePayHandler.mountPaymentButton("#button-holder");
});
1
2
3
4
5

# handlePayment

Use this method to wait for payment authorization to complete.

# Syntax
googlePayHandler.handlePayment(callbacks);
1
# Parameters
callbacks
Object Hide properties
Callback that can be passed during the payment process.
error
Function
Triggers when there is an error during the transaction.
success
Function
Triggers when transaction is successfully completed.
change
Function
Triggers when there is a change in the transaction state.
# Return value

A promise that resolves to a payment intent object after successful payment authorization.

# Example
let googlePayHandler;
cbInstance
  .load("google-pay")
  .then((_googlePayHandler) => {
    googlePayHandler = _googlePayHandler;
    // Set the paymentIntent
    googlePayHandler.setPaymentIntent(paymentIntent);
    return googlePayHandler.mountPaymentButton("#button-holder");
  })
  .then(() => googlePayHandler.handlePayment())
  .then((paymentIntent) => {
    // Use payment intent for creating a subscription
  });
1
2
3
4
5
6
7
8
9
10
11
12
13

# Apple Pay Payment Handler

# canMakePayments

Use this method to check whether the device supports Apple Pay payment method.

# Syntax
applePayHandler.canMakePayments();
1
# Return value

Boolean

# Example
const isApplePayAvailable = applePayHandler.canMakePayments();
1

# mountPaymentButton

Use this function to mount the Apple Pay button to the webpage.

# Syntax
applePayHandler.mountPaymentButton(selector, options);
1
# Parameters
selector
String Required
A valid CSS Selector for the element where the payment button should be mounted.
options
Other options and button customizations.
# Return value

A promise that resolves after successfully mounting the payment button.

# Example
applePayHandler.mountPaymentButton("#applepay-button", {
  locale: "en_US",
  buttonColor: "black",
  buttonType: "plain",
});
1
2
3
4
5

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create subscriptions or payment methods.

# Syntax
applePayHandler.handlePayment(callbacks);
1
# Parameters
callbacks
Object View properties
Callbacks that can be passed during the payment process.
# Return value

A promise that resolves to a payment intent object after successful payment authorization.

# Example
applePayHandler
  .handlePayment()
  .then((paymentIntent) => {
    console.log("success", paymentIntent);
    // Use the authorized payment intent to create a subscription
  })
  .catch((err) => {
    console.log("error", err);
  });
1
2
3
4
5
6
7
8
9

# Venmo Handler

Use the below functions to explore more Venmo payment integration.

The Venmo payment handler object can be created by loading the payment method using the Chargebee instance.

# getPaymentIntent

Retrieves the paymentIntent attached to the Payment Method Helper object.

# Syntax
venmoHandler.getPaymentIntent();
1
# Return value

paymentIntent object.

# Example
let venmoHandler
cbInstance.load('venmo').then(_venmoHandler => {
    venmoHandler = _venmoHandler;
    // Set the paymentIntent
    venmoHandler.setPaymentIntent(paymentIntent)
        ...
});

function onClick() {
    venmoHandler.getPaymentIntent()
}
1
2
3
4
5
6
7
8
9
10
11

# setPaymentIntent

Use this method to set payment intent for payment processing.

# Syntax
venmoHandler.setPaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Example
let venmoHandler
cbInstance.load('venmo').then(_venmoHandler => {
    venmoHandler = _venmoHandler;
    // Set the paymentIntent
    venmoHandler.setPaymentIntent(paymentIntent)
        ...
});
1
2
3
4
5
6
7
8

# updatePaymentIntent

Use this method to update the payment intent.

# Syntax
venmoHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
let venmoHandler
cbInstance.load('venmo').then(_venmoHandler => {
        venmoHandler = _venmoHandler;
        // Set the paymentIntent
        venmoHandler.setPaymentIntent(paymentIntent)
                ...
});

function onUpdateCart() {
        // Make Ajax call to your server to update the payment intent
        updatePaymentIntent().then(paymentIntent => {
                // Set the updated payment intent
                venmoHandler.updatePaymentIntent(paymentIntent)
        })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# mountPaymentButton

Use this function to mount the Venmo payment button on the webpage.

# Syntax
venmoHandler.mountPaymentButton(selector);
1
# Parameters
selector
String Required
A valid CSS Selector for the element where the payment button should be mounted.
# Return value

Promise that resolves after successfully mounting the PayPal button.

# Example
let venmoHandler;
cbInstance.load("venmo").then((_venmoHandler) => {
  venmoHandler = _venmoHandler;
  // Set the paymentIntent
  venmoHandler.setPaymentIntent(paymentIntent);

  // Mount the button to DOM
  return venmoHandler.mountPaymentButton("#button-holder");
});
1
2
3
4
5
6
7
8
9

# handlePayment

Use this method to wait for payment processing to complete the transaction.

# Syntax
venmoHandler.handlePayment(callbacks);
1
# Parameters
callbacks
Object View properties
Callback that can be passed during the payment process.
# Return value

A promise that resolves to a payment intent object after successful payment authorization.

# Example
let venmoHandler;
cbInstance
  .load("venmo")
  .then((_venmoHandler) => {
    venmoHandler = _venmoHandler;
    // Set the paymentIntent
    venmoHandler.setPaymentIntent(paymentIntent);

    // Mount the button to DOM
    return venmoHandler.mountPaymentButton("#button-holder");
  })
  // Wait for payment authorization to complete
  .then(() => venmoHandler.handlePayment())
  .then((authorizedPaymentIntent) => {
    // Use this authorized payment intent to create a subscription
    createSubscription(authorizedPaymentIntent);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Bank-based payments

# Initiating bank payment

All bank-based payment method transactions are initiated using the method cbInstance.handlePayment.

Note:

This workflow is common for all Chargebee.js supported bank payment methods.

Supported payment methods:

  • iDEAL
  • SOFORT
  • Giropay
  • dotpay
  • Netbanking e-Mandate
  • Direct debit

# handlePayment

Initiates the payment process. This method should be invoked from Chargebee instance object. Upon initiation, user maybe redirected to the bank’s webpage for authorizing the payment.

# Syntax
cbInstance.handlePayment(paymentMethodType, paymentOptions);
1
# Parameter
paymentMethodType
Enum Required
Name of the payment method type.
Allowed Values:
ideal
sofort
bancontact
giropay
dotpay
netbanking_emandates
direct_debit
paymentOptions
Object View properties
Options for the payment method type.
# Return value

A promise that resolves to an authorized payment intent object.

# iDEAL Payment handler

# mountBankList

Attaches a dropdown element to the webpage that displays the list of banks supported by the gateway.

Note: For iDEAL payments, Adyen Web Components can be used as an alternative for mountBankList. Once bank is selected in the Adyen component, pass the information to paymentInfo parameter in handlePayment function.
# Syntax
<label class="ex2-field">
  <span id="dropdown-element" class="ex2-input"></span>
</label>
1
2
3
idealPaymentHandler.mountBankList(selector, options);
1
# Parameters
selector
String Required
A valid CSS Selector for the element where the payment button should be mounted.
options
Object Hide properties
Configuration options
locale
String
currency
String
Currency code
gateway_account_id
String
Chargebee gateway account ID
style
Object
Style customizations for bank drop-down component
# Return value

A promise that resolves after successfully mounting the bank list.

# Example
cbInstance.load("ideal").then((idealHandler) => {
  // Mount bank list
  return idealHandler.mountBankList("#drop-down-container", {
    currency: currency_code,
  });
});
1
2
3
4
5
6

# getSelectedBank

Retrieves the details of the bank selected by the user from the dropdown element.

# Syntax
idealHandler.getSelectedBank();
1
# Return value

Returns an object containing the details of the selected bank.

{
  id: 'bank-id',
  name: 'Name of the bank'
}
1
2
3
4

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create subscriptions or payment methods.

Learn more.

# Example
cbInstance.handlePayment("ideal", {
  paymentIntent: () => {
    // make Ajax call to server to create a payment intent
    return createPaymentIntent();
  },
  paymentInfo: {
    userName: "John Doe",
    userEmail: "johndoe@example.com",
  },
});
1
2
3
4
5
6
7
8
9
10

# SOFORT Payment Handler

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create subscriptions or payment methods.

Learn more.

# Example
cbInstance.handlePayment("sofort", {
  paymentIntent: () => {
    // make Ajax call to server to create a payment intent
    return createPaymentIntent();
  },
  paymentInfo: {
    userName: "John Doe",
    userEmail: "johndoe@example.com",
    country: "US", // Country code
  },
});
1
2
3
4
5
6
7
8
9
10
11

# Giropay Payment Handler

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create subscriptions or payment methods.

Learn more.

# Example
cbInstance.handlePayment("giropay", {
  paymentIntent: () => {
    // make Ajax call to server to create a payment intent
    return createPaymentIntent();
  },
});
1
2
3
4
5
6

# DotPay Payment Handler

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create invoices.

Learn more.

# Example
cbInstance.handlePayment("dotpay", {
  paymentIntent: () => {
    // make Ajax call to server to create a payment intent
    return createPaymentIntent();
  },
});
1
2
3
4
5
6

# mountBankList

Attaches the list of banks supported by the gateway, to a dropdown element on the page. Pass the ID of the dropdown element to attach the bank list.

# Syntax
dotpayHandler.mountBankList(selector, options);
1
# Parameters
selector
String Required
A valid CSS Selector for the element where the payment button should be mounted.
options
Object Hide properties
Configuration options
locale
String
currency
String
Currency code
gateway_account_id
String
Chargebee gateway account ID
style
Object
Style customizations for bank drop-down component
# Return value

A promise that resolves after successfully mounting the bank list to the DOM.

# Example
dotpayHandler.mountBankList("#dotpay", {
  currency: "USD",
  locale: "en_US",
  style: {
    base: {
      backgroundColor: "#fff",
      ":hover": {
        backgroundColor: "#f4f5f9",
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12

# getSelectedBank

Retrieves the details of the bank selected by the user from the dropdown element.

# Syntax
dotpayHandler.getSelectedBank();
1
# Parameters
id
ID of the selected bank
name
Name of the selected bank. This will be optionally returned based on the gateway selected.
# Return value

Returns an object containing the details of the selected bank

{
  id: 'bank-id',
  name: 'Name of the bank'
}
1
2
3
4

# Netbanking Payment Handler

# setPaymentIntent

Use this function to set paymentIntent that was created at your server side. The paymentIntent will contain information about the payment gateway and the amount that needs to be charged.

# Syntax
netBankingHandler.setPaymentIntent(paymentIntent, options);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
cbInstance.load('netbanking_emandates').then(netBankingHandler => {
  // Set the paymentIntent
  netBankingHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5

# updatePaymentIntent

Whenever the amount that needs to charged changes with user interaction (discount coupon applied, tax), you can do an Ajax call to your server to update the payment intent using this API (opens new window). This updated paymentIntent should then be passed to this function.

# Syntax
netBankingHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var netBankingHandler;
cbInstance.load('netbanking_emandates').then(netBankingPaymentHandler => {
  netBankingHandler = netBankingPaymentHandler;
  // Set the paymentIntent
  netBankingHandler.setPaymentIntent(paymentIntent)
  ...
});

function onCartUpdate() {
  // make ajax call to your server
  // to update the payment intent with revised amount
  // using chargebee's update Payment intent API
  updateIntentApi().then(paymentIntent => {
    // Set the updated payment intent to the payment handler
    netBankingHandler.updatePaymentIntent(paymentIntent)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# getPaymentIntent

Returns the payment intent object that is currently set in the netbanking handler instance.

# Syntax
netBankingHandler.getPaymentIntent();
1
# Return value

paymentIntent object.

# fetchBankList

Use this method to fetch the list of banks to supported by the payment gateway for NetBanking

# Syntax
netBankingHandler.fetchBankList(options);
1
# Parameters
options
Object Hide properties
currency
String Required
Currency code of the payment currency. If not provided, currency code from Payment Intent will be used.
# Return value

Returns a promise that resolves to an array of bank objects. Each record contains the id and name of the respective banks.

[
  {
    id: "bank_id",
    name: "Name of the bank",
  },
];
1
2
3
4
5
6
# Example
var netBankingHandler;
cbInstance
  .load("netbanking_emandates")
  .then((netBankingPaymentHandler) => {
    netBankingHandler = netBankingPaymentHandler;
    // Set the paymentIntent
    netBankingHandler.setPaymentIntent(paymentIntent);

    const options = {
      currency: paymentIntent.currency_code || "INR",
    };
    return netBankingHandler.fetchBankList(options);
  })
  .then((bankList) => {
    // returns list of supported banks
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create invoices.

Learn more.

# Example
cbInstance
  .load("netbanking_emandates")
  .then((netBankingHandler) => {
    netBankingHandler.setPaymentIntent(intent);
    return netBankingHandler.fetchBankList({
      currency: paymentIntent.currency_code || "INR",
    });
  })
  .then((bankList) => {
    // To display list of supported banks for NetBanking
  });

function onSubmit() {
  // Collect the below required parameters from user before initiating payment.
  const paymentInfo = {
    customer: {
      firstName: "John",
      lastName: "Doe",
      email: "johndoe@example.com",
      phone: "+1XXXXXXXXXX",
    },
    bankAccount: {
      bank: "Bank Name",
      beneficiaryName: "Acme Pvt Ltd.",
      accountNumber: "XXXXXXXXXXXX",
      accountType: "current",
      ifscCode: "XXXXXXXX",
    },
  };
  return cbInstance.handlePayment("netbanking_emandates", {
    paymentInfo: paymentInfo,
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# UPI Payment Handler

# setPaymentIntent

Use this function to set paymentIntent that was created at your server side. The paymentIntent will contain information about the payment gateway and the amount that needs to be charged.

# Syntax
upiHandler.setPaymentIntent(paymentIntent, options);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
cbInstance.load('upi').then(upiHandler => {
  // Set the payment intent
  upiHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5

# updatePaymentIntent

Whenever the amount that needs to charged changes with user interaction (discount coupon applied, tax), you can do an ajax call to your server to update the payment intent using this API (opens new window). Then, this method can be used to set the updated paymentIntent to the UPI payment handler.

# Syntax
upiHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var upiHandler;
cbInstance.load('upi').then(upiPaymentHandler => {
  upiHandler = upiPaymentHandler;
  // Set the paymentIntent
  upiHandler.setPaymentIntent(paymentIntent)
  ...
});

function onCartUpdate() {
  // make ajax call to your server
  // to update the payment intent with revised amount
  // using chargebee's update Payment intent API
  updateIntentApi().then(paymentIntent => {
    // Set the updated payment intent to the payment handler
    upiHandler.updatePaymentIntent(paymentIntent)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# getPaymentIntent

Returns the payment intent object that is currently set in the UPI handler.

# Syntax
upiHandler.getPaymentIntent();
1
# Return value

paymentIntent object.

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create subscriptions or payment methods.

# Syntax
upiHandler.handlePayment(paymentInfo, callbacks);
1
# Parameters
paymentInfo
Object View properties
Transaction-related information can be passed here.
callbacks
Object View properties
Callback that can be passed during the payment process.
# Return value

A promise that resolves to an authorized paymentIntent object.

# Example
var upiHandler;
cbInstance.load("upi").then((paymentHandler) => {
  upiHandler = paymentHandler;
  upiHandler.setPaymentIntent(intent);
});

function onSubmit() {
  // Collect the below required parameters from user before initiating payment
  const paymentInfo = {
    customer: {
      firstName: "John",
      lastName: "Kennedy",
      email: "john@example.com",
      phone: "XXXXXXXXXX",
    },
    vpa: "john@bank", // Customer UPI ID
  };

  // Show a loading screen / timer to the user, until the UPI payment transaction is authorized
  return upiHandler
    .handlePayment(paymentInfo)
    .then((paymentIntent) => {
      // Use the authorized payment intent to create a subscription
      return createSubscriptionApi(paymentIntent.id);
    })
    .catch((err) => {
      // Transaction failed
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Direct Debit Handler

# setPaymentIntent

Use this function to set paymentIntent that was created at your server side. The paymentIntent will contain information about the payment gateway and the amount that needs to be charged.

# Syntax
directDebitHandler.setPaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
cbInstance.load('direct_debit').then(directDebitHandler => {
  // Set the paymentIntent
  directDebitHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5

# updatePaymentIntent

Whenever the amount that needs to charged changes with user interaction (discount coupon applied, tax), you can do an Ajax call to your server to update the payment intent using this API (opens new window). This updated paymentIntent should then be passed to this function.

# Syntax
directDebitHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var directDebitHandler;
cbInstance.load('direct_debit').then(directDebitPaymentHandler => {
  directDebitHandler = directDebitPaymentHandler;
  // Set the paymentIntent
  directDebitHandler.setPaymentIntent(paymentIntent)
  ...
});
function onCartUpdate() {
  // make ajax call to your server
  // to update the payment intent with revised amount
  // using chargebee's update Payment intent API
  updateIntentApi().then(paymentIntent => {
    // Set the updated payment intent to the payment handler
    directDebitHandler.updatePaymentIntent(paymentIntent)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# handlePayment

Use this function to initiate the payment process. After a successful authorization, paymentIntent will be marked as authorized. This paymentIntent id can then be used to create invoices.

Learn more.

# Example

cbInstance.load("direct_debit").then(directdebitHandler => {
createPaymentIntent().then((paymentIntent) => {
directdebitHandler.setPaymentIntent(paymentIntent);
const paymentInfo = {
plaid:{
userId: "123",
}
}
directdebitHandler.handlePayment(paymentInfo).then(paymentIntent => {
// SUCCESS!!! payment_intent is authorised.
var response = fetch('/subscriptions', {
method: 'POST',
body: JSON.stringify({
paymentIntentId: paymentIntent.id,
plan_id: 'pro_plan',
plan_quantity: 1,
billingAddress: {...}, // provide billing address
customer: {...} // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
})
}).then(function(response) {
return response.json();
});
}).catch(err => {
// OOPS!!! payment_intent is not authorised.
});
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Voucher based payments

# Boleto Handler

Use the below functions to explore more on the Boleto handler operations.

The Boleto payment handler object can be created by loading the payment method using Chargebee instance.

# setPaymentIntent

Use this function to set paymentIntent that was created on your server side. The paymentIntent will contain information about the payment gateway and the amount that needs to be charged.

# Syntax
boletoHandler.setPaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
cbInstance.load('boleto').then(boteloHandler => {
  // Set the paymentIntent
  boteloHandler.setPaymentIntent(paymentIntent)
  ...
});
1
2
3
4
5

# updatePaymentIntent

Whenever the amount that needs to charged changes with user interaction (discount coupon applied, tax), you can do an Ajax call to your server to update the payment intent using this API (opens new window). This updated paymentIntent should then be passed to this function.

# Syntax
boteloHandler.updatePaymentIntent(paymentIntent);
1
# Parameters
paymentIntent
Object Required
Payment Intent object
# Return value

NA

# Example
var boteloHandler;
cbInstance.load('boleto').then(boteloPaymentHandler => {
  boteloHandler = boletoPaymentHandler;
  // Set the paymentIntent
  boteloHandler.setPaymentIntent(paymentIntent)
  ...
});
function onCartUpdate() {
  // make ajax call to your server
  // to update the payment intent with revised amount
  // using chargebee's update Payment intent API
  updateIntentApi().then(paymentIntent => {
    // Set the updated payment intent to the payment handler
    boteloHandler.updatePaymentIntent(paymentIntent)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# handlePayment

Use this function to initiate the payment process. After successful authorization, paymentIntent will be marked as authorized. After creating a subscription, you can utilize the authorized paymentIntent in Chargebee APIs to showcase the vouchers.

# Syntax
boletoHandler.handlePayment(paymentInfo, callbacks);
1
# Parameters
paymentInfo
Object View properties
Transaction-related information can be passed here.
callbacks
Object View properties
Callback that can be passed during the payment process.
# Return value

Authorized paymentIntent object.

# Example

cbInstance.load("boleto").then(boteloHandler => {
    createPaymentIntent().then((paymentIntent) => {
            boteloHandler.setPaymentIntent(paymentIntent);
            const paymentInfo = {
                "customer": {
                    "firstName": "assa",
                    "lastName": "ssa",
                    "email": "a@a.com",
                    "phone": "+12332434343"
                },
                "billingAddress": {
                    "firstName": "assa",
                    "lastName": "ssa",
                    "addressLine1": "No 4 metro street",
                    "addressLine2": "rio street",
                    "city": "rio",
                    "state": "ap",
                    "countryCode": "BR",
                    "zip": "76787678"
                },
                "taxId": "00000000000000"
            }
        }
        boteloHandler.handlePayment(paymentInfo).then(paymentIntent => {
            // SUCCESS!!! payment_intent is authorised.
            var response = fetch('/subscriptions', {
                method: 'POST',
                body: JSON.stringify({
                    paymentIntentId: paymentIntent.id,
                    plan_id: 'pro_plan',
                    plan_quantity: 1,
                    billingAddress: {
                        ...
                    }, // provide billing address
                    customer: {
                        ...
                    } // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
                })
            }).then(function(response) {
                return response.json();
            });
        }).catch(err => {
            // OOPS!!! payment_intent is not authorised.
        });
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

←