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

【问题标题】：Stripe - Accept a payment throws integration errorStripe - 接受付款引发集成错误
【发布时间】：2020-02-12 05:18:45
【问题描述】：

我正在开发我在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。我浏览了每个条带文件，他们实现了cardElement，它得到cardnumber、cvc 和expiry，而不是react-stripe-elements。我尝试使用elements收集信息但没有成功。

【问题讨论】：

标签： reactjs stripe-payments

【解决方案1】：

我终于成功了。这是它的工作原理。

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

【讨论】：

【解决方案2】：

您没有传递 payment_method: { card: cardElement } 中的 card 元素，因为它希望您传递 per the docs。

【讨论】：