  
npm install use-stripe-payment-requestReact Hooks for Stripe's Payment Request and Payment Request Events. Replaces the need for the PaymentRequestButtonElement but ultimately has all the same requirements.
``bash`
npm install use-stripe-payment-request @stripe/stripe-js
`tsx
import type { PaymentRequestOptions } from "@stripe/stripe-js";
import { useMemo } from "react";
import {
usePaymentRequest,
usePaymentRequestPaymentMethod,
usePaymentRequestShippingAddress,
} from "use-stripe-payment-request";
// In a component
const stripe = useStripe();
const [shippingCosts, setShippingCosts] = useState();
const options: PaymentRequestOptions = useMemo(() => ({
country: "US",
displayOptions: [..., getDisplayOption(shippingCosts)],
requestShipping: true,
// ...
}), [shippingCosts, ...]);
const [paymentRequest, {
canMakePayment,
open,
setOpen,
}] = usePaymentRequest(stripe, options);
usePaymentRequestShippingAddress(paymentRequest, options, async (shippingAddress) => {
const result = await someAsyncFn(shippingAddress);
setShippingCosts(result);
// You don't need to call updateWith.options
// reflects the desired state and upateWith
// gets invoked under the hood once this callback returns
// a status.
return "success";
});
usePaymentRequestPaymentMethod(paymentRequest, async ({ paymentMethod }) => {
const clientSecret = await getTheSecretFromBackend();
await stripe.confirmCardPayment(clientSecret, {
payment_method: paymentMethod,
});
return "success";
});
return !canMakePayment.value
? null
: (
disabled={open}
onClick={() => setOpen(true)}
>
Open Apple/Google Pay
);
`
`typescript`
usePaymentRequest(
stripe: Stripe | undefined | null,
options: PaymentRequestOptions
): [
PaymentRequest,
{
canMakePayment: {
error?: Error;
loading: boolean;
value?: CanMakePaymentResult;
};
open: boolean;
setOpen: Dispatch
}
]
https://stripe.com/docs/js/payment_request/events/on_shipping_address_change
`typescript`
usePaymentRequestShippingAddress(
paymentRequest: PaymentRequest | undefined,
options: Omit
onShippingAddressChange?: (
shippingAddress: PaymentRequestShippingAddress
) => MaybePromise
): void
https://stripe.com/docs/js/payment_request/events/on_shipping_option_change
`typescript`
usePaymentRequestShippingOption(
paymentRequest: PaymentRequest | undefined,
options: Omit
onShippingOptionChange?: (
shippingOption: PaymentRequestShippingOption
) => MaybePromise
): void
https://stripe.com/docs/js/payment_request/events/on_paymentmethod
`typescript`
usePaymentRequestPaymentMethod(
paymentRequest: PaymentRequest | undefined,
onPaymentMethodChange?: (
paymentResponse: Omit
) => MaybePromise
): void
https://stripe.com/docs/js/payment_request/events/on_source
`typescript`
usePaymentRequestSource(
paymentRequest: PaymentRequest | undefined,
onSourceChange?: (
paymentResponse: Omit
) => MaybePromise
): void
https://stripe.com/docs/js/payment_request/events/on_token
`typescript``
usePaymentRequestToken(
paymentRequest: PaymentRequest | undefined,
onTokenChange?: (
paymentResponse: Omit
) => MaybePromise
): void