如何在Back4App中集成Stripe API和云函数

13min
使用云函数进行Stripe集成
介绍
在本指南中，我们将向您展示如何将Back4App中的托管后端与Stripe API集成。在Back4App上构建它的最佳架构选择是使用一个非常强大的功能，称为 云函数. 一旦您完成了与Stripe的云函数集成，您将能够在所有前端项目（Web、iOS、Android）中使用此集成。本指南提供了一个完整的Stripe集成示例。
先决条件
要完成本教程，您需要：


在Back4App上创建的应用程序。
遵循 创建新应用教程 以了解如何在Back4App上创建应用程序。

在 Stripe 上创建的账户。
目标
在Web项目中使用Back4App云函数集成Stripe。
什么是Stripe？
﻿Stripe 是一家在25个国家运营的科技公司，允许个人和企业通过互联网接受支付。Stripe专注于提供在线支付系统所需的技术、欺诈预防和银行基础设施。
本教程将引导您完成创建函数并将Stripe API集成到您的Parse Server中的Web应用程序的步骤。
更具体地说，在本指南中，我们将创建一个环境，用户可以在其中登录或注册，注册信用卡，并通过Stripe Payments生成示例购买。此外，您将被指导如何设置整个过程以及测试与服务器和Stripe API的连接是否正常工作。
- 创建一个Stripe账户
访问Stripe并点击注册以 创建一个账户。在那里，您只需提供您的个人信息以及您的账户所属国家。
接下来，验证您的Stripe账户（您将收到一封包含Stripe验证链接的电子邮件）。点击该链接，然后按照步骤确认您的Stripe电子邮件地址。
- 设置您的数据库类
在为步骤1配置Stripe环境后，前往您的Back4App应用仪表板，以便设置您的数据库。此步骤不是强制性的，因为当云函数尝试创建新对象时，Parse会自动创建类，但我们将逐步讲解将创建哪些字段以及原因。
将有两个类来保存您的应用程序与Stripe相关的数据： PaymentMethod 和 Payment:
以下是课程的布局方式：
﻿支付方式﻿
﻿类型（字符串）：其值将始终为“card”；
﻿卡片（对象）：将保存有关注册卡的完整Stripe数据；
﻿stripeID（字符串）：引用此支付方式在Stripe后端的ID；
﻿用户（指向Parse.User的指针）：直接引用此支付方式所属的用户。
﻿支付﻿
﻿数据（对象）：将保存有关支付的完整Stripe数据；
﻿用户（指向Parse.User的指针）：直接引用此支付所属的用户。
我们还将在您的应用程序默认 用户 类中添加两个新的 字符串 值列，分别称为 setupSecret 和 customerId，将包含与 用户 相关的Stripe ID。
- 实现云代码
让我们在应用中配置 云代码函数，安装Stripe模块并部署代码。
如果你想更好地理解云代码环境，请查看 这份指南. 
1 - 获取你的Stripe密钥
现在，打开你的Stripe仪表板，导航到顶部的 开发者 页面，然后在左侧菜单中选择 API密钥。在该部分，你将能够看到你的 可发布密钥 和你的 秘密密钥。
﻿
请记下这些密钥，因为您稍后会需要它们。
2 - 云代码文件
在您的计算机上，创建以下文件，这些文件将负责安装模块并将您的云代码函数添加到 Back4App。
JSON
 {
   "dependencies": {
     "stripe": "*"
   }
 }
 {
   "dependencies": {
     "stripe": "*"
   }
 }
﻿
将以下代码添加到新文件中，并不要忘记在顶部粘贴您的 Stripe 秘密密钥。
main.js
 const STRIPE_SECRET_KEY =
   "YOUR_STRIPE_SECRET_KEY";
 const stripe = require("stripe")(STRIPE_SECRET_KEY);
4
 // Stripe needs an unique customer id to create payments, so after
 // signing up, this function should be called to do this operation
 Parse.Cloud.define("createStripeCustomer", async (request) => {
   // Get Parse.User object
   const userQuery = new Parse.Query(Parse.User);
  userQuery.equalTo("objectId", request.params.userId);
  let user = await userQuery.first();

  const customer = await stripe.customers.create({ email: user.get("email") });
  // Creates an stripe setupIntent, that will enable the stripe lib to perform
  // a singel operation related to payments
  const intent = await stripe.setupIntents.create({
    customer: customer.id,
  });
  // Set and save the stripe ids to the Parse.User object
  user.set({
    customerId: customer.id,
    setupSecret: intent.client_secret,
  });
  return await user.save(null, { useMasterKey: true });
});
26
// Creates new payment method for a registered customer
Parse.Cloud.define("addNewPaymentMethod", async (request) => {
  // Get Parse.User object
  const userQuery = new Parse.Query(Parse.User);
  userQuery.equalTo("objectId", request.params.userId);
  let user = await userQuery.first();
33
  // Retrieve complete stripe payment method by its id
  const stripePaymentMethod = await stripe.paymentMethods.retrieve(
    request.params.paymentMethodId
  );
38
  // Create a new SetupIntent so the customer can add a new method next time.
    const intent = await stripe.setupIntents.create({
    customer: `${stripePaymentMethod.customer}`,
  });
  user.set("setupSecret", intent.client_secret);
  user = await user.save(null, { useMasterKey: true });
45
  // Creates a new Parse object in the PaymentMethod class
  let PaymentMethod = new Parse.Object("PaymentMethod");
  PaymentMethod.set({
    user: user,
    type: "card",
    stripeId: stripePaymentMethod.id,
    card: stripePaymentMethod.card,
  });
  PaymentMethod.save();
  return true;
});
57
// Creates a new payment using a valid payment method
Parse.Cloud.define("createNewPayment", async (request) => {
  // Get Parse.User object
  const userQuery = new Parse.Query(Parse.User);
  userQuery.equalTo("objectId", request.params.userId);
  let user = await userQuery.first();
64
  const { amount, currency, payment_method } = request.params.paymentData;
66
  // Look up the Stripe customer id.
  const customer = user.get("customerId");
69
  // Create a charge using an unique idempotency key
  // to protect against double charges.
  const idempotencyKey = new Date().getTime();
  const payment = await stripe.paymentIntents.create(
    {
      amount,
      currency,
      customer,
      payment_method,
      off_session: false,
      confirm: true,
      confirmation_method: "manual",
    },
    { idempotencyKey }
  );
  // If the result is successful, write it back to the database.
  let Payment = new Parse.Object("Payment");
  Payment.set({
    user: user,
    data: payment,
  });
  await Payment.save();
92
  return true;
});

 const STRIPE_SECRET_KEY =
   "YOUR_STRIPE_SECRET_KEY";
 const stripe = require("stripe")(STRIPE_SECRET_KEY);
4
 // Stripe needs an unique customer id to create payments, so after
 // signing up, this function should be called to do this operation
 Parse.Cloud.define("createStripeCustomer", async (request) => {
   // Get Parse.User object
   const userQuery = new Parse.Query(Parse.User);
  userQuery.equalTo("objectId", request.params.userId);
  let user = await userQuery.first();

  const customer = await stripe.customers.create({ email: user.get("email") });
  // Creates an stripe setupIntent, that will enable the stripe lib to perform
  // a singel operation related to payments
  const intent = await stripe.setupIntents.create({
    customer: customer.id,
  });
  // Set and save the stripe ids to the Parse.User object
  user.set({
    customerId: customer.id,
    setupSecret: intent.client_secret,
  });
  return await user.save(null, { useMasterKey: true });
});
26
// Creates new payment method for a registered customer
Parse.Cloud.define("addNewPaymentMethod", async (request) => {
  // Get Parse.User object
  const userQuery = new Parse.Query(Parse.User);
  userQuery.equalTo("objectId", request.params.userId);
  let user = await userQuery.first();
33
  // Retrieve complete stripe payment method by its id
  const stripePaymentMethod = await stripe.paymentMethods.retrieve(
    request.params.paymentMethodId
  );
38
  // Create a new SetupIntent so the customer can add a new method next time.
    const intent = await stripe.setupIntents.create({
    customer: `${stripePaymentMethod.customer}`,
  });
  user.set("setupSecret", intent.client_secret);
  user = await user.save(null, { useMasterKey: true });
45
  // Creates a new Parse object in the PaymentMethod class
  let PaymentMethod = new Parse.Object("PaymentMethod");
  PaymentMethod.set({
    user: user,
    type: "card",
    stripeId: stripePaymentMethod.id,
    card: stripePaymentMethod.card,
  });
  PaymentMethod.save();
  return true;
});
57
// Creates a new payment using a valid payment method
Parse.Cloud.define("createNewPayment", async (request) => {
  // Get Parse.User object
  const userQuery = new Parse.Query(Parse.User);
  userQuery.equalTo("objectId", request.params.userId);
  let user = await userQuery.first();
64
  const { amount, currency, payment_method } = request.params.paymentData;
66
  // Look up the Stripe customer id.
  const customer = user.get("customerId");
69
  // Create a charge using an unique idempotency key
  // to protect against double charges.
  const idempotencyKey = new Date().getTime();
  const payment = await stripe.paymentIntents.create(
    {
      amount,
      currency,
      customer,
      payment_method,
      off_session: false,
      confirm: true,
      confirmation_method: "manual",
    },
    { idempotencyKey }
  );
  // If the result is successful, write it back to the database.
  let Payment = new Parse.Object("Payment");
  Payment.set({
    user: user,
    data: payment,
  });
  await Payment.save();
92
  return true;
});
﻿
- 将函数上传到云代码
访问 Back4App 网站，登录后找到您的应用。之后，点击 仪表板 链接，您将进入如下所示的页面。要部署您的云代码，请点击 + 添加 按钮，找到您在上一步中创建的 main.js 和 package.json 文件，然后点击 部署 按钮。
﻿
您刚刚配置了可以在任何平台上使用的云代码函数！查看 部署和调用函数 指南以了解如何调用它们。在下一步中，您将处理一个调用它们的 JavaScript 项目。
- 将 JavaScript 应用与云代码集成
现在您将看到一个简单的 HTML 页面示例，包含 JavaScript，具有三个主要功能：在 Parse 上登录或注册用户，创建有效的支付方式（信用卡），以及创建新的支付，向这些属于用户的方式收费。
继续在您的计算机上创建一个新目录，并在其中创建一个新的 HTML 文件，文件内容如下：
index.html
 <!DOCTYPE html>
 <html lang="en">
3
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Back4App Stripe Payments</title>
     <link rel="stylesheet" href="app.css">
 </head>
10
<body>
    <header class="header">
        <img class="header_logo"
            src="https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png" alt="">
        <p class="header_text_bold">React on Back4App</p>
        <p class="header_text">Back4App Stripe Payments</p>
    </header>
    <section id="auth">
        <div class="container">
            <div class="form_wrapper">
                <form id="auth-signin-form">
                    <h2 class="form_heading">Sign In</h2>
                    <input class="form_input" type="email" name="email" placeholder="Email" required />
                    <input class="form_input" type="password" name="password" placeholder="Password" required />
                    <button class="form_button" type="submit">
                        Sign in
                    </button>
                    <a class="form_hint" id="signup-toggle" href="#">Don't have an account yet? Sign up instead.</a>
                </form>
                <form id="auth-signup-form" hidden>
                    <h2 class="form_heading">Sign Up</h2>
                    <input class="form_input" type="email" name="email" placeholder="Email" required />
                    <input class="form_input" type="password" name="password" placeholder="Password" required />
                    <button class="form_button" type="submit">
                        Sign up
                    </button>
                    <a class="form_hint" id="signin-toggle" href="#">Already have an account? Sign in instead.</a>
                </form>
            </div>
        </div>
    </section>
    <section id="content" style="display: none;">
        <div class="container">
            <div>
                <h2 class="form_heading">Add new payment method</h2>
                <p>
                    Use any of the
                    <a href="https://stripe.com/docs/testing#international-cards" target="_blank">Stripe test cards</a>
                    for this demo!
                </p>
                <form class="form" id="payment-method-form">
                    <input class="form_input" type="text" name="name" placeholder="Cardholder name" required />
                    <div class="card_element_wrapper">
                        <div id="card-element"></div>
                    </div>
                    <button class="form_button">Save Card</button>
                </form>
            </div>
            <div>
                <h2 class="form_heading">Create new payment</h2>
                <form class="form" id="payment-form">
                    <select class="form_input" name="payment-method" required>
                        <option disabled selected>Card (payment method):</option>
                    </select>
                    <div>
                        <input class="form_input" name="amount" type="number" min="1" max="99999999"
                            placeholder="Amount" required />
                        <select class="form_input" name="currency">
                            <option disabled selected>Currency:</option>
                            <option value="usd">USD</option>
                            <option value="brl">BRL</option>
                            <option value="eur">EUR</option>
                        </select>
                    </div>
                    <button class="form_button">Charge selected card</button>
                </form>
            </div>
            <div class="form">
                <h2 class="form_heading">Payments</h2>
                <ul id="payments-list"></ul>
            </div>
            <button type="button" id="signout">
                Sign out
            </button>
        </div>
    </section>
    <script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
    <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
91
</html>
 <!DOCTYPE html>
 <html lang="en">
3
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Back4App Stripe Payments</title>
     <link rel="stylesheet" href="app.css">
 </head>
10
<body>
    <header class="header">
        <img class="header_logo"
            src="https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png" alt="">
        <p class="header_text_bold">React on Back4App</p>
        <p class="header_text">Back4App Stripe Payments</p>
    </header>
    <section id="auth">
        <div class="container">
            <div class="form_wrapper">
                <form id="auth-signin-form">
                    <h2 class="form_heading">Sign In</h2>
                    <input class="form_input" type="email" name="email" placeholder="Email" required />
                    <input class="form_input" type="password" name="password" placeholder="Password" required />
                    <button class="form_button" type="submit">
                        Sign in
                    </button>
                    <a class="form_hint" id="signup-toggle" href="#">Don't have an account yet? Sign up instead.</a>
                </form>
                <form id="auth-signup-form" hidden>
                    <h2 class="form_heading">Sign Up</h2>
                    <input class="form_input" type="email" name="email" placeholder="Email" required />
                    <input class="form_input" type="password" name="password" placeholder="Password" required />
                    <button class="form_button" type="submit">
                        Sign up
                    </button>
                    <a class="form_hint" id="signin-toggle" href="#">Already have an account? Sign in instead.</a>
                </form>
            </div>
        </div>
    </section>
    <section id="content" style="display: none;">
        <div class="container">
            <div>
                <h2 class="form_heading">Add new payment method</h2>
                <p>
                    Use any of the
                    <a href="https://stripe.com/docs/testing#international-cards" target="_blank">Stripe test cards</a>
                    for this demo!
                </p>
                <form class="form" id="payment-method-form">
                    <input class="form_input" type="text" name="name" placeholder="Cardholder name" required />
                    <div class="card_element_wrapper">
                        <div id="card-element"></div>
                    </div>
                    <button class="form_button">Save Card</button>
                </form>
            </div>
            <div>
                <h2 class="form_heading">Create new payment</h2>
                <form class="form" id="payment-form">
                    <select class="form_input" name="payment-method" required>
                        <option disabled selected>Card (payment method):</option>
                    </select>
                    <div>
                        <input class="form_input" name="amount" type="number" min="1" max="99999999"
                            placeholder="Amount" required />
                        <select class="form_input" name="currency">
                            <option disabled selected>Currency:</option>
                            <option value="usd">USD</option>
                            <option value="brl">BRL</option>
                            <option value="eur">EUR</option>
                        </select>
                    </div>
                    <button class="form_button">Charge selected card</button>
                </form>
            </div>
            <div class="form">
                <h2 class="form_heading">Payments</h2>
                <ul id="payments-list"></ul>
            </div>
            <button type="button" id="signout">
                Sign out
            </button>
        </div>
    </section>
    <script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
    <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
91
</html>
﻿
在此文件中，您将找到两个主要部分，第一个是身份验证部分，如果用户尚未登录，将默认呈现该部分。登录后，将显示支付部分，其中包含负责在Stripe上创建数据的所有表单，并与Back4App上的Cloud Code函数进行通信。
我们现在需要创建一个包含将所有内容结合在一起的代码的JavaScript函数，称为 index.js:
index.js
 // Define and initialize Parse and Stripe libs
 const PARSE_APP_ID = "YOUR_PARSE_ID";
 const PARSE_JS_KEY = "YOUR_PARSE_JS_KEY";
 Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
 Parse.serverURL = "https://parseapi.back4app.com/";
6
 const STRIPE_PUBLISHABLE_KEY = "YOUR_STRIPE_PUBLISHABLE_KEY";
 const stripe = Stripe(STRIPE_PUBLISHABLE_KEY);
9
// Holds the currentUser complete Parse object
let currentUser = null;
const setCompleteCurrentUser = async () => {
  // Called when user is already signed in, completing
  // the currentUser object with the full one
  currentUser = await new Parse.Query(Parse.User)
    .equalTo("objectId", Parse.User.current().id)
    .first();
  // Retrieve and render user cards and payments
  retrieveCurrentUserPaymentMethods();
  retrieveCurrentUserPayments();
};
22
const retrieveCurrentUserPaymentMethods = async () => {
  // Query and render user PaymentMethods
  const PMQuery = new Parse.Query("PaymentMethod");
  PMQuery.equalTo("user", Parse.User.current());
  paymentMethods = await PMQuery.find();
  renderPaymentMethodOptions(paymentMethods);
};
30
const retrieveCurrentUserPayments = async () => {
  // Query and render user Payments
  const paymentsQuery = new Parse.Query("Payment");
  paymentsQuery.equalTo("user", Parse.User.current());
  payments = await paymentsQuery.find();
  renderPayments(payments);
};

const renderPaymentMethodOptions = async (paymentMethods) => {
  for (let paymentMethod of paymentMethods) {
    const optionId = `card-${paymentMethod.get("stripeId")}`;
    let optionElement = document.getElementById(optionId);

    // Add a new option if one doesn't exist yet.
    if (!optionElement) {
      optionElement = document.createElement("option");
      optionElement.id = optionId;
      document
        .querySelector("select[name=payment-method]")
        .appendChild(optionElement);
    }

    optionElement.value = paymentMethod.get("stripeId");
    optionElement.text = `${paymentMethod.get("card").brand} •••• ${
      paymentMethod.get("card").last4
    } | Expires ${paymentMethod.get("card").exp_month}/${
      paymentMethod.get("card").exp_year
    }`;
  }
};
61
const renderPayments = (payments) => {
  for (let payment of payments) {
    let liElement = document.getElementById(`payment-${payment.id}`);
    if (!liElement) {
      liElement = document.createElement("li");
      liElement.id = `payment-${payment.id}`;
    }
69
    const paymentData = payment.get("data");
    let content = "";
    if (
      paymentData.status === "new" ||
      paymentData.status === "requires_confirmation"
    ) {
      content = `Creating Payment for ${formatAmount(
        paymentData.amount,
        paymentData.currency
      )}`;
    } else if (paymentData.status === "succeeded") {
      const card = paymentData.charges.data[0].payment_method_details.card;
      content = `Payment for ${formatAmount(
        paymentData.amount,
        paymentData.currency
      )} on ${card.brand} card •••• ${card.last4} ${paymentData.status}!`;
    } else {
      content = `Payment for ${formatAmount(
        paymentData.amount,
        paymentData.currency
      )} ${paymentData.status}`;
    }
    liElement.innerText = content;
    document.querySelector("#payments-list").appendChild(liElement);
  }
};
96
// Checks if user is already signed in on Parse
if (Parse.User.current() !== null) {
  setCompleteCurrentUser();
 // Hide auth screen and show payment fields
 document.getElementById("auth").style.display = "none";
 document.getElementById("content").style.display = "block";
}
104
// Toggle signin and signup forms
document
 .querySelector("#signup-toggle")
 .addEventListener("click", async (_event) => {
   document.getElementById("auth-signin-form").style.display = "none";
   document.getElementById("auth-signup-form").style.display = "block";
   clearAuthFormFields();
 });
document
 .querySelector("#signin-toggle")
 .addEventListener("click", async (_event) => {
   document.getElementById("auth-signup-form").style.display = "none";
   document.getElementById("auth-signin-form").style.display = "block";
   clearAuthFormFields();
 });

// Clear auth form fields
const clearAuthFormFields = () => {
 document
   .querySelector("#auth")
   .querySelectorAll("input")
   .forEach((input) => (input.value = ""));
};

// Handle auth forms
document
 .querySelector("#auth-signin-form")
 .addEventListener("submit", async (event) => {
   event.preventDefault();
   toggleAllButtonsEnabled(false);
   const form = new FormData(event.target);
   const email = form.get("email");
   const password = form.get("password");
138
  // Try to signin on Parse
   try {
     let user = await Parse.User.logIn(email, password);
     if (user !== null) {
       currentUser = user;
       // Hide auth screen and show payment fields
       document.getElementById("auth").style.display = "none";
       document.getElementById("content").style.display = "block";
       clearAuthFormFields();
     }
   } catch (error) {
     alert(error);
   }
   toggleAllButtonsEnabled(true);
 });

document
 .querySelector("#auth-signup-form")
 .addEventListener("submit", async (event) => {
   event.preventDefault();
   toggleAllButtonsEnabled(false);
   const form = new FormData(event.target);
   const email = form.get("email");
   const password = form.get("password");
163
   // Try to signup on Parse
   try {
     let user = await Parse.User.signUp(email, password, { email: email });
     // Cloud code to create Stripe user and intent
     user = await Parse.Cloud.run("createStripeCustomer", { userId: user.id });
     if (user !== null) {
       currentUser = user;
       // Hide auth screen and show payment fields
       document.getElementById("auth").style.display = "none";
       document.getElementById("content").style.display = "block";
       clearAuthFormFields();
     }
   } catch (error) {
     alert(error);
   }
   toggleAllButtonsEnabled(true);
 });

// Signout from Parse
document.querySelector("#signout").addEventListener("click", async (_event) => {
 await Parse.User.logOut();
 currentUser = null;
 // Show auth screen and hide payment fields
 document.getElementById("auth").style.display = "block";
 document.getElementById("content").style.display = "none";
});
190
// Creates stripe card UI element
const elements = stripe.elements();
const cardElement = elements.create("card");
cardElement.mount("#card-element");
195
// Handle add new card form
document
 .querySelector("#payment-method-form")
 .addEventListener("submit", async (event) => {
  event.preventDefault();
   toggleAllButtonsEnabled(false);
   if (!event.target.reportValidity()) {
     return;
   }
  const form = new FormData(event.target);
   const cardholderName = form.get("name");

   const result = await stripe.confirmCardSetup(
     currentUser.get("setupSecret"),
     {
       payment_method: {
         card: cardElement,
         billing_details: {
           name: cardholderName,
         },
       },
     }
   );

   if (result.error) {
     alert(result.error.message);
     toggleAllButtonsEnabled(true);
     return null;
   }
225
   let setupIntent = result.setupIntent;

   // Cloud code to add new payment method
   let cloudCodeResult = await Parse.Cloud.run("addNewPaymentMethod", {
     userId: currentUser.id,
     paymentMethodId: setupIntent.payment_method,
   });

   toggleAllButtonsEnabled(true);
   alert("Success on creating a new payment method!");
236
   // Update payment method options
   retrieveCurrentUserPaymentMethods();
 });

// Handles new payment form
document
 .querySelector("#payment-form")
 .addEventListener("submit", async (event) => {
   event.preventDefault();
   toggleAllButtonsEnabled(false);
   const form = new FormData(event.target);
   const amount = Number(form.get("amount"));
   const currency = form.get("currency");
   // Gets selected card option id
   const paymentMethod = form.get("payment-method");
   const paymentData = {
     payment_method: paymentMethod,
     currency,
     amount: formatAmountForStripe(amount, currency),
     status: "new",
   };
   // Cloud code to create new payment
   let cloudCodeResult = await Parse.Cloud.run("createNewPayment", {
     userId: currentUser.id,
     paymentData: paymentData,
   });

   toggleAllButtonsEnabled(true);
   alert("Success on creating a new payment!");

   retrieveCurrentUserPayments();
 });

// Helper functions
const toggleAllButtonsEnabled = (enabledValue) => {
 document
   .querySelectorAll("button")
   .forEach((button) => (button.disabled = !enabledValue));
};
276
const formatAmount = (amount, currency) => {
 amount = zeroDecimalCurrency(amount, currency)
   ? amount
   : (amount / 100).toFixed(2);
 return new Intl.NumberFormat("en-US", {
   style: "currency",
   currency,
 }).format(amount);
};
286
// Format amount for Stripe
const formatAmountForStripe = (amount, currency) => {
 return zeroDecimalCurrency(amount, currency)
   ? amount
   : Math.round(amount * 100);
};
293
// Check if we have a zero decimal currency
// https://stripe.com/docs/currencies#zero-decimal
const zeroDecimalCurrency = (amount, currency) => {
 let numberFormat = new Intl.NumberFormat(["en-US"], {
   style: "currency",
   currency: currency,
   currencyDisplay: "symbol",
 });
 const parts = numberFormat.formatToParts(amount);
 let zeroDecimalCurrency = true;
 for (let part of parts) {
   if (part.type === "decimal") {
     zeroDecimalCurrency = false;
   }
 }
 return zeroDecimalCurrency;
};
 // Define and initialize Parse and Stripe libs
 const PARSE_APP_ID = "YOUR_PARSE_ID";
 const PARSE_JS_KEY = "YOUR_PARSE_JS_KEY";
 Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
 Parse.serverURL = "https://parseapi.back4app.com/";
6
 const STRIPE_PUBLISHABLE_KEY = "YOUR_STRIPE_PUBLISHABLE_KEY";
 const stripe = Stripe(STRIPE_PUBLISHABLE_KEY);
9
// Holds the currentUser complete Parse object
let currentUser = null;
const setCompleteCurrentUser = async () => {
  // Called when user is already signed in, completing
  // the currentUser object with the full one
  currentUser = await new Parse.Query(Parse.User)
    .equalTo("objectId", Parse.User.current().id)
    .first();
  // Retrieve and render user cards and payments
  retrieveCurrentUserPaymentMethods();
  retrieveCurrentUserPayments();
};
22
const retrieveCurrentUserPaymentMethods = async () => {
  // Query and render user PaymentMethods
  const PMQuery = new Parse.Query("PaymentMethod");
  PMQuery.equalTo("user", Parse.User.current());
  paymentMethods = await PMQuery.find();
  renderPaymentMethodOptions(paymentMethods);
};
30
const retrieveCurrentUserPayments = async () => {
  // Query and render user Payments
  const paymentsQuery = new Parse.Query("Payment");
  paymentsQuery.equalTo("user", Parse.User.current());
  payments = await paymentsQuery.find();
  renderPayments(payments);
};

const renderPaymentMethodOptions = async (paymentMethods) => {
  for (let paymentMethod of paymentMethods) {
    const optionId = `card-${paymentMethod.get("stripeId")}`;
    let optionElement = document.getElementById(optionId);

    // Add a new option if one doesn't exist yet.
    if (!optionElement) {
      optionElement = document.createElement("option");
      optionElement.id = optionId;
      document
        .querySelector("select[name=payment-method]")
        .appendChild(optionElement);
    }

    optionElement.value = paymentMethod.get("stripeId");
    optionElement.text = `${paymentMethod.get("card").brand} •••• ${
      paymentMethod.get("card").last4
    } | Expires ${paymentMethod.get("card").exp_month}/${
      paymentMethod.get("card").exp_year
    }`;
  }
};
61
const renderPayments = (payments) => {
  for (let payment of payments) {
    let liElement = document.getElementById(`payment-${payment.id}`);
    if (!liElement) {
      liElement = document.createElement("li");
      liElement.id = `payment-${payment.id}`;
    }
69
    const paymentData = payment.get("data");
    let content = "";
    if (
      paymentData.status === "new" ||
      paymentData.status === "requires_confirmation"
    ) {
      content = `Creating Payment for ${formatAmount(
        paymentData.amount,
        paymentData.currency
      )}`;
    } else if (paymentData.status === "succeeded") {
      const card = paymentData.charges.data[0].payment_method_details.card;
      content = `Payment for ${formatAmount(
        paymentData.amount,
        paymentData.currency
      )} on ${card.brand} card •••• ${card.last4} ${paymentData.status}!`;
    } else {
      content = `Payment for ${formatAmount(
        paymentData.amount,
        paymentData.currency
      )} ${paymentData.status}`;
    }
    liElement.innerText = content;
    document.querySelector("#payments-list").appendChild(liElement);
  }
};
96
// Checks if user is already signed in on Parse
if (Parse.User.current() !== null) {
  setCompleteCurrentUser();
 // Hide auth screen and show payment fields
 document.getElementById("auth").style.display = "none";
 document.getElementById("content").style.display = "block";
}
104
// Toggle signin and signup forms
document
 .querySelector("#signup-toggle")
 .addEventListener("click", async (_event) => {
   document.getElementById("auth-signin-form").style.display = "none";
   document.getElementById("auth-signup-form").style.display = "block";
   clearAuthFormFields();
 });
document
 .querySelector("#signin-toggle")
 .addEventListener("click", async (_event) => {
   document.getElementById("auth-signup-form").style.display = "none";
   document.getElementById("auth-signin-form").style.display = "block";
   clearAuthFormFields();
 });

// Clear auth form fields
const clearAuthFormFields = () => {
 document
   .querySelector("#auth")
   .querySelectorAll("input")
   .forEach((input) => (input.value = ""));
};

// Handle auth forms
document
 .querySelector("#auth-signin-form")
 .addEventListener("submit", async (event) => {
   event.preventDefault();
   toggleAllButtonsEnabled(false);
   const form = new FormData(event.target);
   const email = form.get("email");
   const password = form.get("password");
138
  // Try to signin on Parse
   try {
     let user = await Parse.User.logIn(email, password);
     if (user !== null) {
       currentUser = user;
       // Hide auth screen and show payment fields
       document.getElementById("auth").style.display = "none";
       document.getElementById("content").style.display = "block";
       clearAuthFormFields();
     }
   } catch (error) {
     alert(error);
   }
   toggleAllButtonsEnabled(true);
 });

document
 .querySelector("#auth-signup-form")
 .addEventListener("submit", async (event) => {
   event.preventDefault();
   toggleAllButtonsEnabled(false);
   const form = new FormData(event.target);
   const email = form.get("email");
   const password = form.get("password");
163
   // Try to signup on Parse
   try {
     let user = await Parse.User.signUp(email, password, { email: email });
     // Cloud code to create Stripe user and intent
     user = await Parse.Cloud.run("createStripeCustomer", { userId: user.id });
     if (user !== null) {
       currentUser = user;
       // Hide auth screen and show payment fields
       document.getElementById("auth").style.display = "none";
       document.getElementById("content").style.display = "block";
       clearAuthFormFields();
     }
   } catch (error) {
     alert(error);
   }
   toggleAllButtonsEnabled(true);
 });

// Signout from Parse
document.querySelector("#signout").addEventListener("click", async (_event) => {
 await Parse.User.logOut();
 currentUser = null;
 // Show auth screen and hide payment fields
 document.getElementById("auth").style.display = "block";
 document.getElementById("content").style.display = "none";
});
190
// Creates stripe card UI element
const elements = stripe.elements();
const cardElement = elements.create("card");
cardElement.mount("#card-element");
195
// Handle add new card form
document
 .querySelector("#payment-method-form")
 .addEventListener("submit", async (event) => {
  event.preventDefault();
   toggleAllButtonsEnabled(false);
   if (!event.target.reportValidity()) {
     return;
   }
  const form = new FormData(event.target);
   const cardholderName = form.get("name");

   const result = await stripe.confirmCardSetup(
     currentUser.get("setupSecret"),
     {
       payment_method: {
         card: cardElement,
         billing_details: {
           name: cardholderName,
         },
       },
     }
   );

   if (result.error) {
     alert(result.error.message);
     toggleAllButtonsEnabled(true);
     return null;
   }
225
   let setupIntent = result.setupIntent;

   // Cloud code to add new payment method
   let cloudCodeResult = await Parse.Cloud.run("addNewPaymentMethod", {
     userId: currentUser.id,
     paymentMethodId: setupIntent.payment_method,
   });

   toggleAllButtonsEnabled(true);
   alert("Success on creating a new payment method!");
236
   // Update payment method options
   retrieveCurrentUserPaymentMethods();
 });

// Handles new payment form
document
 .querySelector("#payment-form")
 .addEventListener("submit", async (event) => {
   event.preventDefault();
   toggleAllButtonsEnabled(false);
   const form = new FormData(event.target);
   const amount = Number(form.get("amount"));
   const currency = form.get("currency");
   // Gets selected card option id
   const paymentMethod = form.get("payment-method");
   const paymentData = {
     payment_method: paymentMethod,
     currency,
     amount: formatAmountForStripe(amount, currency),
     status: "new",
   };
   // Cloud code to create new payment
   let cloudCodeResult = await Parse.Cloud.run("createNewPayment", {
     userId: currentUser.id,
     paymentData: paymentData,
   });

   toggleAllButtonsEnabled(true);
   alert("Success on creating a new payment!");

   retrieveCurrentUserPayments();
 });

// Helper functions
const toggleAllButtonsEnabled = (enabledValue) => {
 document
   .querySelectorAll("button")
   .forEach((button) => (button.disabled = !enabledValue));
};
276
const formatAmount = (amount, currency) => {
 amount = zeroDecimalCurrency(amount, currency)
   ? amount
   : (amount / 100).toFixed(2);
 return new Intl.NumberFormat("en-US", {
   style: "currency",
   currency,
 }).format(amount);
};
286
// Format amount for Stripe
const formatAmountForStripe = (amount, currency) => {
 return zeroDecimalCurrency(amount, currency)
   ? amount
   : Math.round(amount * 100);
};
293
// Check if we have a zero decimal currency
// https://stripe.com/docs/currencies#zero-decimal
const zeroDecimalCurrency = (amount, currency) => {
 let numberFormat = new Intl.NumberFormat(["en-US"], {
   style: "currency",
   currency: currency,
   currencyDisplay: "symbol",
 });
 const parts = numberFormat.formatToParts(amount);
 let zeroDecimalCurrency = true;
 for (let part of parts) {
   if (part.type === "decimal") {
     zeroDecimalCurrency = false;
   }
 }
 return zeroDecimalCurrency;
};
﻿
确保将您的 Stripe 可发布密钥以及您的 Parse 应用 ID 和 JS 密钥添加到文件顶部。这些是检查和理解此脚本的一些关键元素：
检查在首次加载脚本时使用 Parse.User.current 方法以呈现页面的正确部分；
表单提交操作监听器将在 Parse 上执行操作，例如登录或注册，并调用云代码函数以创建与 Stripe 相关的对象并保存在您的 Back4App 数据库中；
用于在 Parse 上查询以检索当前用户的 “retrieve” 和 “return” 方法的 Payment 和 PaymentMethod 对象。
在测试应用之前，请在名为 app.css 的 CSS 文件中添加以下样式表，放在同一目录下：
CSS
 /* Back4App Guide */

 *,
 *:before,
 *:after {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
 }
10
html {
  font-family: sans-serif;
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}
17
body {
  margin: 0;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
31
p {
  margin: 0;
}
35
.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;
}

.wrapper {
 width: '90%';
  align-self: 'center';
}
47
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
55
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}

.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}

.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
73
.flex_row {
  display: flex;
}

.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
83
.form_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}
88
.form_heading {
  margin-bottom: 10px;
}
92
.form {
  padding-bottom: 25px;
  margin: 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
98
.form_input {
 display: block;
 width: 100%;
 height: 46px;
 padding: 0 15px;
 background-color: #e6e6e6;
 border: 1px solid #ccc;
 border-radius: 999px;
 margin-bottom: 20px;
 font-size: 16px;
}
110
.form_button {
 display: block;
 width: 100%;
 height: 42px;
 padding: 0 15px;
 background-color: #208AEC;
 border: 1px solid #208AEC;
 border-radius: 999px;
 color: #fff;
 font-size: 16px;
 cursor: pointer;
}
123
.form_hint {
 display: block;
 margin-top: 20px;
 color: rgba(0, 0, 0, 0.5);
 font-size: 16px;
 text-align: center;
 text-decoration-color: rgba(0, 0, 0, 0.4);
}
132
.card_element_wrapper {
 padding: 13px 15px;
 margin-bottom: 20px;
 background-color: #e6e6e6;
 border: 1px solid #ccc;
 border-radius: 999px;
}
 /* Back4App Guide */

 *,
 *:before,
 *:after {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
 }
10
html {
  font-family: sans-serif;
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}
17
body {
  margin: 0;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
31
p {
  margin: 0;
}
35
.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;
}

.wrapper {
 width: '90%';
  align-self: 'center';
}
47
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
55
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}

.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}

.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
73
.flex_row {
  display: flex;
}

.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
83
.form_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}
88
.form_heading {
  margin-bottom: 10px;
}
92
.form {
  padding-bottom: 25px;
  margin: 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
98
.form_input {
 display: block;
 width: 100%;
 height: 46px;
 padding: 0 15px;
 background-color: #e6e6e6;
 border: 1px solid #ccc;
 border-radius: 999px;
 margin-bottom: 20px;
 font-size: 16px;
}
110
.form_button {
 display: block;
 width: 100%;
 height: 42px;
 padding: 0 15px;
 background-color: #208AEC;
 border: 1px solid #208AEC;
 border-radius: 999px;
 color: #fff;
 font-size: 16px;
 cursor: pointer;
}
123
.form_hint {
 display: block;
 margin-top: 20px;
 color: rgba(0, 0, 0, 0.5);
 font-size: 16px;
 text-align: center;
 text-decoration-color: rgba(0, 0, 0, 0.4);
}
132
.card_element_wrapper {
 padding: 13px 15px;
 margin-bottom: 20px;
 background-color: #e6e6e6;
 border: 1px solid #ccc;
 border-radius: 999px;
}
﻿
使用任何类型的本地 HTTP 服务器测试应用程序，例如 http-server node 包. 注册后，您的应用程序应该看起来像这样:
﻿
结论
通过上述指南，您可以在 Back4App 中使用 Stripe 和 Cloud Code 函数，并将支付集成到一个简单的 JavaScript 应用程序中！
如果在集成 Stripe 或某个功能无法正常工作时遇到任何问题，请通过聊天与我们的团队联系！