如何使用React和Node.js创建条纹订阅-DEV365 开发者社区

如何使用react和node.js

创建条纹订阅

Stripe是一个受欢迎的支付网关，允许企业在线接受付款。在本文中，我们将探讨如何使用React和Node.js创建订阅系统。订阅允许企业向客户收取反复费用（例如每月或年费）以获取其产品或服务。

在开始之前，重要的是要注意，您需要设置一个条纹帐户，并且对React和Node.js。

的基本了解

用node.js

设置后端

我们将首先使用Node.js设置后端。我们将使用Express框架构建API，并使用Stripe NPM软件包与Stripe API进行交互。

要开始，创建一个新的node.js项目并安装必要的软件包：

$ mkdir my-subscription-app $ cd my-subscription-app $ npm init -y $ npm install express stripe

接下来，在项目的根部创建一个index.js文件，并添加以下代码：

const express = require("express");
const stripe = require("stripe")("<your_stripe_secret_key>");

const app = express();
app.use(express.json());

app.post("/create-subscription", async (req, res) => {
  const customer = await stripe.customers.create({
    email: req.body.email,
    source: req.body.stripeToken,
  });

  const subscription = await stripe.subscriptions.create({
    customer: customer.id,
    items: [{ plan: req.body.plan }],
  });

  res.json({ subscription });
});

app.listen(3000,() => {
console.log("Server running on port 3000");
});

在上面的代码中，我们在/create-subscription上创建了一个端点，该端点将在向此端点提出后请求时创建一个新客户和新的条纹订阅。

2。用React

设置前端

接下来，我们将使用React设置前端。我们将使用React-Stripe元素库轻松地集成Stripe的付款表格到我们的React应用中。

要开始，创建一个新的React项目并安装必要的软件包：

$ npx create-react-app my-subscription-app-frontend
$ cd my-subscription-app-frontend
$ npm install @stripe/react-stripe-js @stripe/stripe-js react-stripe-elements

接下来，在您的React项目中创建一个SubscriptionForm.js文件，并添加以下代码：

import React, { useState } from "react";
import { useStripe, useElements, CardElement } from "@stripe/react-stripe-js";
import { createSubscription } from "./api";

const SubscriptionForm = () => {
const [error, setError] = useState(null);
const [success, setSuccess] = useState(false);
const stripe = useStripe();
const elements = useElements();

const handleSubmit = async (event) => {
event.preventDefault();
if (!stripe || !elements) {
  return;
}

const cardElement = elements.getElement(CardElement);

try {
  const { error, paymentMethod }
= await stripe.createPaymentMethod({
type: "card",
card: cardElement,
});
  if (error) {
    setError(error.message);
    return;
  }

  const { id } = paymentMethod;
  const response = await createSubscription({
    email: event.target.email.value,
    plan: event.target.plan.value,
    stripeToken: id,
  });

  if (response.error) {
    setError(response.error);
    return;
  }

  setSuccess(true);
} catch (error) {
  setError(error.message);
}
};

return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" placeholder="Email" required />
<select name="plan" required>
<option value="plan_1">Plan 1</option>
<option value="plan_2">Plan 2</option>
<option value="plan_3">Plan 3</option>
</select>
<CardElement />
{error && <p style={{ color: "red" }}>{error}</p>}
{success && <p style={{ color: "green" }}>Subscription created!</p>}
<button type="submit" disabled={!stripe}>
Subscribe
</button>
</form>
);
};

export default SubscriptionForm;

在上面的代码中，我们创建了一个表格，允许用户输入他们的电子邮件，选择计划并输入其付款信息。提交表格后，付款信息将传递给Stripe API以创建付款方式，然后传递给我们的Node.js API以创建新客户和订阅。

将所有内容放在一起

最后，我们需要通过将API调用从React App到Node.js API。

在您的React项目中创建一个新文件api.js并添加以下代码：

export const createSubscription = async (data) => {
const response = await fetch("http://localhost:3000/create-subscription", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});

return response.json();
};

在此代码中，我们使用fetch api向我们的node.js api中的/create-subscription端点提出了邮政请求。

现在，将SubscriptionForm组件导入您的React应用程序的主文件并将其渲染到屏幕。

就是这样！现在，您使用react和node.js有一个带有条纹的工作订阅系统。当然，您可以添加许多其他功能和优化，但这应该为您提供坚实的基础。

希望您发现这篇文章有帮助。如果您有任何疑问或评论，请随时接触！