# 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);
# Parameters
# Return value
NA
# Example
cbInstance.load3DSHandler().then(threeDSHandler => {
// Set the paymentIntent
threeDSHandler.setPaymentIntent(paymentIntent)
...
});
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);
# Parameters
# 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();
}
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();
# 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);
# Parameters
# 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)
});
}
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();
# 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();
}
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();
# 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);
# Parameters
# Return value
NA
# Example
var bancontactHandler;
cbInstance.load('bancontact').then(_bancontactHandler => {
bancontactHandler = _bancontactHandler;
// Set the paymentIntent
bancontactHandler.setPaymentIntent(paymentIntent)
...
});
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);
# Parameters
# 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)
...
})
}
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);
# Parameters
# 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);
},
}
);
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);
},
}
);
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();
# Return value
paymentIntent
object.
# Example
let paypalHandler
cbInstance.load('paypal').then(_paypalHandler => {
paypalHandler = _paypalHandler;
// Set the paymentIntent
paypalHandler.setPaymentIntent(paymentIntent)
...
});
function onClick() {
paypalHandler.getPaymentIntent()
}
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);
# Parameters
# Example
let paypalHandler
cbInstance.load('paypal').then(_paypalHandler => {
paypalHandler = _paypalHandler;
// Set the paymentIntent
paypalHandler.setPaymentIntent(paymentIntent)
...
});
2
3
4
5
6
7
# updatePaymentIntent
Use this method to update the payment intent.
# Syntax
paypalHandler.updatePaymentIntent(paymentIntent);
# Parameters
# 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)
})
}
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);
# Parameters
# 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");
});
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);
# Parameters
# 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);
});
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();
# Return value
Payment Intent object
# setPaymentIntent
Use this method to set the payment intent for payment processing.
# Syntax
googlePayHandler.setPaymentIntent(paymentIntent);
# Parameters
# Return value
NA
# Example
cbInstance.load('google-pay').then(googlePayHandler => {
googlePayHandler.setPaymentIntent(paymentIntent);
...
})
2
3
4
# updatePaymentIntent
Use this method to update the payment intent.
# Syntax
googlePayHandler.updatePaymentIntent(paymentIntent);
# Parameters
# 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)
})
}
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);
# Parameters
# 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");
});
2
3
4
5
# handlePayment
Use this method to wait for payment authorization to complete.
# Syntax
googlePayHandler.handlePayment(callbacks);
# Parameters
# 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
});
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();
# Return value
Boolean
# Example
const isApplePayAvailable = applePayHandler.canMakePayments();
# mountPaymentButton
Use this function to mount the Apple Pay button to the webpage.
# Syntax
applePayHandler.mountPaymentButton(selector, options);
# Parameters
# Return value
A promise that resolves after successfully mounting the payment button.
# Example
applePayHandler.mountPaymentButton("#applepay-button", {
locale: "en_US",
buttonColor: "black",
buttonType: "plain",
});
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);
# Parameters
# 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);
});
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();
# Return value
paymentIntent
object.
# Example
let venmoHandler
cbInstance.load('venmo').then(_venmoHandler => {
venmoHandler = _venmoHandler;
// Set the paymentIntent
venmoHandler.setPaymentIntent(paymentIntent)
...
});
function onClick() {
venmoHandler.getPaymentIntent()
}
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);
# Parameters
# Example
let venmoHandler
cbInstance.load('venmo').then(_venmoHandler => {
venmoHandler = _venmoHandler;
// Set the paymentIntent
venmoHandler.setPaymentIntent(paymentIntent)
...
});
2
3
4
5
6
7
8
# updatePaymentIntent
Use this method to update the payment intent.
# Syntax
venmoHandler.updatePaymentIntent(paymentIntent);
# Parameters
# 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)
})
}
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);
# Parameters
# 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");
});
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);
# Parameters
# 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);
});
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);
# Parameter
ideal
sofort
bancontact
giropay
dotpay
netbanking_emandates
direct_debit
# Return value
A promise that resolves to an authorized payment intent object.
# iDEAL Payment handler
# mountBankList
deprecated
Deprecation Notice
This method is deprecated and and will no longer be supported after April 1, 2025.
To ensure continued functionality upgrade to the latest version of the integration.
Attaches a dropdown element to the webpage that displays the list of banks supported by the gateway.
# Syntax
<label class="ex2-field">
<span id="dropdown-element" class="ex2-input"></span>
</label>
2
3
idealPaymentHandler.mountBankList(selector, options);
# Parameters
# 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,
});
});
2
3
4
5
6
# getSelectedBank
deprecated
Deprecation Notice
This method is deprecated and and will no longer be supported after April 1, 2025.
To ensure continued functionality upgrade to the latest version of the integration.
Retrieves the details of the bank selected by the user from the dropdown element.
# Syntax
idealHandler.getSelectedBank();
# Return value
Returns an object containing the details of the selected bank.
{
id: 'bank-id',
name: 'Name of the bank'
}
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.
# 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",
},
});
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.
# 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
},
});
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.
# Example
cbInstance.handlePayment("giropay", {
paymentIntent: () => {
// make Ajax call to server to create a payment intent
return createPaymentIntent();
},
});
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.
# Example
cbInstance.handlePayment("dotpay", {
paymentIntent: () => {
// make Ajax call to server to create a payment intent
return createPaymentIntent();
},
});
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);
# Parameters
# 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",
},
},
},
});
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();
# Parameters
# Return value
Returns an object containing the details of the selected bank
{
id: 'bank-id',
name: 'Name of the bank'
}
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);
# Parameters
# Return value
NA
# Example
cbInstance.load('netbanking_emandates').then(netBankingHandler => {
// Set the paymentIntent
netBankingHandler.setPaymentIntent(paymentIntent)
...
});
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);
# Parameters
# 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)
})
}
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();
# 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);
# Parameters
# 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",
},
];
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
});
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.
# 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,
});
}
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);
# Parameters
# Return value
NA
# Example
cbInstance.load('upi').then(upiHandler => {
// Set the payment intent
upiHandler.setPaymentIntent(paymentIntent)
...
});
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);
# Parameters
# 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)
})
}
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();
# 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);
# Parameters
# 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
});
}
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);
# Parameters
# Return value
NA
# Example
cbInstance.load('direct_debit').then(directDebitHandler => {
// Set the paymentIntent
directDebitHandler.setPaymentIntent(paymentIntent)
...
});
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);
# Parameters
# 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)
})
}
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.
# 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.
});
});
});
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);
# Parameters
# Return value
NA
# Example
cbInstance.load('boleto').then(boteloHandler => {
// Set the paymentIntent
boteloHandler.setPaymentIntent(paymentIntent)
...
});
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);
# Parameters
# 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)
})
}
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);
# Parameters
# 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.
});
});
});
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