# Quick Start Integration
# Inserting Chargebee.js script in your application
Include the following script in your HTML page. You need to do this only once per page
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
# Initializing Chargebee instance
Inside your JavaScript code, initialize chargebee once the page is loaded and get 'chargebee instance' object. This object is used further to create threeds handler object.
let chargebeeInstance = Chargebee.init({
site: "mannar-test",
});
// You can access the above created instance anywhere using the following code
let chargebeeInstance = Chargebee.getInstance();
2
3
4
5
6
# Initialize 3DS Module
Use the load3DSHandler
method to load and initialize the 3DS Helper module. Then use the threeDSHandler
to initiate 3DS flow.
let chargebeeInstance = Chargebee.getInstance();
chargebeeInstance.load3DSHandler().then(threeDSHandler => {
// your code here
});
2
3
4
# PaymentIntent object
A paymentIntent
should be created at your server using create paymentIntent API and returned to the client side. ThreeDS handler uses the created paymentIntent
internally to perform 3DS authorization.
While creating the paymentIntent, you need to specify the amount that needs to be charged from the customer. You can also choose to specifiy which gateway needs to be used for this charge. If not mentioned, smart routing rules will be applied
You can use the update paymentIntent API to update the paymentIntent with different amount before its consumed. (Amount can change when tax is applied or when an end-user enters a discount coupon).
For authorizing a stored payment method, pass the amount and payment method's reference id while creating the payment intent.
TIP
In case there is no immediate charge, mention a default amount(specific to each gateway). This amount will be returned back to the customer after verification.
# Setting the paymentIntent to the threeDS handler instance
In the client side, set the created paymentIntent to the threeDSHandler using the setPaymentIntent
method.
function createPaymentIntent() {
// Create a payment intent at your server side
// paymentIntent can either be prefetched while loading the HTML or via an ajax call
}
chargebeeInstance.load3DSHandler().then(threeDSHandler => {
// Set the created paymentIntent
threeDSHandler.setPaymentIntent(paymentIntent)
// The paymentIntent can be updated whenever the amount gets changed
threeDSHandler.updatePaymentIntent(paymentIntent)
});
2
3
4
5
6
7
8
9
10
11
12
# Handle card payment with 3DS flow for a new card
When the user attempts to checkout after entering card details, call handleCardPyament
method for initiating 3DS flow.
Click here for a complete list of additional parameters that you can pass.
threeDSHandler.handleCardPayment({
card: {
firstName: "First Name",
lastName: "Last Name",
number: "xxxx xxxx xxxx xxxx",
cvv: "",
expiryMonth: "10",
expiryYear: "2019"
},
additionalData: {
// you can pass additional information to improve the chances to do a frictionless transaction
}
}, {
change: function(intent) {
// Triggers on each step transition
},
success: function(intent) {
// Triggers when card is 3DS authorized
},
error: function(intent, error) {
// Triggers when 3DS authorization fails
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Handle 3DS flow for payment with existing card
Specify the payment methods's referenceId
when creating the paymentIntent. Then, call the handleCardPayment
method without passing any additional parameters.
threeDSHandler.handleCardPayment()
.then(intent => {
// Call update subscription API / collect now API
}).catch(error => {
// Handle error
});
2
3
4
5
6
# Using the authorized payment intent
After a 3DS flow is completed, the paymentIntent
returned will be in authorized
state, you can use this paymentIntent
id for creating a subscription, adding a payment source, for collecting payment of an unpaid invoice that was failed due to 3DS.