Panduan Integrasi Stripe Menggunakan Back4App dan Cloud Functions

15min
Integrasi Stripe menggunakan Cloud Functions
Pendahuluan
Dalam panduan ini, kami akan menunjukkan kepada Anda cara mengintegrasikan backend yang dihosting di Back4App dengan API Stripe. Pilihan arsitektur terbaik untuk membangunnya di Back4App adalah menggunakan fitur yang sangat kuat yang disebut Cloud Functions. Setelah Anda menyelesaikan integrasi fungsi cloud dengan Stripe, Anda akan dapat menggunakan integrasi ini untuk semua proyek front-end Anda (Web, iOS, Android). Panduan ini menyajikan integrasi Stripe yang lengkap menggunakan contoh web.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:


Sebuah aplikasi yang dibuat di Back4App.
Ikuti tutorial Membuat Aplikasi Baru untuk belajar cara membuat aplikasi di Back4App.

Akun yang dibuat di Stripe.
Tujuan
Mengintegrasikan Stripe pada proyek web menggunakan Cloud Functions Back4App.
Apa itu Stripe?
﻿Stripe adalah perusahaan teknologi yang beroperasi di lebih dari 25 negara, yang memungkinkan individu dan bisnis untuk menerima pembayaran melalui Internet. Stripe fokus pada penyediaan infrastruktur teknis, pencegahan penipuan, dan perbankan yang diperlukan untuk menjalankan sistem pembayaran online.
Tutorial ini akan memandu Anda melalui langkah-langkah untuk membuat fungsi dan mengintegrasikan API Stripe ke dalam Parse Server di aplikasi web Anda.
Lebih spesifiknya, dalam panduan ini, kita akan membuat lingkungan di mana pengguna dapat masuk atau mendaftar, mendaftarkan kartu kredit, dan menghasilkan contoh pembelian dengan mereka melalui Pembayaran Stripe. Juga, Anda akan dipandu tentang cara mengatur seluruh proses serta menguji apakah koneksi ke server dan API Stripe berfungsi dengan baik.
- Buat Akun Stripe
Kunjungi Stripe dan klik untuk mendaftar membuat akun. Di sana, Anda hanya perlu memberikan informasi pribadi Anda dan negara mana akun Anda berada.
Selanjutnya, verifikasi akun Stripe Anda (Anda akan menerima email yang berisi tautan verifikasi dari Stripe). Klik tautan tersebut, dan kemudian ikuti langkah-langkah untuk mengonfirmasi alamat email Stripe Anda.
- Mengatur kelas database Anda
Setelah mengonfigurasi lingkungan Stripe untuk Langkah 1, pergi ke dasbor aplikasi Back4App Anda agar Anda dapat mengatur database Anda. Langkah ini tidak wajib karena Parse akan secara otomatis membuat kelas saat fungsi cloud mencoba membuat objek baru, tetapi kami akan melalui mereka untuk menjelaskan bidang mana yang akan dibuat dan mengapa.
Akan ada dua kelas yang akan menyimpan data terkait Stripe aplikasi Anda: PaymentMethod dan Payment:
Berikut adalah cara kelas-kelas diatur:
﻿PaymentMethod﻿
﻿type(String): nilainya akan selalu “card”;
﻿card(Object): akan menyimpan data Stripe lengkap mengenai kartu yang terdaftar;
﻿stripeID(String): id yang merujuk pada PaymentMethod ini di backend Stripe;
﻿user(Pointer to Parse.User): referensi langsung kepada User mana PaymentMethod ini milik.
﻿Payment﻿
﻿data(Object): akan menyimpan data Stripe lengkap mengenai pembayaran;
﻿user(Pointer to Parse.User): referensi langsung kepada User mana pembayaran ini milik.
Kami juga akan menambahkan dua kolom nilai baru String di kelas default User yang disebut setupSecret dan customerId yang akan berisi id Stripe yang menghubungkan User dengan rekan Stripe-nya.
- Mengimplementasikan Cloud Code
Mari kita konfigurasi fungsi Cloud Code di aplikasi, menginstal modul Stripe dan menerapkan Kode.
Jika Anda ingin lebih memahami lingkungan Cloud Code, periksa panduan ini. 
1 - Dapatkan Kunci Stripe Anda
Sekarang, buka dasbor Stripe Anda, navigasikan ke Pengembang di bagian atas dan kemudian pilih Kunci API di menu sebelah kiri. Di bagian itu, Anda akan dapat melihat kunci yang dapat diterbitkan dan kunci rahasia Anda.
﻿
Tuliskan kunci-kunci ini karena Anda akan membutuhkannya nanti.
2 - Berkas Cloud Code
Di komputer Anda, buat berkas-berkas berikut, yang akan bertanggung jawab untuk menginstal modul dan menambahkan fungsi Cloud Code Anda ke Back4App.
JSON
 {
   "dependencies": {
     "stripe": "*"
   }
 }
 {
   "dependencies": {
     "stripe": "*"
   }
 }
﻿
Tambahkan kode di bawah ini ke file baru dan jangan lupa untuk menempelkan kunci rahasia Stripe Anda di bagian atas.
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;
});
﻿
- Unggah fungsi ke Cloud Code
Kunjungi situs web Back4App, masuk, dan kemudian temukan aplikasi Anda. Setelah itu, klik pada Dasbor tautan dan Anda akan berada di halaman yang ditunjukkan di bawah ini. Untuk menerapkan Cloud Code Anda, klik pada tombol + TAMBAH dan temukan file main.js dan package.json yang Anda buat di langkah sebelumnya, lalu klik pada tombol DEPLOY.
﻿
Anda baru saja mengonfigurasi fungsi Cloud Code yang dapat Anda gunakan di platform mana pun! Periksa panduan Terapkan & panggil fungsi untuk belajar bagaimana cara memanggilnya. Di langkah berikutnya, Anda akan bekerja dengan proyek JavaScript yang memanggilnya.
- Mengintegrasikan aplikasi JavaScript dengan Cloud Code
Sekarang Anda akan melihat contoh halaman HTML sederhana dengan JavaScript yang memiliki tiga fitur utama: masuk atau mendaftar pengguna di Parse, membuat metode pembayaran yang valid (kartu kredit), dan membuat pembayaran baru, mengenakan biaya pada metode ini yang dimiliki oleh pengguna.
Silakan buat direktori baru di komputer Anda dan file HTML baru dengan kode berikut di dalamnya:
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>
﻿
Dalam file ini Anda akan menemukan dua bagian utama, yang pertama adalah bagian otentikasi, yang akan ditampilkan secara default jika pengguna belum masuk. Setelah masuk, bagian pembayaran akan ditampilkan, yang berisi semua formulir yang bertanggung jawab untuk membuat data di Stripe dan juga berkomunikasi dengan fungsi Cloud Code di Back4App.
Kami sekarang perlu membuat fungsi JavaScript yang berisi kode yang menghubungkan semuanya, yang disebut 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;
};
﻿
Pastikan untuk menambahkan kunci publik Stripe Anda dan juga ID aplikasi Parse serta kunci JS Anda di bagian atas file. Ini adalah beberapa elemen kunci yang perlu diperiksa dan dipahami dalam skrip ini:
Periksa penggunaan Parse.User.current metode saat memuat skrip untuk pertama kalinya untuk merender bagian halaman yang benar;
Pendengar aksi pengiriman formulir yang akan melakukan tindakan di Parse, seperti masuk atau mendaftar dan memanggil fungsi Cloud Code untuk membuat objek terkait Stripe dan menyimpannya di database Back4App Anda;
Metode “retrieve” dan “return” yang membuat kueri di Parse untuk mengambil Pembayaran pengguna saat ini dan MetodePembayaran objek.
Sebelum menguji aplikasi, tambahkan stylesheet berikut dalam file CSS bernama app.css di dalam direktori yang sama:
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;
}
﻿
Uji aplikasi menggunakan server HTTP lokal apa pun, seperti paket node http-server. Setelah mendaftar, aplikasi Anda harus terlihat seperti ini:
﻿
Kesimpulan
Dengan panduan yang dijelaskan di atas, Anda dapat menggunakan Stripe dengan fungsi Cloud Code di Back4App serta mengintegrasikan pembayaran ke aplikasi JavaScript sederhana!
Jika Anda mengalami kesulitan saat mengintegrasikan Stripe atau fungsi tidak berfungsi, silakan hubungi tim kami melalui obrolan!
Diperbarui 27 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Integrasi Twilio API dengan Fungsi Cloud Back4App
BERIKUTNYA
Integrasi Twilio API ke WhatsApp dengan Cloud Code di Back4App
Panduan Integrasi Stripe Menggunakan Back4App dan Cloud Functions

Integrasi Stripe menggunakan Cloud Functions

Pendahuluan

Prasyarat

Tujuan

Apa itu Stripe?

1 - Buat Akun Stripe

2 - Mengatur kelas database Anda

3 - Mengimplementasikan Cloud Code

3.1 - Dapatkan Kunci Stripe Anda

3.2 - Berkas Cloud Code

4 - Unggah fungsi ke Cloud Code

5 - Mengintegrasikan aplikasi JavaScript dengan Cloud Code

Kesimpulan
