How to integrate stripe using paymentIntent and confirmCardPayment

Question

I am attempting to integrate stripe into my application. I have completed the following steps so far.

1. Ceate PaymentIntent on the server
2. Pass client secret to frontend

3. Use Stripe Elements to collect card info

4. Use Stripe.js handleCardPayment to process the payment

During the handleCardPayment i am using react-stripe-elements and the documentation says to pass either the card element or the cardNumber element. https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment

As you can see below im using CardNumberElement, CardExpiryElement, CardCVCElement separately.

   render() {
        console.log(this.props.paymentIntent);
        return (
            <div className="checkout-component">
                <br/>
                <label>
                    Name:
                    <input placeholder="Name" />
                </label>
                <label>
                    Email:
                    <input placeholder="Email"></input>
                </label>

                <label>
                    Card Number:
                <CardNumberElement ref={this.cardNumberRef}/>
                </label>

                <label>
                    Expiry Date:
                    <CardExpiryElement />
                </label>
                <label>
                    CVC:
                    <CardCVCElement />
                </label>

                <Grid
                    container
                    direction="column"
                    justify="center"
                    alignItems="flex-start"
                    spacing={5}
                >
                    <Grid item>
                        <div>Total: {this.props.paymentIntent.amount / 100}</div>
                    </Grid>
                    <Grid item>
                        <Button variant="contained" color="primary" onClick={this.submit}>
                            Buy
                        </Button>
                    </Grid>
                </Grid>

            </div>

        )
    }

my submit function looks like the following:

    submit = async () => {
        try {
            const data = {
                payment_method: {
                    card: this.cardNumberRef.current.getElement(),
                }
            }
            const result = await this.props.stripe.confirmCardPayment(this.props.paymentIntent.client_secret, data)
            console.log(result);
        } catch (err) {
            console.log(err);
        }
   }

I opted not to use the card element instead using the individual pieces.

Although it succeeds, i am confused why i don't need to pass the cvc or expiry date?

Answer 1

The passed Element pulls data from other Elements you’ve created in the same instance of Stripe elements.

You can find this info in the stripe.createToken() documentation.