Buat halaman checkout custom yang menyertakan Link

Pertama, buat akun Stripe atau masuk.

Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:

# Available as a gem
sudo gem install stripe

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

Stripe menggunakan objek PaymentIntent untuk mewakili maksud Anda menagih pembayaran dari pelanggan, melacak upaya charge, dan perubahan status pembayaran di seluruh proses.

Jika Anda mengumpulkan detail kartu untuk penggunaan mendatang dengan Setup Intents, cantumkan metode pembayaran secara manual, bukan menggunakan metode pembayaran dinamis. Untuk menggunakan Link tanpa metode pembayaran dinamis, perbarui integrasi Anda untuk meneruskan link ke payment_method_types.

Saat Anda membuat PaymentIntent, tawarkan secara dinamis metode pembayaran yang paling relevan kepada pelanggan Anda, termasuk Link, dengan menggunakan metode pembayaran dinamis. Untuk menggunakan metode pembayaran dinamis, jangan sertakan parameter payment_method_types. Secara opsional, Anda juga dapat mengaktifkan automatic_payment_methods.

Untuk menambahkan Link ke integrasi Elements Anda menggunakan metode pembayaran dinamis:

1. Di pengaturan metode pembayaran Dashboard, aktifkan Link.
2. Jika saat ini Anda memiliki integrasi yang mencantumkan metode pembayaran secara manual, hapus parameter payment_method_types dari integrasi Anda.

Ambil client secret

PaymentIntent menyertakan client secret yang digunakan pada sisi client untuk menyelesaian proses pembayaran dengan aman. Anda dapat menggunakan pendekatan berbeda untuk meneruskan client secret ke sisi client.

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Link mengautentikasi pelanggan dengan menggunakan alamat emailnya. Tergantung pada alur checkout, Anda memiliki opsi berikut: meneruskan email ke Payment Element, mengumpulkannya langsung di dalam Payment Element, atau menggunakan Link Authentication Element. Dari jumlah tersebut, Stripe merekomendasikan untuk meneruskan alamat email pelanggan ke Payment Element jika tersedia.

Teruskan email

Kumpulkan email

Gunakan Link Authentication Element

Jika salah satu dari hal berikut berlaku untuk Anda:

• Anda menginginkan satu komponen yang dioptimalkan untuk pengumpulan email dan autentikasi Link.
• Anda perlu mengumpulkan alamat pengiriman dari pelanggan Anda.

Kemudian gunakan alur integrasi yang mengimplementasikan elemen-elemen ini: Link Authentication Element, Payment Element, dan Address Element opsional.

Halaman checkout yang diaktifkan Link memiliki Link Authentication Element di awal, diikuti oleh Address Element, dan Payment Element di bagian akhir. Anda juga dapat menampilkan Link Authentication Element di halaman terpisah, dalam urutan yang sama, untuk alur checkout multihalaman.

Buat formulir pembayaran menggunakan beberapa Elements

Integrasi berfungsi sebagai berikut:

Sekarang Anda dapat menyiapkan formulir pembayaran custom dengan komponen UI siap-rakit Elements. Alamat halaman pembayaran Anda harus dimulai dengan https:// bukan http:// agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS. Aktifkan HTTPS saat Anda siap menerima pembayaran live.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

Gunakan stripe.confirmPayment untuk menyelesaikan pembayaran dengan detail yang dikumpulkan dari pelanggan Anda di formulir Elements yang berbeda. Berikan return_url ke fungsi ini untuk menunjukkan ke mana Stripe mengalihkan pengguna setelah menyelesaikan pembayaran.

Pengguna Anda mungkin terlebih dahulu diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum Stripe mengalihkannya ke return_url.

Secara default, pembayaran kartu dan bank segera dialihkan ke return_url saat pembayaran berhasil. Jika tidak ingin dialihkan ke return_url, Anda dapat menggunakan if_required untuk mengubah perilaku.

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

return_url sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran dari PaymentIntent bila Anda menampilkan halaman pengembalian. Saat Stripe mengalihkan pelanggan ke return_url, Anda dapat menggunakan parameter query URL berikut untuk memverifikasi status pembayaran. Anda juga dapat menambahkan parameter query sendiri ketika memberikan return_url. Parameter query ini bertahan selama proses pengalihan.

Stripe mengirim kejadian payment_intent.succeeded ketika selesai pembayaran. Gunakan 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.

Konfigurasikan integrasi Anda untuk mendengarkan kejadian ini daripada menunggu callback dari client. Saat Anda menunggu callback dari client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi. Menyiapkan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui berbagai tipe metode pembayaran dengan satu integrasi tunggal.

Selain menangani kejadian payment_intent.succeeded, Anda juga dapat menangani dua kejadian penting lainnya ketika menagih pembayaran dengan Payment Element:

Saat ini, Link hanya berfungsi dengan kartu kredit, kartu debit, dan pembelian rekening bank AS yang memenuhi syarat. Link memerlukan pendaftaran domain.

Anda dapat membuat akun sandbox untuk Link menggunakan alamat email yang valid. Tabel berikut menampilkan nilai kode sandi satu kali tetap yang Stripe terima untuk melakukan autentikasi akun sandbox:

Untuk mencoba metode pembayaran tertentu, lihat contoh percobaan Payment Element.

Berbagai sumber pendanaan

Saat Stripe menambahkan dukungan sumber pendanaan tambahan, Anda tidak perlu memperbarui integrasi. Stripe secara otomatis mendukungnya dengan waktu penyelesaian transaksi dan jaminan yang sama seperti pembayaran kartu dan rekening bank.

Autentikasi kartu dan 3D Secure

Link mendukung autentikasi 3D Secure 2 (3DS2) untuk pembayaran kartu. 3DS2 mengharuskan pelanggan menyelesaikan langkah verifikasi tambahan dengan penerbit kartu ketika membayar. Pembayaran yang telah berhasil diautentikasi menggunakan 3D Secure dicakup oleh pengalihan pertanggungjawaban.

Untuk memicu alur tantangan autentikasi 3DS2 dengan Link di sandbox, gunakan kartu percobaan berikut dengan CVC, kode pos, dan tanggal kedaluwarsa mendatang: 4000000000003220

.

Di sandbox, proses autentikasi menampilkan halaman autentikasi rekaan. Pada halaman tersebut, Anda dapat memberikan otorisasi ataupun membatalkan penyiapan. Pemberian otorisasi pembayaran menyimulasikan autentikasi yang berhasil dan mengalihkan Anda ke URL kembali yang telah ditentukan. Mengeklik tombol Kegagalan menyimulasikan percobaan autentikasi yang tidak berhasil.

Untuk detail selengkapnya, lihat halaman autentikasi 3D Secure.