https://github.com/saiichihashimoto/use-stripe-payment-request
Default Description set by probot/settings
https://github.com/saiichihashimoto/use-stripe-payment-request
Last synced: 7 months ago
JSON representation
Default Description set by probot/settings
- Host: GitHub
- URL: https://github.com/saiichihashimoto/use-stripe-payment-request
- Owner: saiichihashimoto
- Created: 2022-04-01T21:35:06.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T07:35:07.000Z (about 1 year ago)
- Last Synced: 2024-09-15T15:38:53.380Z (about 1 year ago)
- Language: TypeScript
- Size: 656 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-stripe-payment-request
React Hooks for [Stripe's Payment Request](https://stripe.com/docs/js/payment_request/create) and [Payment Request Events](https://stripe.com/docs/js/payment_request/events). Replaces the need for the `PaymentRequestButtonElement` but ultimately has all [the same requirements](https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=react).
## Getting Started
```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
: (
setOpen(true)}
>
Open Apple/Google Pay
);
```
## API
### `usePaymentRequest`
```typescript
usePaymentRequest(
stripe: Stripe | undefined | null,
options: PaymentRequestOptions
): [
PaymentRequest,
{
canMakePayment: {
error?: Error;
loading: boolean;
value?: CanMakePaymentResult;
};
open: boolean;
setOpen: Dispatch>;
}
]
```
### `usePaymentRequestShippingAddress`
https://stripe.com/docs/js/payment_request/events/on_shipping_address_change
```typescript
usePaymentRequestShippingAddress(
paymentRequest: PaymentRequest | undefined,
options: Omit,
onShippingAddressChange?: (
shippingAddress: PaymentRequestShippingAddress
) => MaybePromise
): void
```
### `usePaymentRequestShippingOption`
https://stripe.com/docs/js/payment_request/events/on_shipping_option_change
```typescript
usePaymentRequestShippingOption(
paymentRequest: PaymentRequest | undefined,
options: Omit,
onShippingOptionChange?: (
shippingOption: PaymentRequestShippingOption
) => MaybePromise
): void
```
### `usePaymentRequestPaymentMethod`
https://stripe.com/docs/js/payment_request/events/on_paymentmethod
```typescript
usePaymentRequestPaymentMethod(
paymentRequest: PaymentRequest | undefined,
onPaymentMethodChange?: (
paymentResponse: Omit
) => MaybePromise
): void
```
### `usePaymentRequestSource`
https://stripe.com/docs/js/payment_request/events/on_source
```typescript
usePaymentRequestSource(
paymentRequest: PaymentRequest | undefined,
onSourceChange?: (
paymentResponse: Omit
) => MaybePromise
): void
```
### `usePaymentRequestToken`
https://stripe.com/docs/js/payment_request/events/on_token
```typescript
usePaymentRequestToken(
paymentRequest: PaymentRequest | undefined,
onTokenChange?: (
paymentResponse: Omit
) => MaybePromise
): void
```