reactjsstripe-paymentsapplepay

How to pass a disable prop in Apple Pay Stripe's button in React


I have added the Apple pay button in my application, but i want to pass a disable prop in the ButtonElement of stripe-js.

 <PaymentRequestButtonElement options={{
   paymentRequest,
   disableMultipleButtons: true,
   style: {
      paymentRequestButton: {
         type: "buy",
          theme: "dark",
          height: "48px",
          },
        },
    }} />

I am using the container of Elements to show the Button below :

    <Elements stripe={stripePromiseUS} options={STRIPE_OPTIONS}>
      {props.children}
    </Elements>

Here is my STRIPE_OPTIONS as well :

export const STRIPE_OPTIONS = {
  mode: 'setup',
  currency: 'usd',
  paymentMethodCreation: 'manual',
} as StripeElementsOptions;

Solution

  • When you create a paymentRequest instance[1], you can provide a list of wallets to disable[2].

      const [paymentRequest, setPaymentRequest] = useState(null);
    
      useEffect(() => {
        if (stripe) {
          const pr = stripe.paymentRequest({
            country: 'US',
            currency: 'usd',
            total: {
              label: 'Demo total',
              amount: 1099,
            },
            requestPayerName: true,
            requestPayerEmail: true,
            disableWallets: ['applePay'] # add this line
          });
        }
      }, [stripe]);
    

    If you want to disable the Request Button, unfortunately, you can't. As a workaround you can use your own button[3] and disbale/enable it as any other button in your webpage.

    [1] https://docs.stripe.com/stripe-js/elements/payment-request-button?client=react#create-payment-request-instance

    [2] https://docs.stripe.com/js/payment_request/create#stripe_payment_request-options-disableWallets

    [3] https://docs.stripe.com/stripe-js/elements/payment-request-button?client=react#use-own-button