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;

src/component/subscribe/Subscribe.jsx

@@ -1,25 +1,25 @@
-import React, { useState } from 'react'
+import React, {useState} from 'react'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
-import getImage from "../../utils/getImage";
+import {Link, useLocation} from 'react-router-dom'
-import { getSubscriptions } from '../../services/services';
-import { useQuery } from '@tanstack/react-query';
-import queryKeys from '../../services/queryKeys';
-import siteLinks from "../../links/siteLinks";
-import { Link, useLocation } from 'react-router-dom'
 import SubscribeNewCard from "./SubscribeNewCard";
 import SubscribePreviousCard from "./SubscribePreviousCard";
 import SubcribePaymentOptions from "./SubcribePaymentOptions";
+import StripeSubscriptionButton from "./StripeSubscriptionButton";
+
+
+
 
 export default function Subscribe() {
+    const {state: {selectedSubscription,customerId}} = useLocation()
 
-    const {state:{selectedSubscription}} = useLocation()
+    console.log('selectedSubscription', selectedSubscription)
+    console.log('customerId', customerId)
 
-    // console.log('selectedSubscription', selectedSubscription)
     let [activePaymentType, setActivePaymentType] = useState('previous')
 
     return (
         <>
-            <BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']} />
+            <BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']}/>
 
             <div className="row">
                 <div className="col-12 col-lg-6 col-xl-6">
@@ -28,38 +28,42 @@ export default function Subscribe() {
                             <div className="pricing-content-card">
                                 <h5>Current Subscription(s)</h5>
                                 {/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
-                                    <SubcribePaymentOptions activePaymentType={activePaymentType} setActivePaymentType={setActivePaymentType} />
+                                <SubcribePaymentOptions activePaymentType={activePaymentType}
-                                    {activePaymentType == 'new' ?
+                                                        setActivePaymentType={setActivePaymentType}/>
-                                    <SubscribeNewCard />
+                                {activePaymentType == 'new' ?
+                                    <SubscribeNewCard/>
                                     :
-                                    <SubscribePreviousCard />
+                                    <SubscribePreviousCard/>
-                                    }
+                                }
-
+                                <>
+                                    <StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id} customerId={customerId} />
+                                </>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <>
-                <div key="basic" className="col-12 col-lg-6 col-xl-6">
+                    <div key="basic" className="col-12 col-lg-6 col-xl-6">
-                    <div className="card card-statistics text-center py-3">
+                        <div className="card card-statistics text-center py-3">
-                        <div className="card-body pricing-content">
+                            <div className="card-body pricing-content">
-                            <div className="pricing-content-card">
+                                <div className="pricing-content-card">
-                                <h5>{selectedSubscription.display_name}</h5>
+                                    <h5>{selectedSubscription.display_name}</h5>
-                                <h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
+                                    <h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
-                                <p className="text-primary pb-3">/ Monthly</p>
+                                    <p className="text-primary pb-3">/ Monthly</p>
-                                <ul className="py-2">
+                                    <ol className="py-2"
-                                    {selectedSubscription?.items?.map(item =>(
+                                        style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
-                                        <li key={item.description}>{item.description}</li>
+                                        {selectedSubscription?.items?.map(item => (
-                                    ))}
+                                            <li key={item.description}>{item.description}</li>
-                                </ul>
+                                        ))}
-                                {/*<div className="pt-2">*/}
+                                    </ol>
-                                {/*    <button   className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
+                                    {/*<div className="pt-2">*/}
-                                {/*</div>*/}
+                                    {/*    <button   className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
+                                    {/*</div>*/}
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
                 </>
             </div>
         </>

src/component/subscription/Subscription.jsx

@@ -28,6 +28,8 @@ export default function Subscription() {
 
     const currentSubscription = data?.data?.current_product
     const otherSubscriptions = data?.data?.options
+    const stripe_customer_id = data?.data.stripe_customer_id
+
     // console.log('urlData', data?.data)
 
     return (
@@ -83,7 +85,7 @@ export default function Subscription() {
                                         </div>
                                         <div className="pt-2">
                                             <button onClick={() => {
-                                                navigate(siteLinks.subscribe, {state: {selectedSubscription: value}})
+                                                navigate(siteLinks.subscribe, {state: {selectedSubscription: value, customerId: stripe_customer_id }})
                                             }}
                                                     className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
                                         </div>

src/services/services.js

@@ -83,6 +83,13 @@ export const MyProductData = (reqData) => {
     return postAuxEnd(`/panel/myproduct/dash`, postData, false)
 }
 
+export const StripeSubscriptionCreate = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/subscription/start`, postData, false)
+}
+
 // FUNCTION TO GET CALENDAR EVENTS
 export const getCalendarEvents = (reqData) => {
     let postData = {