Simpan detail pembayaran selama pembayaran dalam aplikasi

Pertama, Anda membutuhkan akun Stripe. Daftarkan sekarang juga.

Sisi server

Integrasi ini memerlukan endpoint di server Anda yang berinteraksi dengan Stripe API. Gunakan pustaka resmi kami untuk akses ke Stripe API dari server Anda:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Sisi client

Stripe iOS SDK adalah sumber terbuka, yang didokumentasikan lengkap, dan kompatibel dengan aplikasi yang mendukung iOS 13 ke atas.

Pembayaran kartu diaktifkan secara default. Lihat pengaturan metode pembayaran Anda untuk mengaktifkan metode pembayaran lainnya yang ingin Anda dukung.

Integrasi ini menggunakan tiga objek API Stripe:

1. PaymentIntent: Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.

2. Pelanggan: Untuk menyiapkan metode pembayaran bagi pembayaran mendatang, Anda harus melampirkannya ke Pelanggan. Buat objek Pelanggan saat pelanggan membuat akun pada bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek Pelanggan sebelum pembayaran dan mengaitkannya dengan representasi internal Anda sendiri dari akun pelanggan nanti.

3. Kunci Efemeral Pelanggan: Informasi mengenai objek Pelanggan bersifat sensitif, dan tidak dapat diambil langsung dari aplikasi. Kunci Efemeral memberikan akses sementara SDK kepada Pelanggan.

Karena alasan keamanan, aplikasi Anda tidak dapat membuat objek ini. Sebagai gantinya, tambahkan endpoint di server Anda yang:

1. Mengambil Pelanggan, atau membuat yang baru.
2. Membuat Kunci Efemeral untuk Pelanggan.
3. Membuat PaymentIntent dengan amount, currency, dan customer, setup_future_usage . Secara opsional, Anda juga dapat menyertakan parameter automatic_payment_methods. Stripe mengaktifkan fungsinya secara default di versi terbaru API.
4. Mengembalikan client secret Payment Intent, secret Kunci Efemeral, id Pelanggan, dan kunci yang dapat dipublikasikan ke aplikasi Anda.

Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan dalam PaymentIntent. Anda dapat mengizinkan Stripe menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual. Terlepas dari opsi yang Anda pilih, ketahui mata uang yang diteruskan di PaymentIntent memfilter metode pembayaran yang ditampilkan kepada pelanggan. Misalnya, jika Anda meneruskan eur pada PaymentIntent dan mengaktifkan OXXO di Dashboard, OXXO tidak akan ditampilkan kepada pelanggan karena OXXO tidak mendukung pembayaran eur.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, pembatasan metode pembayaran, dan parameter lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran yang meningkatkan konversi serta yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-05-28.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \

Untuk menampilkan Payment Element seluler pada layar checkout, pastikan Anda:

• Tampilkan produk yang dibeli pelanggan beserta jumlah totalnya
• Gunakan Address Element untuk mengumpulkan informasi pengiriman yang diperlukan dari pelanggan
• Tambahkan tombol checkout untuk menampilkan UI Stripe

import UIKit
import StripePaymentSheet

class CheckoutViewController: UIViewController {
  @IBOutlet weak var checkoutButton: UIButton!
  var paymentSheet: PaymentSheet?
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint

  override func viewDidLoad() {
    super.viewDidLoad()

    checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside)
    checkoutButton.isEnabled = false

    // MARK: Fetch the PaymentIntent client secret, Ephemeral Key secret, Customer ID, and publishable key
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerEphemeralKeySecret = json["ephemeralKey"] as? String,
            let paymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }

      STPAPIClient.shared.publishableKey = publishableKey
      // MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, ephemeralKeySecret: customerEphemeralKeySecret)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      configuration.allowsDelayedPaymentMethods = true
      self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration)

      DispatchQueue.main.async {
        self.checkoutButton.isEnabled = true
      }
    })
    task.resume()
  }

}

@objc
func didTapCheckoutButton() {
  // MARK: Start the checkout process
  paymentSheet?.present(from: self) { paymentResult in
    // MARK: Handle the payment result
    switch paymentResult {
    case .completed:
      print("Your order is confirmed")
    case .canceled:
      print("Canceled!")
    case .failed(let error):
      print("Payment failed: \(error)")
    }
  }
}

Jika PaymentSheetResult adalah .completed, informasikan pengguna (misalnya, dengan menampilkan layar konfirmasi pesanan).

Mengatur allowsDelayedPaymentMethods ke true memungkinkan metode pembayaran pemberitahuan tertunda seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila PaymentSheet selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

Pelanggan dapat keluar dari aplikasi Anda untuk melakukan autentikasi (misalnya, di Safari atau aplikasi perbankannya). Untuk mengizinkan pelanggan kembali secara otomatis ke aplikasi Anda setelah mengautentikasi, konfigurasikan skema URL custom dan siapkan delegasi aplikasi Anda untuk meneruskan URL ke SDK. Stripe tidak mendukung tautan universal.

// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (!stripeHandled) {
        // This was not a Stripe url – handle the URL normally as you would
    }
}

Selain itu, atur returnURL pada objek PaymentSheet.Configuration ke URL untuk aplikasi Anda.

var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"

Stripe mengirim kejadian payment_intent.succeeded ketika selesai pembayaran. Gunakan alat webhook Dashboard atau ikuti panduan webhook untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui berbagai tipe metode pembayaran dengan satu integrasi tunggal.

Selain menangani kejadian payment_intent.succeeded, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

Saat Anda siap untuk men-charge pelanggan Anda di luar sesi, gunakan identifikasi Pelanggan dan PaymentMethod untuk membuat PaymentIntent. Untuk menemukan metode pembayaran yang akan di-charge, cantumkan metode pembayaran yang dikaitkan dengan pelanggan Anda. Contoh ini mencantumkan kartu tetapi Anda dapat mencantumkan tipe yang didukung.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Bila Anda memiliki identifikasi PaymentMethod dan Pelanggan, buat PaymentIntent dengan jumlah dan mata uang pembayaran. Atur beberapa parameter lain untuk melakukan pembayaran di-luar sesi:

• Atur off_session ke true untuk mengindikasikan bahwa pelanggan tidak berada dalam alur checkout Anda selama upaya pembayaran dan tidak dapat memenuhi permintaan autentikasi yang dibuat oleh mitra, seperti penerbit kartu, bank, atau lembaga pembayaran lainnya. Jika, selama alur checkout Anda, mitra meminta autentikasi, Stripe meminta pengecualian menggunakan informasi pelanggan dari transaksi di dalam sesi sebelumnya. Jika syarat pengecualian tidak terpenuhi, PaymentIntent mungkin akan memunculkan kesalahan.
• Atur nilai properti confirm PaymentIntent ke true, yang akan menyebabkan konfirmasi segera terjadi saat PaymentIntent dibuat.
• Atur payment_method ke identifikasi PaymentMethod dan pelanggan ke identifikasi Pelanggan.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true