Question

我正在尝试使用React和Stripe元素，但是以下代码在第56行给了我一个错误。

我的理解是，即使页面上装有卡，当用户单击提交按钮时，也找不到“卡”。

我收到以下错误：未捕获的错误：您未指定要创建的源或令牌的类型。我们无法推断您要为此操作使用哪个Element。（CheckoutForm.js：56）

import React, {Component} from 'react';
import {CardElement, injectStripe} from 'react-stripe-elements';
import stripepay from '../../actions/stripepay';
import './stripe.css';

class CheckoutForm extends Component {
        constructor(props) {
                super(props);
                this.submit = this.submit.bind(this);
        }

        componentDidMount() {
          var Stripe = this.props.stripe;
          var elements = Stripe.elements();

          var style = {
            base: {
              color: '#32325d',
              lineHeight: '18px',
              fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
              fontSmoothing: 'antialiased',
              fontSize: '16px',
              '::placeholder': {
                color: '#aab7c4'
              }
            },
            invalid: {
              color: '#fa755a',
              iconColor: '#fa755a'
            }
          };

          // Create an instance of the card Element.
          var card = elements.create('card', {style: style, hidePostalCode:true});

          // Add an instance of the card Element into the `card-element` <div>.
          card.mount('#card-element');

          // Handle real-time validation errors from the card Element.
          card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
              displayError.textContent = event.error.message;
            } else {
              displayError.textContent = '';
            }
          });

          // Handle form submission.
          var form = document.getElementById('payment-form');
          form.addEventListener('submit', function(event) {
            event.preventDefault();

            Stripe.createToken(card).then(function(result) {
              if (result.error) {
                // Inform the user if there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
              } else {
                // Send the token to your server.
//                stripeTokenHandler(result.token);
                console.log('Ready');
              }
            });
          });

                console.log(elements);
                console.log(card);
        }

        async submit(ev) {
          ev.preventDefault();
               let {token}  = await this.props.stripe.createToken({name: "Name"});

                stripepay(token)
                    .then(result => {
                        console.log(result);
                    })
                    .catch(error => {
                        console.log(error);
                    });
        }

        render() {
                return (
                        <div className="checkout">
                                <form id="payment-form">
                                 <div id="card-element"></div>
                                 <div id="card-errors" role="alert"></div>
                                 <button>Submit</button>
                                </form>
                        </div>
                );
        }
}
export default injectStripe(CheckoutForm);

我要做的只是进入console.log（'Ready'）;功能

使用React Stripe遇到麻烦

0 个答案: