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;
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.
[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