diff --git a/src/components/CheckoutForm.jsx b/src/components/CheckoutForm.jsx index d815e91..9d54efe 100644 --- a/src/components/CheckoutForm.jsx +++ b/src/components/CheckoutForm.jsx @@ -1,15 +1,19 @@ -import { usePluto } from '@plutohq/pluto-react'; +import { usePluto, ConnectSolWallet } from '@plutohq/pluto-react'; import React from 'react'; +import currencies from '../constants/currencies.json'; +import explorers from '../constants/explorers.json'; import ConnectEthWallet from './ConnectEthWallet'; import PaymentModal from './PaymentModal'; -export default function CheckoutForm() { +export default function CheckoutForm({ currencyCode }) { const pluto = usePluto(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [transaction, setTransaction] = React.useState(null); const [showPaymentModal, setShowPaymentModal] = React.useState(false); + const currency = React.useMemo(() => currencies.find((c) => c.code === currencyCode), [currencyCode]); + const handleSubmit = React.useCallback( async (event) => { event.preventDefault(); @@ -21,6 +25,7 @@ export default function CheckoutForm() { body: JSON.stringify({ name: event.target.name.value, email: event.target.email.value, + currency: currencyCode, }), }) .then((res) => res.json()) @@ -47,7 +52,7 @@ export default function CheckoutForm() { .finally(() => setLoading(false)); } }, - [pluto], + [currencyCode, pluto], ); return ( @@ -75,7 +80,7 @@ export default function CheckoutForm() { View your transaction:  @@ -84,7 +89,8 @@ export default function CheckoutForm() { )}
- + {currency.chain === 'eth' && } + {currency.chain === 'sol' && }
@@ -110,7 +116,7 @@ export default function CheckoutForm() { className="w-full rounded bg-purple-500 py-1 px-2 text-white shadow transition hover:bg-purple-600" type="submit" > - {loading ? 'Processing...' : 'Pay 0.01 ETH'} + {loading ? 'Processing...' : `Pay 0.01 ${currency.code.toUpperCase()}`} diff --git a/src/constants/currencies.json b/src/constants/currencies.json new file mode 100644 index 0000000..9cb9346 --- /dev/null +++ b/src/constants/currencies.json @@ -0,0 +1,7 @@ +[{ + "code": "eth", + "chain": "eth" +}, { + "code": "sol", + "chain": "sol" +}] diff --git a/src/constants/explorers.json b/src/constants/explorers.json new file mode 100644 index 0000000..95448a9 --- /dev/null +++ b/src/constants/explorers.json @@ -0,0 +1,4 @@ +{ + "eth": "https://rinkeby.etherscan.io/tx/[HASH]", + "sol": "https://solscan.io/tx/[HASH]?cluster=devnet" +} diff --git a/src/pages/[currency].jsx b/src/pages/[currency].jsx new file mode 100755 index 0000000..9ce2d89 --- /dev/null +++ b/src/pages/[currency].jsx @@ -0,0 +1,31 @@ +import { loadPluto } from '@plutohq/pluto-js'; +import { PlutoConfig } from '@plutohq/pluto-react'; +import { NextSeo } from 'next-seo'; +import { useRouter } from 'next/router'; +import React from 'react'; +import CheckoutForm from '../components/CheckoutForm'; +import currencies from '../constants/currencies.json'; + +export default function Currency() { + const router = useRouter(); + const pluto = loadPluto(process.env.NEXT_PUBLIC_PLUTO_PUBLISHABLE_TEST_KEY); + + return ( + + + + + ); +} + +export async function getServerSideProps({ query }) { + const currency = currencies.find((c) => c.code === query.currency); + + if (!currency) return { + redirect: { + destination: '/eth', + }, + }; + + return { props: {} }; +} diff --git a/src/pages/api/checkout.js b/src/pages/api/checkout.js index 3db54a0..5f9cd47 100644 --- a/src/pages/api/checkout.js +++ b/src/pages/api/checkout.js @@ -1,9 +1,11 @@ +import currencies from '../../constants/currencies.json'; import pluto from '../../lib/pluto'; async function handler(req, res) { try { if (req.method === 'POST') { - if (!req.body.name || !req.body.email) return res.status(400).json({ error: 'Missing name or email' }); + const currency = currencies.find((c) => c.code === req.body.currency); + if (!req.body.name || !req.body.email || !currency) return res.status(400).json({ error: 'Missing name or email' }); const customer = await pluto.customers.create({ name: req.body.name, @@ -11,8 +13,8 @@ async function handler(req, res) { }); const paymentIntent = await pluto.paymentIntents.create({ - chain: 'eth', - currency: 'eth', + chain: currency.chain, + currency: currency.code, amount: 0.01, customer: customer.id, }); diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 0f0d0ea..274fb90 100755 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,18 +1,11 @@ -import { loadPluto } from '@plutohq/pluto-js'; -import { PlutoConfig } from '@plutohq/pluto-react'; -import { NextSeo } from 'next-seo'; -import React from 'react'; -import CheckoutForm from '../components/CheckoutForm'; - -function Index() { - const pluto = loadPluto(process.env.NEXT_PUBLIC_PLUTO_PUBLISHABLE_TEST_KEY); - - return ( - - - - - ); +export default function Purchase() { + return ''; } -export default Index; +export async function getServerSideProps() { + return { + redirect: { + destination: '/eth', + }, + }; +}