react和nodejs_如何使用NodeJS和React为SaaS构建Stripe Billing入门流程

react和nodejs

你会学什么？ (What will you learn?)

In this article we will be going over the steps needed to integrate Stripe Billing with an onboarding flow using NodeJS and React. In the guide we will be:

在本文中，我们将介绍使用NodeJS和React将Stripe Billing与入职流程集成所需的步骤。 在指南中，我们将是：

• Configuring a Stripe account with a pricing strategy we will be using in this example
  在本示例中将使用定价策略配置Stripe帐户
• Setting up a Route in ExpressJS which will expose the pricing strategy to the front-end
  在ExpressJS中设置路线，这将向前端展示定价策略

• Setting up a React front-end which will handle the onboarding flow, utilizing Stripe Elements for checkout

  利用Stripe Elements进行结账，设置一个可处理入职流程的React前端

In this article we assume you already have a working knowledge of Node and ExpressJS as well as the steps needed to create a React app. For some good resources on how to learn these check out:

在本文中，我们假设您已经具备Node和ExpressJS的使用知识，以及创建React应用程序所需的步骤。 有关如何学习这些内容的一些好资源，请查看：

• ExpressJS on FreeCodeCamp

  FreeCodeCamp上的ExpressJS

• React on FreeCodeCamp

  在FreeCodeCamp上做出React

在Stripe中定义您的产品和计划 (Define your Products and Plans in Stripe)

The first step is to create some products and plans in your Stripe account. If you haven't registered for Stripe you can do so here.

第一步是在Stripe帐户中创建一些产品和计划。 如果您尚未注册Stripe，可以在这里进行注册 。

For this example we are going to create a two tiered pricing strategy, with a Basic $50/month tier and a Premium at $300/month tier defined as separate Products in Stripe.

在此示例中，我们将创建一个两级定价策略，将Basic $ 50 / month层和Premium $ 300 / month层定义为Stripe中的单独产品。

If you want this automated for your specific Stripe account, feel free to edit the secret key in this RunKit to your Stripe test key.

如果您希望针对特定的Stripe帐户自动执行此操作，请随时将此RunKit中的密钥编辑为Stripe测试密钥。

此代码将在Stripe中创建产品和计划 (This code will create products and plans in Stripe)

const STRIPE_TEST_SECRET_KEY = "sk_test_6pewDqcB8xcSPKbV1NJxsew800veCmG5zJ"//your Stripe key here
const stripe = require('stripe')(STRIPE_TEST_SECRET_KEY);

const basicPlan = await stripe.plans.create({
    amount: 5000, 
    interval: "month", 
    product: {
        name : "AcmeBot Basic"
    },
    currency: "USD"
})
const premiumPlan = await stripe.plans.create({
    amount: 30000, 
    interval: "month", 
    product: {
        name : "AcmeBot Premium"
    },
    currency: "USD"
})
console.log(`Stripe Plans that were Created:`);
console.log(`AcmeBot Basic, Plan ID: ${basicPlan.id}, Amount: $${basicPlan.amount/100}/${basicPlan.interval}, Product ID: ${basicPlan.product}`)
console.log(`AcmeBot Premium, Plan ID: ${premiumPlan.id}, Amount: $${premiumPlan.amount/100}/${premiumPlan.interval}, Product ID: ${premiumPlan.product}`)

创建用于获取计划的REST端点 (Create a REST endpoint for getting Plans)

After you have your Stripe configured, we can define a new REST endpoint in Express that our React can consume in order to render an onboarding flow using live Stripe data.

在配置了Stripe之后，我们可以在Express中定义一个新的REST端点，React可以使用它，以便使用实时Stripe数据呈现入职流程。

In order to render a pricing page, the front-end will need to know the plans in your Stripe account, so our code will be making an API call to Stripe using the stripe module. Here is what an example ExpressJS middleware could look like which does this.

为了呈现定价页面，前端将需要了解您的Stripe帐户中的计划，因此我们的代码将使用stripe模块对Stripe进行API调用。 这是一个示例ExpressJS中间件的样子。

ExpressJS中间件，用于获取所有Stripe计划 (ExpressJS middleware for getting all Stripe plans)

const STRIPE_TEST_SECRET_KEY = "rk_test_3U9s3aPLquPOczvc4FVRQKdo00AhMZlMIE"; //your Stripe key here
const stripe = require('stripe')(STRIPE_TEST_SECRET_KEY);


//express middleware
async function getAllPlans(req, res, next){

    //get all plans, expand keyword will also return the contents of the product this plan is attached to
    const plans = await stripe.plans.list({expand: ["data.product"]});
    res.json(plans);
}


//see it in action
const req = {}; // req not used
const res = {
    json : function(payload){
        console.log("All Stripe Plans:")
        for(let plan of payload.data){
            console.log(`Plan ${plan.id}, Name: ${plan.product.name}, Amount: ${plan.amount/100}/${plan.interval}`)
        }
        console.log("payload:", payload);
}
};
const next = function(){};
await getAllPlans(req, res, next)

After this step is done, we can do our front-end in React in order to display a pricing page and a checkout flow

完成此步骤后，我们可以在React中进行前端操作以显示定价页面和结帐流程

创建一个组件以显示价格 (Create a Component to display pricing)

In order to create a pricing page, we'll need to define a component which renders the plan data that is gotten from the REST API we defined above.

为了创建定价页面，我们需要定义一个组件，该组件呈现从上面定义的REST API获取的计划数据。

The component will look something like this. It'll loop through all the plans and render the relevant information such as price, name, and interval. It will also display a checkout page (which we will define in the next step) when the user presses "Get Started".

该组件将如下所示。 它将遍历所有计划并呈现相关信息，例如价格，名称和间隔。 当用户按下“入门”时，它还将显示一个结帐页面(我们将在下一步中定义)。

function Pricing({pricingPlans, onPlanSelect}){
  return <div>{pricingPlans.data.map(({id, interval, amount, product: {name}})=>{
      return <div>
        <h1>{name}</h1>
        <h4>${amount/100}/{interval}</h4>
        <button onClick={onPlanSelect(id)}>Get Started</button>
      </div>
    })}</div>
}

You see this code in action below in the CodePen. Note, for this CodePen we don't make an API call and just statically define the payload. In your own implementation you should be pulling the payload directly from your API.

您可以在下面的CodePen中看到此代码的运行情况。 请注意，对于此CodePen，我们不进行API调用，而只是静态定义有效负载。 在您自己的实现中，您应该直接从API中提取有效负载。

创建结帐流程 (Create a Checkout Flow)

For the last step, we will be creating a checkout process using Stripe Elements and tying it back to the pricing page we just set up.

对于最后一步，我们将使用Stripe Elements创建结帐流程，并将其绑定到我们刚刚设置的定价页面。

In the previous example we created a callback function which would be triggered when someone picks a plan. We now need to tie that to Stripe so when they pick a plan, they are prompted with a checkout page. We do that using React Stripe Elements, the React wrapper around the Stripe Elements library.

在前面的示例中，我们创建了一个回调函数，当有人选择计划时会触发该函数。 现在，我们需要将其绑定到Stripe，这样当他们选择计划时，将通过结帐页面提示他们。 我们使用React Stripe Elements来实现这一点，这是Stripe Elements库周围的React包装器。

You can see this in action below:

您可以在下面看到它的作用：

Now that we have a basic checkout flow, we will need to process the token generated by the form and create a subscription for the new customer, giving us a new subscription. Alternatively, you could, instead of using Stripe Elements, use Stripe Checkout which automatically creates subscriptions (but is not as flexible).

现在我们有了基本的结帐流程，我们将需要处理表单生成的令牌并为新客户创建订阅 ，从而为我们提供新的订阅。 或者，您可以代替使用Stripe Elements，而使用Stripe Checkout来自动创建订阅(但不那么灵活)。

This wraps up the tutorial on creating a checkout flow with Stripe, React, and Node

这总结了有关使用Stripe，React和Node创建结帐流程的教程

接下来是什么？ (What comes next?)

Thanks for reading! This will get you started with billing, but we've only touched the tip of the iceberg of building a billing system with Stripe with this post. More advanced topics such as coupons, advanced pricing strategies, and different pricing intervals (monthly/annual for example) requires much more development to support.

谢谢阅读！ 这将使您开始进行计费，但是本文仅涉及使用Stripe构建计费系统的冰山一角。 诸如优惠券，高级定价策略以及不同的定价间隔(例如，每月/每年)等更高级的主题需要更多的发展来支持。

If you are looking to get great looking & mobile friendly pricing pages, checkout forms, and more without having to build it all yourself, check out Servicebot - A drop-in UI toolkit built on top of Stripe, you just paste a code snippet and get a fully featured front-end powered by Stripe.

如果您希望获得美观且适合移动设备使用的定价页面，结帐表格等，而不必自己构建，请查看Servicebot-基于Stripe的内置UI工具箱，只需粘贴代码段并获得由Stripe支持的功能齐全的前端。

翻译自: https://www.freecodecamp.org/news/how-to-build-a-stripe-billing-onboarding-flow-for-your-saas-using-nodejs-and-react/

react和nodejs