stripe button
This commit is contained in:
CHIEFSOFT\ameye
@@ -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;
|
||||
@@ -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 { 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 {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} />
|
||||
{activePaymentType == 'new' ?
|
||||
<SubscribeNewCard />
|
||||
<SubcribePaymentOptions activePaymentType={activePaymentType}
|
||||
setActivePaymentType={setActivePaymentType}/>
|
||||
{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 className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>{selectedSubscription.display_name}</h5>
|
||||
<h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
|
||||
<p className="text-primary pb-3">/ Monthly</p>
|
||||
<ul className="py-2">
|
||||
{selectedSubscription?.items?.map(item =>(
|
||||
<li key={item.description}>{item.description}</li>
|
||||
))}
|
||||
</ul>
|
||||
{/*<div className="pt-2">*/}
|
||||
{/* <button className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
|
||||
{/*</div>*/}
|
||||
<div key="basic" className="col-12 col-lg-6 col-xl-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>{selectedSubscription.display_name}</h5>
|
||||
<h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
|
||||
<p className="text-primary pb-3">/ Monthly</p>
|
||||
<ol className="py-2"
|
||||
style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
|
||||
{selectedSubscription?.items?.map(item => (
|
||||
<li key={item.description}>{item.description}</li>
|
||||
))}
|
||||
</ol>
|
||||
{/*<div className="pt-2">*/}
|
||||
{/* <button className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user