[英]React Stripe - how do I save credit card information?
我正在尝试使用条带保存信用卡信息并与节点后端反应。 我正在使用react-stripe-js
库,因为建议安全地发送 PII 数据。 我已经设置了一个创建客户的基本节点 api,现在我想setup Intents
因为根据条带文档,这是保存卡数据以供以后使用的最佳方式。 但我不确定如何将输入发送到 api。 我怎样才能修改下面的代码来设置一个意图?
节点.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;
}
});
买家.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;
我不是 React 专家,但看起来您在这里从 Stripe.js 调用createPaymentMethod()
,这不是您需要做的。
相反,在handleSubmit()
您需要调用confirmCardSetup()
,并传入两件事:
card
元素如图所示: https : //stripe.com/docs/payments/save-and-reuse#confirm-the-setupintent
如果 SetupIntent 是使用指定的客户(您的客户)创建的,则在成功确认 SetupIntent 后,新标记的卡 PaymentMethod 将自动附加到该客户。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.