Question

我正在尝试将Stripe集成到我的应用程序中。到目前为止，我已经完成了以下步骤。

在服务器上创建Ceate PaymentIntent
将客户端机密传递给前端
使用Stripe Elements收集卡信息
使用Stripe.js handleCardPayment处理付款

在handleCardPayment期间，我正在使用react-stripe-elements，并且文档说要传递card元素或cardNumber元素。 https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment

正如您在下面看到的，im分别使用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>

        )
    }

我的提交功能如下所示：


    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从您在Elements的同一instance中创建的其他Stripe elements中提取数据。

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

如何使用paymentIntent和confirmCardPayment集成条带

1 个答案: