diff --git a/app/checkout/paymentOptions.tsx b/app/checkout/paymentOptions.tsx
index fd0fca6..af42606 100644
--- a/app/checkout/paymentOptions.tsx
+++ b/app/checkout/paymentOptions.tsx
@@ -2,10 +2,40 @@
import Image from 'next/image';
import PayPalLogo from '@/public/img/PayPal.svg'
import React from "react";
+import {useState} from 'react';
+import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+
export function PaymentOptions() {
+ const stripe = useStripe();
+ const elements = useElements();
+ const [paymentProcessing, setPaymentProcessing] = useState(false);
+
+ // note that the backend route has been created using express, please let Umar know if there are any problems with this
+ async function handleSubmit(e: any) { // simple event handler function for submitting the form
+ e.preventDefault();
+ setPaymentProcessing(true);
+ const cardElement = elements.getElement(CardElement); // just ignore this error
+ const response = await fetch('/create-payment-intent', {
+ method: "POST",
+ headers: {"Content-Type" : "application/json"},
+ body: JSON.stringify({amount: 1000})
+ });
+
+ const {clientSecret} = await response.json();
+ const paymentResult = await stripe.confirmCardPayment(clientSecret, { // just ignore this error, this is to do with the fact that the variable is imported
+ payment_method: {card: cardElement} // ignore this error for the same reasons given above
+ });
+ setPaymentProcessing(false);
+ if (paymentResult.error) {
+ console.error(paymentResult.error);
+ } else {
+ console.log('Payment successful!');
+ };
+ };
+
return(
- <>
+ <>
Payment Options
Buy Now
+