node.js - React Stripe - 如何保存信用卡信息？

Question

我正在尝试使用 stripe 保存信用卡信息并与 Node 后端使用react。我正在使用 react-stripe-js library因为建议安全地发送 PII 数据。我已经设置了一个创建客户的基本 Node api，现在我想设置意图，因为根据 stripe docs这是保存卡数据以供以后使用的最佳方式。但我不确定如何将输入发送到 api。我如何修改下面的代码来设置意图？

node.js

 ...
    //CREATE CUSTOMER ACCOUNT
    app.post("/makeCustomer", cors(), async (req, res) => {
        let data = {
            name: req.body.name,
            email: req.body.email
        };
        try {
            const customer = await stripe.customers.create({
                name: data.name,
                email: data.email
            });
            res.send(customer);
        } catch (error) {
            console.log(err);
            res.status(400)
            res.send({ error: err })
            return;
        }
    });
    
    //CREATE SETUP INTENT
    app.post("/makeIntent", cors(), async (req, res) => {
        try {
            const intent = await stripe.setupIntents.create({
                payment_method_types: ['card'],
                customer: customer.id
            });
            res.send(intent.client_secret );
        } catch (err) {
            console.log(err);
            res.status(400)
            res.send({ error: err })
            return;
        }
    });

Buyer.js

import React, { Component } from 'react';
import { Button, Container, Col, Row, Tabs, Tab, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
//import StripeCheckout from "react-stripe-checkout";
import { Elements, ElementsConsumer } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import SaveCardForm from './SaveCardForm';

const stripePromise = loadStripe('pk_test_51HhkvNBmZZhLkiuRzN5UwsSHQQbK9y1CALJpr3l23aT7bauIx1JzCdkKlVx26FrtFkFE8QtAUZctcuUtBhRxcqti00grkBypzH');

const InjectedSaveCardForm = () => (
    <ElementsConsumer>
        {({ stripe, elements }) => (
            <SaveCardForm stripe={stripe} elements={elements} />
        )}
    </ElementsConsumer>
);


class Buyer extends Component {
    constructor() {
        super();
        this.state = {
            customerId: 'cus_INAnHdJRHAFgnG'
        }
    }

    render() {
        return (
            <Container>
                <h5 style={{ textAlign: 'center' }}>
                    As a buyer, place your information below and purchase your meal.
                </h5>
                <Tabs
                    id="controlled-tab-example"
                >
                    <Tab eventKey="creditCart" title="Credit Card">
                        <br />
                        <h5>Enter card details below:</h5>
                        <br />

                        <Row>
                            <Col>
                                <Button onClick={this.props.makeCustomer}>
                                    Create Customer
                        </Button>
                            </Col>
                            <Col>
                                <Button onClick={this.props.deleteCustomer}>
                                    Delete Customer
                        </Button>
                            </Col>
                            <Col></Col>
                        </Row>
                        <br/>
                        <Row>
                            {/**SAVE CARD HERE */}
                            <Col>
                            <Elements stripe={stripePromise}>
                                <InjectedSaveCardForm />
                            </Elements>
                            </Col>
                        </Row>
                    </Tab>
                    <Tab eventKey="ApplePay" title="Apple Pay">
                        bye
                    </Tab>
                    <Tab eventKey="AndroidPay" title="Android Pay">
                        sup
                    </Tab>
                </Tabs>
            </Container>
        );
    }
}

export default Buyer;

SaveCardForm.js

import React, { Component } from "react";
import { Stripe, CardElement, injectStripe, Elements, ElementsConsumer } from "@stripe/react-stripe-js";
import {loadStripe} from '@stripe/stripe-js';

class SaveCardForm extends Component {
    handleSubmit = async (event) => {
      event.preventDefault();
      const {stripe, elements} = this.props;
      const {error, paymentMethod} = await stripe.createPaymentMethod({
        type: 'card',
        card: elements.getElement(CardElement),
      });
    };
  
    render() {
      const {stripe} = this.props;
      return (
        <form onSubmit={this.handleSubmit}>
          <CardElement />
          <button type="submit" disabled={!stripe}>
            Save Card Data
          </button>
        </form>
      );
    }
  }

export default SaveCardForm;

Answer 1

我不是 React 专家，但看起来您正在从这里的 Stripe.js 调用 createPaymentMethod()，这不是您需要做的。

相反，在handleSubmit()上，您需要调用confirmCardSetup()，并传入两件事:

• SetupIntent client_secret
• card 元素

如下所示:https://stripe.com/docs/payments/save-and-reuse#confirm-the-setupintent

如果创建SetupIntent时指定了客户(您的客户就是您的客户)，则在成功确认SetupIntent后，新 token 化的卡PaymentMethod将自动附加到该客户。