Card Components
Deprecated. Card Components is deprecated. It still works and existing integrations are unaffected, but it's no longer the recommended approach. For new integrations, use Payment Components instead, which is actively maintained and built to support multiple payment methods. For what changes when you move across, see Comparison with Card Components and the Payment Method Helper.
Overview
Card Components let you build a PCI-compliant payment collection form without compromising your application's theme and style.
Check the list of supported gateways before you start, and make sure yours is on it.
Usage
If you build your own checkout, you need a secure, PCI-compliant payment collection flow to complete a payment and, in turn, the checkout.
Card Components solve this by giving you customizable fields. You can style them to match your application's theme without taking on the PCI compliance burden yourself.
Workflow
- Instead of your own input fields, use Card Components to collect card details. Card Components are iframe-based input fields hosted by Chargebee.
- The customer enters their card details in the components.
- Before you submit the form or make an AJAX call for an action such as creating a subscription or updating card details, request a Chargebee token for the details entered.
- On your server, use that token with the following APIs to perform the action:
Card collection
You can collect card details in two ways.
Default mode
In Default mode, the number, expiry, and CVV fields appear as a single entity.
Fields mode
In Fields mode, you can customize each field individually and make every field in your form look consistent.
For a step-by-step setup guide covering both modes, see the Chargebee.js Card Components integration tutorial.
See also
Card Components API reference — includes live, editable demos of both modes.
Available customizations
- Pass your own CSS to the components to customize font, color, placeholder, and more. See the API reference for every supported CSS property.
- Placeholder text.
- Localization.
- Callbacks for component states such as focused, complete, invalid, and empty.
- A CSS class applied to the container that holds the iframe, based on the component state.
Support for frontend frameworks
Card Components are built in vanilla JavaScript and integrate with any frontend framework. Chargebee also publishes wrappers for Angular, React, and Vue for a quicker integration.
For the props, event listeners, and mounting modes supported by each wrapper, see Chargebee JS wrappers in the API reference.
Container element
Your HTML needs a container element to mount the components into. Chargebee inserts its iframes inside this container. You can also style the container with CSS to style the components.
Supported gateways
3DS support is limited. Not every gateway listed below supports 3DS payment flows. See Recipes for using 3DS for the gateways supported in 3DS flows.
Direct integration
- Authorize.net (direct integration — contact support to enable this)
- Adyen (supports only 3DS flows, not non-3DS workflows)
- Bluesnap
- Braintree
- Checkout.com
- Cybersource
- Ingenico Direct
- Mollie
- Razorpay
- Spreedly
- Spreedly Global
- Stripe
- Worldpay
- Bank of America (supports only non-3DS workflows)
- Pay.com
Integrations supported through Spreedly
- Authorize.net
- Bambora
- Bluepay
- Bluesnap
- Cybersource
- Elavon
- Eway Rapid
- Ingenico ePayments
- Moneris
- NMI (3DS beta)
- Orbital
- Paymill
- PayPal Payflow Pro
- PayPal Pro
- PIN
- Sage Pay