-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.tsx
50 lines (40 loc) · 1.39 KB
/
page.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
49
50
import PageHeader from "@/app/components/PageHeader";
import { fetchShopItem } from "@/services/hygraph";
import { moonblossom } from "@/app/fonts";
import { loadStripe } from "@stripe/stripe-js";
import StripeWrapper from "../components/StripeWrapper";
const stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY as string);
const Checkout = async ({ params }: { params: { slug: string } }) => {
const { data, errors } = await fetchShopItem(params.slug);
console.log({ stripePromise, env: process.env.STRIPE_PUBLISHABLE_KEY });
const stripe = require("stripe")(process.env.STRIPE_PRIVATE_KEY);
const paymentIntent = await stripe.paymentIntents.create({
amount: parseInt(data.shopItem.price) * 100,
currency: "gbp",
automatic_payment_methods: {
enabled: true,
},
});
const options = {
clientSecret: paymentIntent.client_secret as string,
};
if (errors) {
throw new Error("Could not load page content");
}
return (
<main
className={`${moonblossom.className} flex min-h-screen flex-col items-center`}
>
<div className="relative flex flex-col place-items-center pt-10 md:pt-30">
<PageHeader />
<StripeWrapper
title={data.shopItem.title}
price={data.shopItem.price}
stripePromise={stripePromise}
options={options}
/>
</div>
</main>
);
};
export default Checkout;