57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { useCallback, useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { PaymentIntent } from '@chargebee/chargebee-js-types'
|
|
import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '../../../../api'
|
|
import { usePayment, GooglePayButtonOptions } from '../../../../payment'
|
|
import { useAuth } from '../../../../auth'
|
|
import Loader from '../../../Loader'
|
|
import ErrorText from '../../../ErrorText'
|
|
|
|
const currencyCode = 'USD'
|
|
const paymentMethod = 'google_pay'
|
|
|
|
interface GooglePayButtonProps {
|
|
onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void
|
|
onError: (error: Error) => void
|
|
}
|
|
|
|
export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): JSX.Element {
|
|
const api = useApi()
|
|
const buttonId = 'google-pay-btn'
|
|
const { i18n } = useTranslation()
|
|
const { token } = useAuth()
|
|
const { googlePay } = usePayment()
|
|
const loadData = useCallback(() => {
|
|
return api.createPaymentIntent({ token, paymentMethod, currencyCode })
|
|
.then(({ payment_intent }) => payment_intent)
|
|
}, [api, token])
|
|
const { data, error, isPending } = useApiCall<PaymentIntent>(loadData)
|
|
|
|
if (error) console.error(error)
|
|
|
|
useEffect(() => {
|
|
if (data === null) return
|
|
const buttonOptions: GooglePayButtonOptions = {
|
|
buttonColor: 'black',
|
|
buttonType: 'pay',
|
|
buttonLocale: i18n.language,
|
|
buttonSizeMode: 'fill',
|
|
}
|
|
googlePay?.setPaymentIntent(data)
|
|
googlePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
|
|
.then(() => googlePay?.handlePayment())
|
|
.then((result) => {
|
|
console.log('Success payment by GooglePay', result)
|
|
// TODO: implement api.createSubscriptionReceipt for GooglePay
|
|
})
|
|
.then(() => onSuccess({} as SubscriptionReceipts.SubscriptionReceipt))
|
|
.catch((error: Error) => onError(error))
|
|
}, [data, googlePay, buttonId, i18n.language, onSuccess, onError])
|
|
|
|
return isPending ? <Loader /> : (
|
|
<div id={buttonId} className='pay-btn'>{
|
|
error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null
|
|
}</div>
|
|
)
|
|
}
|