Stripe redirectToCheckout - “TypeError：stripe.redirectToCheckout 不是函数”

Question

我在 express 中有一个后端，它接受一个 productID 并返回一个我认为可以与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"
    }
}

我不确定Stripe.redirectToCheckout在生成 sessionID 后如何在我的 React 前端中使用。以下是我尝试过但收到“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);

请帮忙！

Answer 1

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

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