reactjsnext.jsstripe-paymentsapplepaygoogle-pay

How to set Stripe Wallet buttons to always visible?

I'm integrating Stripe Wallet in Next.js, the wallet buttons show up, but only one is visible by default and others are hidden.

enter image description here

When clicking the See more button, it shows the GooglePay and ApplePay buttons. enter image description here

What I want is to show the GPay and Apple Pay buttons always visible. This is what I have now for the wallet buttons.

<div id="checkout-page">
  <ExpressCheckoutElement
    onConfirm={onConfirm}
    options={{
      wallets: { applePay: "always", googlePay: "always" },
      layout: { maxColumns: 0, maxRows: 0 },
    }}
    onClick={onClick}
  />
  {errorMessage && <div>{errorMessage}</div>}
</div>

Any help or tips would be appreciated. Thank you!

PS: Some helps docs below: https://stripe.com/docs/elements/express-checkout-element

Solution

  • Looks like layout: { overflow:"never", ... } is for that : https://stripe.com/docs/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout-overflow