-
Notifications
You must be signed in to change notification settings - Fork 0
/
donate-with-elements.tsx
48 lines (46 loc) · 1.53 KB
/
donate-with-elements.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { NextPage } from 'next'
import { useState, useEffect } from 'react'
import { Elements } from '@stripe/react-stripe-js'
import { PaymentIntent } from '@stripe/stripe-js'
import getStripe from '../utils/get-stripejs'
import { fetchPostJSON } from '../utils/api-helpers'
import Layout from '../components/Layout'
import * as config from '../config'
import ElementsForm from '../components/ElementsForm'
const DonatePage: NextPage = () => {
const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null)
useEffect(() => {
fetchPostJSON('/api/payment_intents', {
amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
}).then((data) => {
setPaymentIntent(data)
})
}, [setPaymentIntent])
return (
<Layout title="Donate with Elements | Next.js + TypeScript Example">
<div className="page-container">
<h1>Donate with Elements</h1>
<p>Donate to our project 💖</p>
{paymentIntent && paymentIntent.client_secret ? (
<Elements
stripe={getStripe()}
options={{
appearance: {
variables: {
colorIcon: '#6772e5',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
},
},
clientSecret: paymentIntent.client_secret,
}}
>
<ElementsForm paymentIntent={paymentIntent} />
</Elements>
) : (
<p>Loading...</p>
)}
</div>
</Layout>
)
}
export default DonatePage