Stripe redirectToCheckout - “TypeError:stripe.redirectToCheckout 不是函数"； [英] Stripe redirectToCheckout - "TypeError: stripe.redirectToCheckout is not a function"

问题描述

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

 "status": "成功",会议": {"id": "cs_test_8l6LSFDpAXXXXXXX","object": "checkout.session",billing_address_collection":空，"cancel_url": "http://127.0.0.1:3000/product/undefined","client_reference_id": "5dfd96267d707d32dwe1834967532",客户":空，"customer_email": "[e-mail]",显示项目":[{金额":3999，货币:美元"，风俗": {"description": "了解任何长期承诺",图像":空，"name": "终身产品"},数量":1，类型":自定义"}],实时模式":假，语言环境":空，"mode": "支付","payment_intent": "pi_1FvUXBLs8D14wk3oUL3dwxmMOO8",payment_method_types":[卡片"],setup_intent":空，提交类型":空，订阅":空，"success_url": "http://127.0.0.1:3000/my-products/?product=5dfd96267d70723e1834967532&user=5e011031ac24131ed53d7439fb68&price=39.}}

我不确定在生成 sessionID 后如何在我的 React 前端中使用 Stripe.redirectToCheckout.以下是我尝试过但收到TypeError:stripe.redirectToCheckout 不是函数"错误.

import { Link } from "react-router-dom";从react-redux"导入{连接}；从react-stripe-elements"导入 { Elements, StripeProvider, Stripe };从../../components/MyStoreCheckout/MyStoreCheckout"导入MyStoreCheckout；从../../components/UI/Spinner/Spinner"导入微调器；从../../store/actions/index"导入*作为动作；从./Subscription.module.css"导入类；const stripe = require("stripe-client")(sk_test_XXXXXX");类订阅扩展组件{构造函数(道具){超级(道具)；}每月订阅点击处理程序 = () =>{const productId = "5dfd95e27dw4231707e1834967531";this.props.onSubscribeClicked(this.props.token, productId);stripe.redirectToCheckout({sessionId: this.props.sessionId});};使成为() {让 buttonName = "订阅";返回 (<div className={classes.User}><h1>每月订阅</h1><h3>以每月 9.99 美元的价格学习所有模块</h3><链接到=""><button onClick={this.monthlySubscribeClickHandler}>{按钮名称}</链接><h1>终身访问</h1><h3>以 34.99 美元的名义付款学习所有模块</h3><链接到=""><button onClick={this.lifetimeSubscribeClickHandler}>一次性付款</链接>

);}}const mapStateToProps = state =>{返回 {加载:state.auth.loading，错误:state.auth.error，消息:state.auth.message，状态:state.auth.status，用户 ID:state.auth.status，令牌:state.auth.token，sessionId: state.subscription.sessionId};};const mapDispatchToProps = dispatch =>{返回 {onSubscribeClicked: (token, productId) =>dispatch(actions.subscribeProduct(token, productId))};};导出默认连接(mapStateToProps，mapDispatchToProps)(订阅);

请帮忙！

解决方案

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

I have a backend in express that takes a productID and returns a Stripe sessionID which I thought could be used with Stripe.redirectToCheckout. Output from backend:

    "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"
    }
}

I am not sure how I can use Stripe.redirectToCheckout in my react frontend after the sessionID has been generated. Below is what i tried but getting "TypeError: stripe.redirectToCheckout is not a function" error.

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);

Please help!

解决方案

This is because the stripe-client library used here is outdated and doesn't import the latest Stripe.js library which includes the function you're aiming to use (redirectToCheckout). You'll need to load Stripe.js using the script tag:

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

这篇关于Stripe redirectToCheckout - “TypeError:stripe.redirectToCheckout 不是函数"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！