Stripe - 接受付款会引发集成错误

Question

I am working on my app made in reactjs and nodejs . I am following this guide for react web. I am using react-stripe-elements . My version for react-stripe-elements is ^3.0.1 . Here is what my front end code looks like.

checkout.js

import React, { Component } from "react";
import {
  CardNumberElement,
  CardExpiryElement,
  CardCVCElement,
  injectStripe,
} from "react-stripe-elements";
import axios from 'axios';

const createOptions = () => {
  return {
    style: {
      base: {
        fontSize: "16px",
        color: "#0382FF",
        fontFamily: "Quicksand",
        letterSpacing: "2px",
        fontSmoothing: "antialiased",
        "::placeholder": {
          color: "#40e8cb87"
        },
        padding: "10px"
      },
      invalid: {
        color: "#9e2146"
      }
    }
  };
};

class CheckoutFormIntent extends Component {
  constructor(props) {
    super(props);
    this.cardNumberRef = React.createRef();
  }

  GetClientSecret = async () => {
    await axios.get('/api/stripe-client-secret');
    return {
      clientSecret: res.data.client_secret,
    };
  }


  handleSubmit = async ev => {
    ev.preventDefault();
    const { stripe } = this.props;

    if (stripe) {
      setloader(true);
      this.GetClientSecret().then(responseJson => {
        const { clientSecret } = responseJson;
        stripe
          .confirmCardPayment(clientSecret, {
            payment_method: { cardNumber: this.cardNumberRef.current }
          })
          .then(result => {
            // Display error.message in your UI.
            if (result.error) {
              console.log("error");
            } else {
              console.log("success");
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    }
  };

  render() {
    return (
      <>
        <form onSubmit={this.handleSubmit}>
          <div>
            <div>
              <span>Card Number</span>
              <CardNumberElement
                {...createOptions()}
                ref={this.cardNumberRef}
                placeholder="1234 1234 1234 1234"
              />
            </div>
            <div className="expCvc">
              <div>
                <span>Expiry Date</span>
                <CardExpiryElement {...createOptions()} />
              </div>
              <div>
                <span>Security Code</span>
                <CardCVCElement {...createOptions()} placeholder="CVV" />
              </div>
            </div>
          </div>

          <button type="submit" disabled={isSubmitting} className="btnSubmit">
            PAY 25
          </button>
        </form>
      </>
    );
  }
}

export default injectStripe(CheckoutFormIntent);

I successfully got the client secret from the backend but when the code reached at confirmCardPayment it throws this error integration error Invalid value for confirmCardPayment: payment_method.card should be object or element. You specified: undefined integration error Invalid value for confirmCardPayment: payment_method.card should be object or element. You specified: undefined . I have gone through every document of stripe, they have implemented the cardElement which gets cardnumber , cvc and expiry instead of react-stripe-elements . I tried to use elements to collect information but no success.

Answer 1

I finally made it. Here it is how it worked.

.confirmCardPayment(clientSecret, {
        payment_method: { card: this.cardNumberRef.current._element },
      })

Answer 2

You're not passing the card Element in payment_method: { card: cardElement } as it's expecting you to per the docs .