Stripe redirectToCheckout - “TypeError: stripe.redirectToCheckout is not a function”

问题

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

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!

回答1:

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>

来源：https://stackoverflow.com/questions/59537590/stripe-redirecttocheckout-typeerror-stripe-redirecttocheckout-is-not-a-funct