条带redirectToCheckout-“ TypeError:stripe.redirectToCheckout不是函数”

时间:2019-12-30 22:39:23

标签: reactjs stripe-payments

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

请帮助!

1 个答案:

答案 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