Frontend Capabilities

# Payment Components ✨

Early Access

The Payment Components feature is in early access. To request access, write to eap@chargebee.com.

Payment Components are pre-built UI components that support multiple payment methods in a single, seamless integration. They offer input fields and buttons for securely collecting payment information from your customers.

# Feature highlights

  • Simple integration: Integrate just once to support multiple payment methods across various payment gateways. This helps you expand globally and increase revenue, without additional development cost.

  • PCI compliant: The Payment Components securely handle card data within an iframe hosted on Chargebee's domain, ensuring that your servers never process or store your customers' payment information. This reduces your PCI compliance requirements significantly.

  • Customizable UI and layout: Easily customize the user interface and layout to match your website’s design for a seamless user experience.

  • Personalized experience: You can customize the styling extensively to personalize the payment experience, which reduces friction and increases conversion.

  • Responsive: Payment Components are responsive across devices and screen sizes.

  • Dynamic payment button: Includes an optional payment button for greater layout flexibility.

  • Additional form fields: Add extra form fields to collect more information during payment collection.

# Who should use Payment Components?

Payment Components are ideal if you:

  • Build your in-house checkout experience but are looking for a partner to manage the payment experience securely and efficiently.
  • Integrate directly with payment gateways and need a unified solution for handling payments.

You can also upgrade to Payment Components if you:

# Use case demos

The Chargebee Payment Components can be customized to suit different business needs. Some common business use cases are demonstrated below.

# Style customizations

Payment Components offers granular styling and layout options to match your website design.

Styling API

To customize the styling, use the style parameter in the following scenarios:

  • When creating the Components object. (This styling is inherited by all payment components and payment button components associated with this object.)
  • When creating or updating a payment component.
  • When creating or updating a payment button component.

Style customization options

# Show payment methods based on cart value

Below is a checkout page where the Chargebee Payment Component is rendered in the lower left quadrant under the heading Payment. In this demo, the available payment methods and their sort order change based on the cart value.

Payment methods shown according to the cart value

# Show payment methods based on region

In this demo, the available payment methods and their sort order change based on the country selected by the user.

Payment methods changing according to the country selected

# Quickstart

Download a sample app (opens new window) and refer to its code walkthrough to quickly implement Payment Components.

# More use cases

Ready to go beyond the basics? Check out Payment Components Use Cases for more scenarios using payment components.

# Supported payment methods

Note

We are continuously adding support for more payment methods and gateways. Stay tuned for updates.

Payment Components currently support the following payment methods:

← Functions →