47 lines
896 B
TypeScript
47 lines
896 B
TypeScript
'use client'
|
|
import {Button} from '@/components/ui/button'
|
|
import {useState} from 'react'
|
|
import {PaymentModal} from './payment-modal'
|
|
import {PaymentProps} from './type'
|
|
|
|
export function PaymentButton({
|
|
onClick,
|
|
disabled,
|
|
onSuccess,
|
|
}: {
|
|
onClick: () => Promise<PaymentProps>
|
|
disabled?: boolean
|
|
onSuccess?: () => void
|
|
}) {
|
|
const [loading, setLoading] = useState(false)
|
|
const [trade, setTrade] = useState<PaymentProps>()
|
|
|
|
const handleClick = async () => {
|
|
setLoading(true)
|
|
try {
|
|
setTrade(await onClick())
|
|
}
|
|
finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
onClick={handleClick}
|
|
disabled={disabled || loading}
|
|
>
|
|
{loading ? '处理中...' : '立即支付'}
|
|
</Button>
|
|
|
|
{trade && (
|
|
<PaymentModal
|
|
{...trade}
|
|
onConfirm={onSuccess}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|