diff --git a/src/component/subscribe/StripeSubscriptionButton.jsx b/src/component/subscribe/StripeSubscriptionButton.jsx index 94d049f..6701c37 100644 --- a/src/component/subscribe/StripeSubscriptionButton.jsx +++ b/src/component/subscribe/StripeSubscriptionButton.jsx @@ -1,57 +1,85 @@ -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 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'; +import { useNavigate } from "react-router-dom"; //const stripePromise = loadStripe('your_stripe_publishable_key'); -const stripePromise = loadStripe('pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT'); +const stripePromise = loadStripe( + "pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT", +); -const CheckoutForm = ({ priceId, customerId ,option_name }) => { - const stripe = useStripe(); - const elements = useElements(); - const navigate = useNavigate(); - const handleSubmit = async (event) => { - event.preventDefault(); +const CheckoutForm = ({ + priceId, + customerId, + option_name, + selected_display_name, +}) => { + 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, - option_name: option_name, - 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); - }); + if (!stripe || !elements) { + return; + } + let reqData = { + priceId: priceId, + customerId: customerId, + option_name: option_name, + token: localStorage.getItem("token"), // USER TOKEN + uid: localStorage.getItem("uid"), // USER UID }; - return ( -
- ); + 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 ( + + ); }; -const StripeSubscriptionButton = ({ priceId, customerId ,option_name}) => { - return ( -