Add currencies

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: 
             <a
               target="_blank"
-              href={`https://rinkeby.etherscan.io/tx/${transaction}`}
+              href={explorers[currency.chain].replace('[HASH]', transaction)}
               className="text-purple-500 hover:text-purple-600 outline-none"
               rel="noreferrer"
             >
@@ -84,7 +89,8 @@ export default function CheckoutForm() {
           </div>
         )}
         <div className="flex w-full flex-col space-y-4">
-          <ConnectEthWallet />
+          {currency.chain === 'eth' && <ConnectEthWallet />}
+          {currency.chain === 'sol' && <ConnectSolWallet />}
           <div className="flex flex-col gap-2 sm:flex-row">
             <div className="flex w-full flex-col space-y-1 sm:w-1/3">
               <label htmlFor="name">Name</label>
@@ -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()}`}
         </button>
       </form>
     </>

src/constants/currencies.json

@@ -0,0 +1,7 @@
+[{
+  "code": "eth",
+  "chain": "eth"
+}, {
+  "code": "sol",
+  "chain": "sol"
+}]

src/constants/explorers.json

@@ -0,0 +1,4 @@
+{
+  "eth": "https://rinkeby.etherscan.io/tx/[HASH]",
+  "sol": "https://solscan.io/tx/[HASH]?cluster=devnet"
+}

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 (
+    <PlutoConfig pluto={pluto}>
+      <NextSeo title="Pluto Crypto Checkout Quickstart" noindex />
+      <CheckoutForm currencyCode={router.query.currency} />
+    </PlutoConfig>
+  );
+}
+
+export async function getServerSideProps({ query }) {
+  const currency = currencies.find((c) => c.code === query.currency);
+
+  if (!currency) return {
+    redirect: {
+      destination: '/eth',
+    },
+  };
+
+  return { props: {} };
+}

src/pages/api/checkout.js

@@ -1,18 +1,20 @@
+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,
         email: req.body.email,
       });
 
       const paymentIntent = await pluto.paymentIntents.create({
-        chain: 'eth',
-        currency: 'eth',
+        chain: currency.chain,
+        currency: currency.code,
         amount: 0.01,
         customer: customer.id,
       });

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 (
-    <PlutoConfig pluto={pluto}>
-      <NextSeo title="Pluto Crypto Checkout Quickstart" noindex />
-      <CheckoutForm />
-    </PlutoConfig>
-  );
+export default function Purchase() {
+  return '';
 }
 
-export default Index;
+export async function getServerSideProps() {
+  return {
+    redirect: {
+      destination: '/eth',
+    },
+  };
+}