我试图创建一个stripe checkout项目,但当我发现loadStripe promise无法正常工作时,我不得不更改代码window.stripe,但这也不起作用。
这是我的React代码:
import React, { useEffect, useRef } from "react";
import { isAuth } from "../helpers/auth";
import { useNavigate } from "react-router-dom";
import styles from "./Pricing.module.scss";
import ScriptTag from "react-script-tag";
const Stripe = require('stripe')
const stripe = window.Stripe('pk_xxxxxx373428')
export const Pricing = () => {
const buttonValue = useRef();
const navigate = useNavigate();
const setBtnValue = (e) => {
buttonValue.current = e.target.value;
};
const checkoutHandler = async (e) => {
const btnValue = buttonValue.current;
console.log(btnValue);
fetch("http://localhost:5000/api/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
btnValue,
}),
})
.then((result) => result.json())
.then(({ sessionID }) => stripe.redirectToCheckout({ sessionID }))
.then((result) => {
console.log(result.error.message);
});
};
return (
<div>
<ScriptTag
isHydrating={true}
type="text/javascript"
src="https://js.stripe.com/v3/"
/>
<form onSubmit = {checkoutHandler}>
<button
value= 'price_bdsahfbadshb'
type="submit"
className="btn"
name="product"
onClick={setBtnValue}
>
Upgrade Now
</button>
</div>
)
}
下面是我的后端代码:
router.post('/checkout' , async(req,res) => {
const product = req.body;
console.log(product);
}
2条答案
按热度按时间628mspwn1#
当你想重定向时,只要尝试将
<script src="https://js.stripe.com/v3/"></script>
添加到index.html
中(如果没有添加),这样你就可以使用window.Stripe
。并删除线
const Stripe = require('stripe')
如果您想了解更多信息,请查看其official documentation。
nxagd54h2#
如果你使用的是vue,react,angular等框架
复制下面的脚本到index.html