stripe button

src/component/subscribe/StripeSubscriptionButton.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import {MyProductData, StripeSubscriptionCreate} from '../../services/services';
+import {useQuery} from "@tanstack/react-query";
+import queryKeys from "../../services/queryKeys";
+import { useNavigate } from 'react-router-dom';
+//const stripePromise = loadStripe('your_stripe_publishable_key');
+const stripePromise = loadStripe('pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT');
+
+const CheckoutForm = ({ priceId, customerId }) => {
+    const stripe = useStripe();
+    const elements = useElements();
+    const navigate = useNavigate();
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        if (!stripe || !elements) {
+            return;
+        }
+
+        let reqData = {
+            priceId : priceId,
+            customerId: customerId,
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid') // USER UID
+        }
+
+        StripeSubscriptionCreate(reqData).then( (res)=>{
+            console.log(res);
+            console.log(res.data.stripe_session);
+            //navigate(res.data.stripe_session)
+            window.location.replace(res.data.stripe_session);
+        });
+
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <CardElement />
+            <button type="submit" disabled={!stripe}>
+                Subscribe
+            </button>
+        </form>
+    );
+};
+
+const StripeSubscriptionButton = ({ priceId, customerId }) => {
+    return (
+        <Elements stripe={stripePromise}>
+            <CheckoutForm priceId={priceId} customerId={customerId} />
+        </Elements>
+    );
+};
+
+export default StripeSubscriptionButton;