我在express中有一个后端,该后端带有一个productID并返回一个Stripe sessionID,我认为可以与Stripe.redirectToCheckout
一起使用。
后端的输出:
"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": "jlkfsad@gmail.com",
"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"
}
}
我不确定在生成sessionID之后如何在我的反应前端中使用Stripe.redirectToCheckout
。下面是我尝试但遇到的“ TypeError: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);
请帮助!
答案 0 :(得分:0)
这是因为此处使用的speak: function (p) { // troublesome part
if(typeof p == 'object'){
console.log(`> ${p.introduction()}`);
} else {
console.warn(`Cannot talk to ${p} because ${p} is not of type person.`)
}
}
库已经过时,并且没有导入包含您要使用的功能(stripe-client
)的最新Stripe.js库。您需要使用脚本标签加载Stripe.js:
redirectToCheckout