gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pay btn mountins state

Browse Source
This commit is contained in:
Aidar Shaikhutdin @makeweb.space 2023-06-20 14:30:43 +03:00
parent ea5b2fce07
commit 75358b9362
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/PaymentPage/methods/ApplePay/Button.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { PaymentIntent } from '@chargebee/chargebee-js-types'
import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '../../../../api'
@ -21,6 +21,7 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
const { i18n } = useTranslation()
const { token } = useAuth()
const { applePay } = usePayment()
const [isMounting, setIsMounting] = useState<boolean>(true)
const loadData = useCallback(() => {
return api.createPaymentIntent({ token, paymentMethod, currencyCode })
.then(({ payment_intent }) => payment_intent)
@ -38,6 +39,7 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
}
applePay?.setPaymentIntent(data)
applePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
.then(() => setIsMounting(false))
.then(() => applePay?.handlePayment())
.then((paymentIntent) => {
return api.createSubscriptionReceipt({
@ -48,9 +50,12 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
.catch((error: Error) => onError(error))
}, [data, applePay, buttonId, i18n.language, api, token, onSuccess, onError])
return isPending ? <Loader /> : (
<div id={buttonId} className='pay-btn'>{
error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null
}</div>
return (
<>
{isPending || isMounting ? <Loader /> : null}
<div id={buttonId} className='pay-btn'>
{error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null}
</div>
</>
)
}

15
src/components/PaymentPage/methods/GooglePay/Button.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { PaymentIntent } from '@chargebee/chargebee-js-types'
import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '../../../../api'
@ -21,6 +21,7 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
const { i18n } = useTranslation()
const { token } = useAuth()
const { googlePay } = usePayment()
const [isMounting, setIsMounting] = useState<boolean>(true)
const loadData = useCallback(() => {
return api.createPaymentIntent({ token, paymentMethod, currencyCode })
.then(({ payment_intent }) => payment_intent)
@ -39,6 +40,7 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
}
googlePay?.setPaymentIntent(data)
googlePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
.then(() => setIsMounting(false))
.then(() => googlePay?.handlePayment())
.then((result) => {
console.log('Success payment by GooglePay', result)
@ -48,9 +50,12 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
.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>
return (
<>
{isPending || isMounting ? <Loader /> : null}
<div id={buttonId} className='pay-btn'>
{error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null}
</div>
</>
)
}