Возникли проблемы с React Stripe - PullRequest
Новая
       15

Возникли проблемы с React Stripe

0 голосов
/ 23 ноября 2018

Я пытаюсь работать с элементами React и Stripe, но следующий код выдает ошибку в строке 56.

Насколько я понимаю, даже если на странице установлена ​​карта, когдапользователь нажимает кнопку отправки, «карточка» не найдена.

Я получаю следующую ошибку: uncaught Ошибка: вы не указали тип источника или токена для создания.Мы не могли определить, какой элемент вы хотите использовать для этой операции.(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');функция

...