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

# 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();
  charegbeeInstance.load3DSHandler().then(threeDSHandler => {
      // your code here
  });

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

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

  charegbeeInstance.load3DSHandler().then(threeDSHandler => {
    // Set the created paymentIntent
    threeDSHandler.setPaymentIntent(paymentIntent)

    // The paymentIntent can be updated whenever the amount gets changed
    threeDSHandler.updatePaymentIntent(paymentIntent)
  });

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

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

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

# Examples

• Chargebee Test Gateway
• Adyen Gateway with own form
• Adyen Gateway with adyen hosted fields