gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'preview-fix-stripe-payment' into 'main'

Browse Source 
🚑 Fix bug with stripe payment

See merge request witapp/aura-webapp!1
This commit is contained in:
Victor Ershov 2023-11-19 17:38:33 +00:00
commit 6234a284e0
2 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/PaymentPage/index.tsx
View File

@ -1,19 +1,19 @@
import { useState } from "react"; import { usePayment } from "@/payment";
import routes from "@/routes";
import { selectors } from "@/store";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { selectors } from "@/store";
import { usePayment } from "@/payment";
import { ApplePayBanner, GooglePayBanner } from "./methods";
import ErrorModal from "./ErrorModal";
import UserHeader from "../UserHeader";
import Title from "../Title";
import Loader from "../Loader";
import secure from "./secure.png";
import routes from "@/routes";
import "./styles.css";
import Header from "../Header"; import Header from "../Header";
import Loader from "../Loader";
import Title from "../Title";
import UserHeader from "../UserHeader";
import ErrorModal from "./ErrorModal";
import { ApplePayBanner, GooglePayBanner } from "./methods";
import { StripeButton } from "./methods/Stripe"; import { StripeButton } from "./methods/Stripe";
import secure from "./secure.png";
import "./styles.css";
// import { PayPalButton } from "./methods/PayPal/Button"; // import { PayPalButton } from "./methods/PayPal/Button";
// import { useAuth } from "@/auth"; // import { useAuth } from "@/auth";
// import { useApi } from "@/api"; // import { useApi } from "@/api";
@ -42,6 +42,12 @@ function PaymentPage(): JSX.Element {
const email = useSelector(selectors.selectEmail); const email = useSelector(selectors.selectEmail);
const activeSubPlan = useSelector(selectors.selectActiveSubPlan); const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
// Do not allow to go to this page if there is no other payment methods
useEffect(() => {
// Have only Stripe for now
navigate(routes.client.paymentStripe());
}, []);
const navigateToStripe = () => { const navigateToStripe = () => {
navigate(routes.client.paymentStripe()); navigate(routes.client.paymentStripe());
}; };

42
src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx
View File

@ -19,29 +19,39 @@ export default function CheckoutForm({ children }: ICheckoutFormProps) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [isProcessing, setIsProcessing] = useState<boolean>(false); const [isProcessing, setIsProcessing] = useState(false);
const [formReady, setFormReady] = useState(false);
const handleSubmit = async (e: React.SyntheticEvent) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (!stripe || !elements) { if (!stripe || !elements) {
return; return;
} }
setIsProcessing(true); setIsProcessing(true);
const { error } = await stripe.confirmPayment({ try {
elements, const { error } = await stripe.confirmPayment({
confirmParams: { elements,
return_url: `https://${window.location.host}/payment/result`, confirmParams: {
}, return_url: `https://${window.location.host}/payment/result`,
}); },
});
if (error) { if (error) {
setMessage(error?.message || "Oops! Something went wrong."); setMessage(error?.message || "Oops! Something went wrong.");
} else {
dispatch(actions.status.update("subscribed"));
}
} catch(error) {
console.log('error -> ', error);
setMessage("Oops! Something went wrong.");
} finally {
setIsProcessing(false);
} }
dispatch(actions.status.update("subscribed"));
setIsProcessing(false);
}; };
return ( return (
@ -51,13 +61,13 @@ export default function CheckoutForm({ children }: ICheckoutFormProps) {
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
{children ? children : null} {children ? children : null}
<PaymentElement /> <PaymentElement onReady={() => setFormReady(true)} />
<MainButton color="blue" disabled={isProcessing} id="submit"> <MainButton color="blue" disabled={isProcessing || !formReady} id="submit">
<span id="button-text"> <span id="button-text">
{isProcessing ? "Processing..." : "Pay now"} {isProcessing ? "Processing..." : "Pay now"}
</span> </span>
</MainButton> </MainButton>
<Title variant="h4">{message}</Title> <Title variant="h5" style={{color: 'red'}}>{message}</Title>
</form> </form>
); );
} }