Stripe - принять ошибку интеграции бросков платежа

Question

Я работаю над своим приложением, сделанным в reactjs и nodejs. Я следую этому руководству для веб-реагирования. Я использую 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 для сбора информации, но безуспешно.

Answer 1

Я наконец сделал это. Вот как это работает.

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

Answer 2

Вы не передаете элемент card в payment_method: { card: cardElement }, поскольку он ожидает от вас по документам .