MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

StripeSubscriptionButton

Browse Source
This commit is contained in:
Olusesan Ameye
2026-05-23 09:15:37 -04:00
parent 29a2c937fe
commit 22c7182993
3 changed files with 83 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/subscribe/StripeSubscriptionButton.jsx
+74 -46
View File
@@ -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 (
<form onSubmit={handleSubmit}>
{/*<CardElement />*/}
<button type="submit" disabled={!stripe} className="btn btn-primary text-uppercase">
Start Subscription
</button>
</form>
);
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}
className="btn btn-primary text-uppercase"
>
Start {selected_display_name} Subscription
</button>
</form>
);
};
const StripeSubscriptionButton = ({ priceId, customerId ,option_name}) => {
return (
<Elements stripe={stripePromise}>
<CheckoutForm priceId={priceId} customerId={customerId} option_name={option_name} />
</Elements>
);
const StripeSubscriptionButton = ({
priceId,
customerId,
option_name,
selected_display_name,
}) => {
return (
<Elements stripe={stripePromise}>
<CheckoutForm
priceId={priceId}
customerId={customerId}
option_name={option_name}
selected_display_name={selected_display_name}
/>
</Elements>
);
};
export default StripeSubscriptionButton;
export default StripeSubscriptionButton;
src/component/subscribe/Subscribe.jsx
+7 -4
View File
@@ -8,9 +8,10 @@ import StripeSubscriptionButton from "./StripeSubscriptionButton";
import SubscribeInfo from "./SubscribeInfo";
export default function Subscribe() {
const {state: {selectedSubscription, customerId}} = useLocation()
const {state: {selectedSubscription, customerId, currentSubscription}} = useLocation()
console.log('selectedSubscription', selectedSubscription)
console.log('currentSubscription', currentSubscription)
console.log('selectedSubscription.option_name', selectedSubscription.option_name)
console.log('customerId', customerId)
@@ -25,8 +26,8 @@ export default function Subscribe() {
<div className="card card-statistics text-center py-3">
<div className="card-body pricing-content">
<div className="pricing-content-card">
<h5>Current Subscription(s)</h5>
{/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
<h3>Your Current Subscription</h3>
<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
{/*<SubcribePaymentOptions activePaymentType={activePaymentType}*/}
{/* setActivePaymentType={setActivePaymentType}/>*/}
{/*{activePaymentType == 'new' ?*/}
@@ -38,7 +39,9 @@ export default function Subscribe() {
<SubscribeInfo />
<StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id}
customerId={customerId}
option_name={selectedSubscription.option_name}/>
option_name={selectedSubscription.option_name}
selected_display_name={selectedSubscription.display_name}
/>
</>
</div>
</div>
src/component/subscription/Subscription.jsx
+2 -1
View File
@@ -91,7 +91,8 @@ export default function Subscription() {
navigate(siteLinks.subscribe, {
state: {
selectedSubscription: value,
customerId: stripe_customer_id
customerId: stripe_customer_id,
currentSubscription: currentSubscription
}
})
}}