feat(checkout): build payment section (#67)

* feat(checkout): integrate stripe

* integrate stripe

* use query params to persist cart and payment uuids

* build thank you and failed payment pages

* refactor payment form

Author: mapra99

.env.example

@@ -3,3 +3,4 @@ AUDIOPHILE_API_BASE_URL=http://0.0.0.0:3001
 AUDIOPHILE_API_KEY=audiophile
 AUDIOPHILE_API_VERSION=v1
 MAPBOX_GL_TOKEN=token123
+STRIPE_PUBLIC_API_KEY=key123

app/components/index.ts

@@ -33,3 +33,4 @@ export { default as PurchaseCartSummaryItem } from './purchase-cart-summary-item
 export { default as PurchaseCartSummaryFee } from './purchase-cart-summary-fee'
 export { default as LocationInfo } from './location-info'
 export { default as ProgressBar } from './progress-bar'
+export { default as PaymentForm } from './payment-form'

app/components/payment-form/index.ts

@@ -0,0 +1 @@
+export { default } from './payment-form'

app/components/payment-form/payment-form.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import {
+  PaymentElement,
+  LinkAuthenticationElement,
+  useStripe,
+  useElements
+} from "@stripe/react-stripe-js";
+import invariant from 'tiny-invariant'
+
+import type { FormEventHandler } from 'react'
+import type { PaymentIntentResult } from '@stripe/stripe-js'
+import type { PaymentFormProps } from "./types";
+
+const PaymentForm = ({ redirectUrl }: PaymentFormProps) => {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const [message, setMessage] = useState<string | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!stripe) return
+
+    const clientSecret = new URLSearchParams(window.location.search).get("payment_intent_client_secret")
+    if (!clientSecret) return
+
+    stripe
+      .retrievePaymentIntent(clientSecret)
+      .then(({ paymentIntent }: PaymentIntentResult) => {
+        invariant(paymentIntent, 'payment intent must exist')
+
+        switch (paymentIntent.status) {
+          case "succeeded":
+            setMessage("Payment succeeded!");
+            break;
+          case "processing":
+            setMessage("Your payment is processing.");
+            break;
+          case "requires_payment_method":
+            setMessage("Your payment was not successful, please try again.");
+            break;
+          default:
+            setMessage("Something went wrong.");
+            break;
+        }
+      });
+  }, [stripe]);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    if (!stripe || !elements) return
+
+    setIsLoading(true)
+
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: redirectUrl
+      },
+    });
+
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message);
+    } else {
+      setMessage("An unexpected error occurred.");
+    }
+
+    setIsLoading(false);
+  };
+
+  return (
+    <form id="payment-form" onSubmit={handleSubmit}>
+      <LinkAuthenticationElement
+        id="link-authentication-element"
+        className="!font-bold"
+      />
+      <PaymentElement
+        id="payment-element"
+        options={{ layout: "tabs" }}
+      />
+      <button
+        disabled={isLoading || !stripe || !elements}
+        id="submit"
+      >
+        <span id="button-text">
+          { isLoading ? <div className="spinner" id="spinner" /> : "Pay now" }
+        </span>
+      </button>
+      { message && <div id="payment-message">{ message }</div> }
+    </form>
+  );
+}
+
+export default PaymentForm

app/components/payment-form/types.ts

@@ -0,0 +1,3 @@
+export interface PaymentFormProps {
+  redirectUrl: string
+}

app/components/purchase-cart-list/purchase-cart-list.tsx

@@ -5,7 +5,7 @@ import formatCurrency from '~/utils/format-currency'
 import type { PurchaseCartListProps } from './types'
 
 const PurchaseCartList = ({ cart, onClose, onCartRemoval }: PurchaseCartListProps) => {
-  const { items } = cart
+  const { items, uuid } = cart
 
   const subtotal = items.reduce((cumPrice, item) => item.price + cumPrice, 0)
 
@@ -48,7 +48,7 @@ const PurchaseCartList = ({ cart, onClose, onCartRemoval }: PurchaseCartListProp
         </Text>
       </div>
 
-      <ButtonLink variant="primary" to="/checkout" className="text-center" onClick={onClose}>
+      <ButtonLink variant="primary" to={`/checkout?cart_uuid=${uuid}`} className="text-center" onClick={onClose}>
         Checkout
       </ButtonLink>
     </div>

app/icons/check/check.tsx

@@ -0,0 +1,11 @@
+import type { CheckProps } from './types'
+
+const Check = ({ className }: CheckProps) => {
+  return (
+    <svg viewBox="0 0 26 21" fill="none" className={className ? className : ''}>
+      <path d="M1.75391 11.3328L8.50542 18.0843L24.3085 2.28125" strokeWidth="4"/>
+    </svg>
+  )
+}
+
+export default Check

app/icons/check/index.ts

@@ -0,0 +1 @@
+export { default } from './check'

app/icons/check/types.ts

@@ -0,0 +1,3 @@
+export interface CheckProps {
+  className?: string
+}

app/icons/index.ts

@@ -7,3 +7,4 @@ export { default as BurgerMenu } from './burger-menu'
 export { default as PurchaseCart } from './purchase-cart'
 export { default as Cross } from './cross'
 export { default as TrashCan } from './trash-can'
+export { default as Check } from './check'