Checkout & Self-Serve portal

# Overview

As part of the Revised Payment Services Directive(PSD2) regulation, Strong Customer Authentication(SCA) is a new requirement that comes into effect from September 14, 2019. If your Business targets European customers, they might have to perform additional authentication while submitting their credit card details.

# 3-D Secure

3-D Secure(3DS) authentication is one reliable way of verifying the customers’ authenticity. 3DS 2.0 is an upgraded version which allows customer device ID to be sent over to the Issuing Bank to verify their authenticity and provide a frictionless checkout experience. For some reasons and scenarios, the Issuing Bank may deem more proof for validating the transaction. The customer will go through the necessary 3DS verification flows during such cases.

If the Issuing Bank does not support 3DS 2.0, then the customer would be made to authenticate via 3DS 1.0 (i.e) redirection flow, during which the customer would be taken to a new authentication window and asked to enter a password to verify.

# How to be SCA-ready?

  • If you are using Chargebee's Checkout and Self-serve portal for collecting card details, implementing 3DS at the gateway level is enough for you to be ready for SCA
  • If you are using Chargebee's Hosted Components and Fields for collecting card details, check this section on how to support 3DS in your checkout flow.
  • If you are collecting raw card details on your own and creating subscriptions/payment sources directly using our APIs, 3DS Helper module of Chargebee.js will help you to be SCA compliant by taking care of 3DS flows.

# 3DS Helper JS

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

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

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.

# Advantages

  • Even though each gateway has their own version of JS to support 3DS, our JS is tailor-made for subscription business.
  • In case you are already collecting card details using a gateway JS, Chargebee.js can coexist and fit in your flow by handling 3DS authentication alone.
  • Chargebee.js accommodates all 3DS supported gateways in Chargebee. Hence you can route the payment via your preferred gateway for each currency, and perform 3DS flow for the same.

# Recipes for using 3DS

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

# Using Chargebee Hosted Components & Fields

PCI Compliance Effort: Low

You are eligible for SAQ-A when using this approach.

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

# Frontend-only implementation

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

# Steps
  1. Capture card details using Chargebee.js Components & Fields
  2. Request a Chargebee temporary token.
  3. Setup 3DS Helper.
  4. Invoke handleCardPayment to start 3DS flow.
# Supported payment gateways
  • Stripe
  • Braintree
  • Checkout.com
  • Adyen

Support for Adyen gateway

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

# Everything on the frontend except payment intent creation

# Steps

  1. Frontend

    • Capture card details using Chargebee.js Components & Fields.

  2. Backend

    1. Create a payment intent for the customer.
    2. Pass the returned payment intent to the frontend.

  3. Frontend

# Supported payment gateways
  • Stripe
  • Braintree
  • Checkout.com
  • Adyen

# 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 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)
  • Checkout.com (Frames)

# 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
  • Checkout.com

# Using permanent token

PCI Compliance Effort: Medium

  • When using this approach, the compliance effort is low while using permanent tokens.
  • However, when generating the 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 in the backend with the Reference ID as input.
    2. Send the received payment intent to the frontend.
  2. Frontend
    1. Setup 3DS Helper.
    2. Set the payment intent in JS.
    3. Call handleCardPayment without the paymentInfo parameter.
# Supported payment gateways
  • Stripe
  • Braintree
  • Adyen
  • Checkout.com
  • Chargebee Test Gateway

# 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
  • Stripe
  • Braintree
  • Adyen
  • Checkout.com
  • Chargebee Test Gateway

← Quick Start Integration →