将带有Stripe的信用卡号存储在MERN堆栈中

Question

我将MERN堆栈用于一个用户可以创建公司的应用程序。

一家公司有多个用户必须介绍的字段：姓名、地址、电话、电子邮件等，还有信用卡的信息，如：信用卡号(16位(、有效期(MM/YY(和CCV(XYZ(。

问题是，现在所有这些信息都存储在数据库中，这肯定是不好的。

我使用Formik进行字段验证，该应用程序具有以下结构：

反应：

import React from 'react';
import { Redirect } from 'react-router-dom';
import { Formik, Form, Field } from 'formik';
import { Input, Button, Label, Grid } from 'semantic-ui-react';
import * as Yup from 'yup';
export default class CreateCompanyForm extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
name: '',
creditCardNumber: '',
creditCardDate: '',
creditCardCCV: '',
};
}
onChange = (e, { name, value }) => {
this.setState({ [name]: value });
};
handleSubmit = values => {
// creates the company
};
render() {
const { redirectCreate } = this.state;
if (redirectCreate) {
return <Redirect to="/companies" />;
}
const initialValues = {
name: '',
creditCardNumber: '',
creditCardDate: '',
creditCardCCV: '',
};
// Yup validation rules
const requiredErrorMessage = 'This field is required';
const validationSchema = Yup.object({
name: Yup.string().required(requiredErrorMessage),
creditCardNumber: Yup.string().required(requiredErrorMessage),
creditCardDate: Yup.string().required(requiredErrorMessage),
creditCardCCV: Yup.string().required(requiredErrorMessage),
});
return (
<>
<Button form="amazing">Create company</Button>
<Formik
htmlFor="amazing"
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={values => this.handleSubmit(values)}>
{({ errors, touched }) => (
<Form id="amazing">
<div>
<Grid columns={2}>
<Grid.Column>
<Label>Company name</Label>
<Field name="name" as={Input} />
<div className="add-fridge-error">
{touched.name && errors.name ? errors.name : null}
</div>
</Grid.Column>
</Grid>
<Grid.Column>
<Label>Credit card number</Label> // credit card number
<Field
name="creditCardNumber"
as={Input}                    
/>
<div>
{touched.creditCardNumber && errors.creditCardNumber
? errors.creditCardNumber
: null}
</div>
</Grid.Column>
<Grid.Column>
<Label>Date</Label> // expiration date
<Field name="creditCardDate" as={Input} placeholder="MM/YY" />
<div>
{touched.creditCardDate && errors.creditCardDate
? errors.creditCardDate
: null}
</div>
</Grid.Column>
<Grid.Column>
<Label>CCV</Label> // CCV information
<Field name="creditCardCCV" as={Input} />
<div>
{touched.creditCardCCV && errors.creditCardCCV
? errors.creditCardCCV
: null}
</div>
</Grid.Column>
</div>
</Form>
)}
</Formik>
</>
);
}
}

Node.js:

const { Company } = require('../models');
module.exports = {
create: (req, res) => {
if (!req.body) {
res.status(400).send({
message: 'Not enough information',
});
}
const {
name,
creditCardNumber,
creditCardDate,
creditCardCCV,
} = req.body.company;

const company = new Company({
name,
creditCardNumber,
creditCardDate,
creditCardCCV,
});
company
.save()
.then(data => {
res.send(data);
})
.catch(err => {
res.status(500).send({ message: err.message });
});
},
}

Mongoose模型：

const { Schema } = mongoose;
const companySchema = new Schema(
{
name: {
type: String,
required: true,
},
creditCardNumber: {
type: String,
required: true,
},
creditCardDate: {
type: String,
required: true,
},
creditCardCCV: {
type: String,
required: true,
},
},
{ timestamps: true }
);

这段代码适用于创建一家新公司，但它将所有信息存储在数据库中。

我的问题是，是否可以在这种方法上添加Stripe功能，以避免将卡信息存储在数据库中？如果是，应如何做到这一点？

Answer 1

Stripe在客户端使用标记化过程，防止信用卡详细信息登录到您的服务器上。

您可以通过Stripe API为客户对象创建一个客户对象和一个支付源。

对于服务器端的实现，我推荐使用官方的Stripe npm包。

客户端，使用react条带签出库。