# 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>

chargebee.js script should be loaded through Chargebee server for PCI compliance. DO NOT download and load it via your server.

# 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();

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

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

1
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
    }
  })

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