(index):1 Uncaught (in promise) IntegrationError: Invalid value for createPaymentMethod: card should be object or element. You specified: null.

[KonstantinKolodnitsky]

May I please reopen the issue because it just happened to me and I don't know how to solve it. I'm using the latest version of the library(6.1.2). I cannot switch to the new library yet because we are using React 15.x.

Here is the code(truncated/modified for simplicity)

The page

import React, { Component } from 'react'
import { StripeProvider, Elements } from 'react-stripe-elements'

import CheckoutForm from './CheckoutForm'

class Checkout extends Component {
    render() {
        return (
            <StripeProvider apiKey={STRIPE_KEY}>
                <div className="container">
                    <Elements>
                        <CheckoutForm />
                    </Elements>
                </div>
            </StripeProvider>
        )
    }
}

module.exports = Checkout

and the form

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {CardCVCElement, CardExpiryElement, CardNumberElement, injectStripe} from 'react-stripe-elements'

class CheckoutForm extends Component {
    createOptions(fontSize = '18px') {
        return {
            style: {
                base: {
                    fontSize,
                    color: '#424770',
                    letterSpacing: '0.025em',
                    fontFamily: 'Source Code Pro, Menlo, monospace',
                    '::placeholder': {
                        color: '#DDDDDD',
                    },
                },
                invalid: {
                    color: 'red',
                },
            },
        }
    }

    onSubmit() {
        return (e) => {
            e.preventDefault();

            const cardElement = this.props.elements.getElement('card');

            return this.props.stripe
                .createPaymentMethod({
                    type: 'card',
                    card: cardElement
                })
                .then(({paymentMethod}) => {
                    console.log('Received Stripe PaymentMethod:', paymentMethod);
                });
        }
    }

    render() {
        return (
            <div className="section">
                <form onSubmit={this.onSubmit()}>
                    <label>
                        <div>{`Card Number`}</div>
                        <CardNumberElement{...this.createOptions()}/>
                    </label>
                    <label>
                        <div>{`Expiry Date`}</div>
                        <CardExpiryElement{...this.createOptions()}/>
                    </label>
                    <label>
                        <div>{`CVC`}</div>
                        <CardCVCElement{...this.createOptions()}/>
                    </label>
                    <button type='submit'>{`Complete Purchase`}</button>
                </form>
            </div>
        )
    }
}

CheckoutForm.propTypes = {
    stripe: PropTypes.shape({
        createPaymentMethod: PropTypes.func.isRequired
    }).isRequired
};

module.exports = injectStripe(CheckoutForm)

Thank you

[hofman-stripe]

@KonstantinKolodnitsky you used the CardNumberElement but are doing getElement('card'). You need to replace that with getElement('cardNumber').

[KonstantinKolodnitsky]

@KonstantinKolodnitsky you used the CardNumberElement but are doing getElement('card'). You need to replace that with getElement('cardNumber').

Thank you, mate.