Payment Components Troubleshooting
This page provides solutions to common issues with Payment Components.
Payment Components are not loading
If Payment Components fail to load:
- Verify that the payment intent exists and is valid.
- Check the prerequisites again.
- If you are using embedded browsers, such as mobile WebViews, be aware of their known limitations.
If the issue persists, contact Chargebee Support.
Gateway not supported for 3DS
Customers may see Gateway not supported for 3DS during checkout when card payment is routed through a gateway that does not support 3D Secure (3DS) in Chargebee, but the checkout flow still requires 3DS authentication for the payment. Payment Components and other payment intent-based checkout paths validate gateway support before authentication can proceed, and block the payment when the routed gateway cannot perform 3DS.
This often appears when:
- Your default or routed card gateway is Authorize.net or another gateway on the not supported for 3DS list in the PSD2 and SCA page, and
- The issuer or your site configuration requires 3DS for the transaction.
Authorize.net direct integration does not support 3DS in Chargebee. Among the gateways that support only non-3DS card flows, Payment Components do not support card collection through Authorize.net, Sage Pay, Vantiv, or gateways integrated via Spreedly.
What you can do
- Use a 3DS-capable gateway for card checkout. Configure a gateway from the supported for 3DS list and set smart routing so card payments use that gateway when 3DS is required.
- Confirm gateway and Payment Components support before enabling Payment Components on hosted or custom checkout. Match your active card gateway to the supported payment methods for Payment Components.
- Trace failed checkouts under Logs > Payment Intents to see how many payment intents failed with this error and which customers were affected.
If you are impacted by PSD2 and have been using an unsupported gateway, contact Chargebee Support for help migrating to a 3DS-supported gateway.
Wallet button mount or allowlisting errors
If you use wallet-based payment methods such as Apple Pay or Google Pay, the JavaScript domain must be allowlisted at the gateway, even if you are not using the Payment Components payment button.
Wallet eligibility and button rendering depend on the domain from which Chargebee.js is loaded. Ensure the Chargebee.js domain is registered and allowlisted at the gateway so wallet buttons can render successfully.
For gateway-specific prerequisites, including domain allowlisting, see the following pages:
The GoCardless payment button is too stretched
The Payment Button Component may look too stretched when you use GoCardless. This happens because the payment button always takes up 100% of the width of its parent container.
When you use GoCardless, set an appropriate class on the payment button host element, then select the class in CSS to control its size.
<div id="payment-button" class="gocardless-button-host"></div>.gocardless-button-host {
width: 300px;
max-width: 100%;
}paymentButtonComponent.mount("#payment-button");