PaymentConfirmation.tsx37 lines · main

1	import { useStripe } from '@stripe/react-stripe-js'
2	import { PaymentIntentResult } from '@stripe/stripe-js'
3	import { useEffect } from 'react'
4	import { LoadingLine } from 'ui'
5
6	export const PaymentConfirmation = ({
7	paymentIntentSecret,
8	onPaymentIntentConfirm,
9	onLoadingChange,
10	onError,
11	}: {
12	paymentIntentSecret: string
13	onPaymentIntentConfirm: (response: PaymentIntentResult) => void
14	onLoadingChange: (loading: boolean) => void
15	onError?: (error: Error) => void
16	}) => {
17	const stripe = useStripe()
18
19	useEffect(() => {
20	if (stripe && paymentIntentSecret) {
21	onLoadingChange(true)
22	stripe!
23	.confirmCardPayment(paymentIntentSecret)
24	.then((res) => {
25	onPaymentIntentConfirm(res)
26	onLoadingChange(false)
27	})
28	.catch((err) => {
29	console.error(err)
30	onError?.(err)
31	onLoadingChange(false)
32	})
33	}
34	}, [paymentIntentSecret, stripe])
35
36	return <LoadingLine loading={true} />
37	}