条纹重定向到结帐 - "TypeError: stripe.redirectToCheckout is not a function"

Question

我在 express 中有一个后端，它接受一个 productID 并返回一个我认为可以与Stripe.redirectToCheckout一起使用的 Stripe sessionID。 后端输出：

"status": "success",
"session": {
"id": "cs_test_8l6LSFDpAXXXXXXX",
"object": "checkout.session",
"billing_address_collection": null,
"cancel_url": "http://127.0.0.1:3000/product/undefined",
"client_reference_id": "5dfd96267d707d32dwe1834967532",
"customer": null,
"customer_email": "[e-mail]",
"display_items": [
{
"amount": 3999,
"currency": "usd",
"custom": {
"description": "Learn any long term commitment",
"images": null,
"name": "lifetime Product"
},
"quantity": 1,
"type": "custom"
}
],
"livemode": false,
"locale": null,
"mode": "payment",
"payment_intent": "pi_1FvUXBLs8D14wk3oUL3dwxmMOO8",
"payment_method_types": [
"card"
],
"setup_intent": null,
"submit_type": null,
"subscription": null,
"success_url": "http://127.0.0.1:3000/my-products/?product=5dfd96267d70723e1834967532&user=5e011031ac24131ed53d7439fb68&price=39.99"
}
}

我不确定在生成会话 ID 后如何在我的反应前端中使用Stripe.redirectToCheckout。以下是我尝试的，但收到"类型错误：stripe.redirectToCheckout 不是一个函数"错误。

import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { Elements, StripeProvider, Stripe } from "react-stripe-elements";
import MyStoreCheckout from "../../components/MyStoreCheckout/MyStoreCheckout";
import Spinner from "../../components/UI/Spinner/Spinner";
import * as actions from "../../store/actions/index";
import classes from "./Subscription.module.css";
const stripe = require("stripe-client")(
"sk_test_XXXXXX"
);
class Subscription extends Component {
constructor(props) {
super(props);
}
monthlySubscribeClickHandler = () => {
const productId = "5dfd95e27dw4231707e1834967531";
this.props.onSubscribeClicked(this.props.token, productId);
stripe.redirectToCheckout({
sessionId: this.props.sessionId
});
};
render() {
let buttonName = "SUBSCRIBE";
return (
<div className={classes.User}>
<h1>Monthly Subscription</h1>
<h3>Learn all modules for $9.99 per month</h3>
<Link to="">
<button onClick={this.monthlySubscribeClickHandler}>
{buttonName}
</button>
</Link>
<h1>Lifetime Access</h1>
<h3>Learn all modules for a nominal payment of $34.99</h3>
<Link to="">
<button onClick={this.lifetimeSubscribeClickHandler}>
Make one-time payment
</button>
</Link>
</div>
);
}
}
const mapStateToProps = state => {
return {
loading: state.auth.loading,
error: state.auth.error,
message: state.auth.message,
status: state.auth.status,
userId: state.auth.status,
token: state.auth.token,
sessionId: state.subscription.sessionId
};
};
const mapDispatchToProps = dispatch => {
return {
onSubscribeClicked: (token, productId) =>
dispatch(actions.subscribeProduct(token, productId))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Subscription);

请帮忙！

Answer 1

这是因为这里使用的stripe-client库已经过时，并且没有导入最新的 Stripe.js 库，该库包含您打算使用的功能(redirectToCheckout(。您需要使用脚本标签加载 Stripe.js：

<script src="https://js.stripe.com/v3/"></script>