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.

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:

• Google Pay
• Apple Pay
• PayPal
• Other wallet-based payment methods

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");