Frontend Capabilities

# Overview

3DS Helper JS is a module within Chargebee.js to support 3DS flows for various scenarios such as passing.

  • Chargebee temporary token (Obtained using Components & Fields)
  • Tokenized card details
  • Permanent token(Reference ID)
  • Raw card details

Any of the above values can be passed to the handleCardPayment function of 3DS Helper JS and Chargebee will take it forward from there and complete the 3DS flow.

Here are some recipes that can be used to handle 3DS payments along with the gateways supported for each:

# Using Chargebee Card Components

PCI Compliance Effort: Low

You are eligible for SAQ-A (opens new window) when using this approach.

Any of the two recipes here can be used when collecting card details via Chargebee’s Card Components.

# Frontend-only Implementation

This recipe allows you to complete the full 3DS flow of operations on the front end.

# Steps

  1. Capture card details using Chargebee.js Card Components.
  2. Request a Chargebee temporary token.
  3. Setup 3DS Helper.
  4. Invoke handleCardPayment to start 3DS flow.

# Supported Payment Gateways

  • Bluesnap
  • Braintree
  • Cybersource
  • Ingenico Direct
  • Mollie
  • Razorpay
  • Stripe
  • Worldpay

Support for Adyen gateway

To implement 3DS through Adyen gateway while using Components and Fields, you can use the authorizewith3ds method.

Note:

Currently, Chargebee JS does not support payments via in-app browsers of Instagram, Facebook and Snapchat for Mollie and Razorpay.

# Everything on the Frontend Except PaymentIntent Creation

# Steps

  1. Frontend

    • Capture card details using Chargebee.js Card Components.

  2. Backend

    1. Create a payment intent (opens new window) for the customer.
    2. Pass the returned payment intent to the front end.

  3. Frontend

# Supported Payment Gateways

  • Adyen
  • Bluesnap
  • Braintree
  • Checkout.com
  • Cybersource
  • Ingenico Direct
  • Mollie
  • Razorpay
  • Stripe
  • Worldpay
  • Bank of America

# Using Gateway’s Hosted Fields

Any of the following two options can be used when you collect card details using the gateway’s hosted fields:

# Tokenize Using Chargebee.js

PCI Compliance Effort: Low

You are eligible for SAQ-A (opens new window) when using this approach.

# Steps

Do the following on the frontend:

  1. Collect card details using gateway hosted fields such as:
    • Stripe Elements
    • Braintree Hosted Fields
  2. Setup 3DS Helper.
  3. Invoke handleCardPayment to start 3DS flow, by passing the gateway hosted field object into paymentInfo.elements.

# Supported Payment Gateways

  • Stripe (Stripe Elements)
  • Braintree (Braintree Hosted Fields)
  • Adyen (Adyen Hosted Fields)

# Tokenize Using Gateway’s JS

PCI Compliance Effort: Medium

When using this approach, check with your payment gateway to evaluate the PCI compliance effort needed.

# Steps

Do the following on the frontend:

  1. Collect card details on your frontend.
  2. Setup 3DS Helper.
  3. Invoke handleCardPayment to start 3DS flow, by passing the gateway’s tokenizer function as the paymentInfo.tokenizer parameter.

# Supported Payment Gateways

  • Stripe
  • Braintree

# Using Permanent Token

PCI Compliance Effort: Medium

  • When using this approach, the compliance effort is low while using permanent tokens.
  • However, when generating permanent tokens for the first time, if you handle card data yourself, the compliance requirements are high.

Use the permanent token available in your system for card information that was stored earlier.

# Steps

  1. Backend
    1. Invoke Create a payment intent (opens new window) in the backend with the Reference ID as input.
    2. Send the received payment intent to the front end.
  2. Frontend
    1. Setup 3DS Helper.
    2. Set the payment intent in JS.
    3. Call handleCardPayment without the paymentInfo parameter.

# Supported Payment Gateways

  • Adyen
  • Bluesnap
  • Braintree
  • Cybersource
  • Ingenico Direct
  • Mollie
  • Razorpay
  • Stripe
  • Bank of America

# Collecting raw card details

PCI Compliance Effort: High

When using this option, the PCI compliance effort needed is the highest. Do check with your payment gateway for details.

Collect raw card details via your checkout and pass it to Chargebee.js 3DS Helper to conduct 3DS flow.

# Steps

Do the following on the frontend:

  1. Collect raw card details on your checkout.
  2. Setup 3DS Helper.
  3. Pass card details to handleCardPayment via the paymentInfo.card property.

# Supported payment gateways

  • Adyen
  • Bluesnap
  • Braintree
  • Checkout.com
  • Cybersource
  • Ingenico Direct
  • Mollie
  • Razorpay
  • Stripe
  • Worldpay
  • Bank of America

← How to Integrate →