Stripe redirectToCheckout - "TypeError: stripe.redirectToCheckout is not a function" Stripe重定向到结账页面-“TypeError：stripe.redirectToCheckout不是函数”

Question

我有一个基于Express的后端，它接受一个产品ID并返回一个Stripe会话ID，我认为可以将其与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": "[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"
    }
}

在生成sessionID后，我不确定如何在我的React前端中使用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);

请帮忙！

- ipoh

Answer 1

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

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

- cjav_dev

---

明白了！终于成功了 - const stripe = window.Stripe("pk_test_XXXXX"); - ipoh

@cjav_dev 有什么方法可以将https://js.stripe.com/v3/导入到Javascript中吗？或者，stripev3的npm模块是什么？我在npm上找不到它... :S 标准的stripe模块显示redirectToCheckout不是一个函数。 - wongz

没事了，我觉得我通过这里的文档已经弄明白了：https://stripe.com/docs/payments/checkout/accept-a-payment - wongz

尝试使用来自@stripe/stripe-js的await loadStripe（请参见此答案） - Ethan Chen