如何使用 paymentIntent 和 confirmCardPayment 集成條帶

Question

我正在嘗試將條帶集成到我的應用程序中。 到目前為止，我已經完成了以下步驟。

1. 在服務器上創建 PaymentIntent
2. 將客戶端密碼傳遞給前端

3. 使用 Stripe Elements 收集卡片信息

4. 使用 Stripe.js handleCardPayment 處理付款

在 handleCardPayment 期間，我使用 react-stripe-elements 並且文檔說要傳遞 card 元素或 cardNumber 元素。 https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment

正如您在下面看到的，我分別使用CardNumberElement, CardExpiryElement, CardCVCElement 。

   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>

        )
    }

我提交的 function 如下所示：

    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);
        }
   }

我選擇不使用卡片元素，而是使用單個部件。

雖然它成功了，但我很困惑為什么我不需要通過 cvc 或到期日？

Answer 1

傳遞的Element從您在同一條帶元素instance中Stripe elements的其他Elements中提取數據。

您可以在stripe.createToken()文檔中找到此信息。