55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import { stripeConfig } from 'shared/config/stripe.mjs'
|
|
import { useEffect, useState } from 'react'
|
|
import { useBackend } from 'shared/hooks/use-backend.mjs'
|
|
import { useTheme } from 'shared/hooks/use-theme.mjs'
|
|
import { Elements, PaymentElement } from '@stripe/react-stripe-js'
|
|
import { loadStripe } from '@stripe/stripe-js'
|
|
import { Loading } from 'shared/components/spinner.mjs'
|
|
|
|
export const Payment = ({ amount = 2500, currency = 'eur' }) => {
|
|
const appearance = useTheme().stripe
|
|
const backend = useBackend()
|
|
const [stripe, setStripe] = useState(false)
|
|
const [clientSecret, setClientSecret] = useState(false)
|
|
|
|
const options = {
|
|
mode: 'payment',
|
|
layout: {
|
|
type: 'accordion',
|
|
radios: true,
|
|
spacedAccordianItems: true,
|
|
},
|
|
business: {
|
|
name: 'FreeSewing',
|
|
},
|
|
amount,
|
|
currency,
|
|
appearance,
|
|
}
|
|
|
|
useEffect(() => {
|
|
const getPaymentIntent = async () => {
|
|
const stripeClient = await loadStripe(stripeConfig.apiKey)
|
|
const result = await backend.createPaymentIntent({ amount, currency })
|
|
if (result.success && result.data.clientSecret) setClientSecret(result.data.clientSecret)
|
|
setStripe(stripeClient)
|
|
}
|
|
getPaymentIntent()
|
|
}, [amount, currency])
|
|
|
|
return clientSecret ? (
|
|
<Elements stripe={stripe} options={options} layout="accordion">
|
|
<form>
|
|
<PaymentElement options={options} />
|
|
<pre>{JSON.stringify(clientSecret, null, 2)}</pre>
|
|
</form>
|
|
</Elements>
|
|
) : (
|
|
<div className="my-12">
|
|
<Loading />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
//<pre>{JSON.stringify(options, null ,2)}</pre>
|
|
//<pre>{JSON.stringify(intent, null ,2)}</pre>
|