Question

我正在使用reactjs和nodejs制作应用程序。我正在关注此guide来进行网络反应。我正在使用react-stripe-elements。我的react-stripe-elements版本是^3.0.1。这是我的前端代码的样子。

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

我成功地从后端获得了客户端机密，但是当代码到达confirmCardPayment时，它将引发此错误integration error Invalid value for confirmCardPayment: payment_method.card should be object or element. You specified: undefined。我遍历了Stripe的每个文档，他们实现了cardElement，cardnumber和cvc而不是expiry的{{1}}。我试图使用elements来收集信息，但没有成功。

Answer 1

我终于做到了。这就是它的工作方式。

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

Answer 2

您没有在card中传递payment_method: { card: cardElement }元素，因为它期望您到达per the docs。

条纹-接受付款引发集成错误

2 个答案: