Cara Menerima Pembayaran dengan Stripe

Jadi, Anda baru saja membuat aplikasi keren dan sekarang perlu cara untuk menerima pembayaran, tapi bingung harus mulai dari mana? Tenang saja, karena dalam artikel ini, saya akan menunjukkan kepada Anda langkah demi langkah cara mengatur Stripe dengan Node.js dan menerima pembayaran melalui antarmuka (UI) yang keren ini.

Sebelum kita mulai, saya ingin sampaikan bahwa dokumentasi Stripe sangat bagus, dan saya sangat merekomendasikan untuk menggunakannya bersamaan dengan artikel ini.

Jika Anda lebih suka belajar secara visual, tonton versi video dari artikel ini.

---

## Setup

Langkah pertama yang paling jelas adalah membuat akun di Stripe. Anda juga harus memastikan mengisi semua informasi bisnis Anda (informasi pajak, alamat, dll.) untuk mematuhi peraturan hukum sebelum menerima pembayaran. Setelah itu selesai, langkah selanjutnya adalah menyiapkan proyek Anda.

Anda akan memerlukan server Node.js untuk mengintegrasikan Stripe. Jadi, jika Anda belum memiliki server Express Node.js, ikuti langkah-langkah berikut.

Menyiapkan Server Express

1. Jalankan npm init untuk membuat file package.json untuk proyek Anda.
2. Jalankan npm i stripe express dotenv untuk menginstal pustaka (library) yang kita butuhkan: stripe, express, dan dotenv.
3. Buat file bernama server.js dan sertakan kode berikut.

JavaScript

// Muat variabel lingkungan dari file .env ke dalam process.env
require("dotenv").config()

// Setup express
const express = require("express")
const app = express()
app.use(express.json())

// Setup Stripe
const stripe = require("stripe")(process.env.STRIPE_PRIVATE_KEY)

// Ini adalah daftar barang yang kita jual
// Kemungkinan besar ini akan berasal dari database atau file JSON
const storeItems = new Map([
  [1, { priceInCents: 10000, name: "Learn React Today" }],
  [2, { priceInCents: 15000, name: "Learn CSS Today" }],
])

// Jalankan server kita di port 3000
app.listen(3000)

---

## Menghubungkan Sisi Klien (Client-Side)

Sebelum menulis lebih banyak kode untuk server, kita akan fokus pada cara menghubungkan sisi klien (frontend) aplikasi Anda ke server. Menurut saya, cara terbaik untuk melakukannya adalah dengan permintaan fetch, karena kemungkinan besar server Anda akan menjadi API yang dipanggil dari klien. Kodenya adalah sebagai berikut.

JavaScript

// Memulai permintaan POST ke server
// Jika server berada di domain yang berbeda dari klien
// maka ini harus berupa url lengkap
// http://localhost:3000/create-checkout-session
fetch("/create-checkout-session", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  // Kirim semua informasi tentang item
  body: JSON.stringify({
    items: [
      {
        id: 1,
        quantity: 2,
      },
      {
        id: 2,
        quantity: 1,
      },
    ],
  }),
})
  .then(res => {
    if (res.ok) return res.json()
    // Jika ada error, pastikan kita menangkapnya
    return res.json().then(e => Promise.reject(e))
  })
  .then(({ url }) => {
    // Jika berhasil, arahkan pelanggan ke URL yang dikembalikan
    window.location = url
  })
  .catch(e => {
    console.error(e.error)
  })

Ini kodenya cukup panjang, jadi mari kita bedah apa yang sebenarnya terjadi. Dari sisi klien, kita membuat permintaan ke sebuah endpoint di server kita dan mengirimkan ID serta jumlah (quantity) dari setiap barang yang ingin dibeli pelanggan. Kemudian, jika permintaan berhasil, kita mengarahkan pelanggan ke URL yang dikembalikan oleh API tersebut.

Catatan Penting

• Jika server dan klien berada di domain yang berbeda, Anda harus menggunakan URL server lengkap saat melakukan permintaan fetch (misalnya, http://localhost:3000/create-checkout-session bukan hanya /create-checkout-session).
• Jangan pernah mengirim informasi harga dari klien ke server. Karena pelanggan memiliki akses ke kode klien, mereka bisa saja mengubah informasi harga. Inilah mengapa semua transaksi dilakukan menggunakan ID di sisi klien, dan server yang menangani semua integrasi Stripe dan penetapan harga.

---

## Menghubungkan Sisi Server (Server-Side)

Sekarang kita bisa membuat permintaan dari klien ke server di sebuah endpoint bernama /create-checkout-session. Langkah selanjutnya adalah membuat endpoint ini di server kita dan mengembalikan URL yang valid ke klien dengan menambahkan kode berikut di dalam file server.js Anda.

JavaScript

// Buat permintaan post untuk /create-checkout-session
app.post("/create-checkout-session", async (req, res) => {
  try {
    // Buat sesi checkout dengan Stripe
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      // Untuk setiap item, gunakan id untuk mendapatkan informasinya
      // Ambil informasi itu dan ubah ke format Stripe
      line_items: req.body.items.map(({ id, quantity }) => {
        const storeItem = storeItems.get(id)
        return {
          price_data: {
            currency: "usd",
            product_data: {
              name: storeItem.name,
            },
            unit_amount: storeItem.priceInCents,
          },
          quantity: quantity,
        }
      }),
      mode: "payment",
      // Tetapkan URL sukses dan batal yang akan kita kirimkan ke pelanggan
      // Ini harus berupa URL lengkap
      // Di bagian selanjutnya kita akan mengatur CLIENT_URL
      success_url: `${process.env.CLIENT_URL}/success.html`,
      cancel_url: `${process.env.CLIENT_URL}/cancel.html`,
    })
    res.json({ url: session.url })
  } catch (e) {
    // Jika ada error, kirimkan ke klien
    res.status(500).json({ error: e.message })
  }
})

Kode ini sedikit lebih kompleks, jadi mari saya jelaskan. Pada dasarnya, kita memiliki endpoint yang mengambil semua informasi barang dari klien kita. Informasi ini berbentuk objek JSON yang memiliki kunci items, yang berisi daftar barang dengan id dan quantity.

Hal pertama yang kita lakukan adalah memanggil stripe.checkout.sessions.create, yang menerima sebuah objek berisi semua informasi untuk proses checkout:

• payment_method_types: Ini adalah daftar semua metode pembayaran yang diterima, seperti transfer bank atau kartu kredit. Untuk sebagian besar kasus, Anda bisa membiarkannya sebagai ["card"].
• mode: Ini menentukan apakah ini akan menjadi pembayaran langganan (subscription) atau pembayaran sekali saja (one-time payment). Karena artikel ini hanya membahas pembayaran sekali saja, kita akan mengaturnya sebagai payment.
• success_url: Ini adalah URL tujuan pelanggan setelah pembayaran berhasil.
• cancel_url: Ini adalah URL tujuan pelanggan jika mereka membatalkan pembelian.
• line_items: Ini adalah daftar barang yang dibeli pelanggan. Format untuk setiap barang adalah sebagai berikut:
  • price_data: Objek yang berisi informasi produk seperti nama dan harga. Penting untuk diingat bahwa semua harga di Stripe didefinisikan dalam sen. Jadi, untuk barang seharga $10, unit_amount-nya adalah 1000.
  • quantity: Jumlah barang yang ingin dibeli pelanggan.

Setelah sesi berhasil dibuat, kita bisa mendapatkan URL dari sesi tersebut dan mengirimkannya kembali ke klien kita. URL ini akan mengarahkan pengguna ke halaman checkout Stripe di mana mereka dapat memasukkan semua informasi pembayaran mereka.

---

## Sentuhan Akhir

Semua kode yang kita butuhkan sudah selesai, tetapi kita masih perlu menyelesaikan pengaturan environment variable kita. Untuk melakukannya, buat file bernama .env di direktori utama server Anda. Di dalam file itu, kita akan menyimpan kunci API rahasia dari Stripe dan URL server kita.

STRIPE_PRIVATE_KEY=<kunci_rahasia_anda>
CLIENT_URL=https://client.com

Untuk mendapatkan Stripe private key, Anda hanya perlu pergi ke dasbor akun Stripe Anda, di bawah bagian Developers di menu samping, lalu klik API Keys. Di sini Anda dapat melihat secret key Anda.

Penting untuk dicatat bahwa Stripe memiliki mode test (uji coba) dan mode live (sungguhan). Pastikan Anda mengaktifkan toggle View test data di menu samping untuk mengakses kunci API uji coba yang akan digunakan selama pengembangan.

Dengan kunci API ini, Anda dapat membuat tagihan yang akan muncul di bagian data uji coba akun Stripe Anda tanpa benar-benar menggunakan uang sungguhan. Jika Anda ingin menguji pembayaran yang berhasil, cukup gunakan kartu dengan nomor 4242 4242 4242 4242, tanggal kedaluwarsa di masa depan, dan CVC apa pun. Stripe juga memiliki banyak kartu lain yang bisa Anda gunakan untuk pengujian berbagai skenario error/sukses.

---

## Kesimpulan

Itu saja yang diperlukan untuk mengatur Stripe di aplikasi Anda. Hanya dengan beberapa baris kode, kini Anda dapat menerima pembayaran melalui antarmuka yang dirancang dengan indah oleh Stripe.