Cara Menambahkan Tombol Pembayaran Stripe Sederhana ke Tabel Harga Anda di Divi

Stripe adalah solusi pemrosesan pembayaran yang sangat fleksibel untuk bisnis online, terutama jika Anda adalah pengembang yang paham teknologi. Namun, jika Anda bukan seorang pengembang, dan masih ingin menggunakan Stripe untuk menjual beberapa produk secara online, ada cara sederhana untuk melakukannya. Bahkan, dengan beberapa potongan kode (atau plugin sederhana), Anda dapat menambahkan tombol pembayaran Stripe ke situs web Anda dalam sekejap.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan tombol pembayaran Stripe ke situs web Divi Anda menggunakan Stripe Payments for WordPress Plugin. Saya bahkan akan menunjukkan cara menata tombol Anda agar sesuai dengan tata letak Divi Anda.

Mari kita mulai!

Sneak Peek

Berikut adalah cuplikan tombol pembayaran Stripe yang akan kita buat dalam tutorial ini.

Mulai

Untuk tutorial kasus penggunaan ini, Anda memerlukan yang berikut:

• Tema Divi (diinstal dan aktif)
• Akun Stripe
• Pembayaran Stripe untuk Plugin WordPress oleh WP Simply Pay (diinstal dan aktif)
• Kami juga akan menggunakan Tata Letak Halaman Harga Produk Digital yang tersedia secara GRATIS di Divi Builder

Tentang Plugin

Pembayaran Stripe untuk WordPress oleh WP Simply Pay adalah plugin yang memungkinkan Anda untuk mulai mengumpulkan pembayaran kartu kredit dengan Stripe menggunakan sematan kode pendek sederhana. Anda sebenarnya dapat membuat formulir checkout dan tombol pembayaran secara manual tanpa menggunakan plugin, tetapi karena plugin ini mempermudah dan menawarkan beberapa fitur yang nyaman (seperti halaman konfirmasi pembayaran dan kegagalan pembayaran), saya pikir ini akan lebih membantu dalam jangka panjang. . Saya akan menggunakan plugin versi Lite GRATIS untuk tutorial ini. Versi pro dari plugin akan memberi Anda lebih banyak kontrol atas gaya formulir Anda bersama dengan dukungan untuk hal-hal seperti bidang khusus, jumlah khusus, dan fitur berlangganan.

Menyiapkan formulir Stripe dengan Plugin

Setelah Anda menginstal dan mengaktifkan plugin, navigasikan ke Simple Pay Lite > Settings . Kemudian di bawah tab Stripe Keys, Anda harus memasukkan kunci API akun Stripe Anda. Demi tutorial ini, saya hanya akan menggunakan kunci uji, tetapi Anda harus memastikan dan mengaktifkan akun Stripe Anda dan menghasilkan beberapa kunci api langsung jika Anda ingin mulai mengumpulkan uang sungguhan.

Anda dapat menemukan kunci API Anda dengan masuk ke akun Stripe Anda dan mengeklik Pengembang > Kunci API .

Anda perlu menyalin kunci Publishable dan kunci Rahasia ke pengaturan plugin.

Sekarang lompat ke tab umum. Di sana Anda akan dapat menentukan Halaman Sukses Pembayaran dan Halaman Kegagalan Pembayaran. Anda akan melihat bahwa plugin telah membuat halaman tersebut untuk Anda. Tetapi karena konten halaman dihasilkan oleh kode pendek, Anda sebenarnya dapat menambahkan kode pendek tersebut ke modul Divi mana pun pada tata letak Divi mana pun untuk membuat versi khusus halaman tersebut. Untuk saat ini, simpan halaman default itu di tempatnya dan lanjutkan penyiapannya.

Setel gaya tombol pembayaran ke "tidak ada (mewarisi dari tema)". Yang dilakukan hanyalah mengeluarkan css yang digunakan untuk menata tombol garis biru default. Ini akan membuat segalanya sedikit lebih bersih ketika kita menambahkan CSS kustom kita sendiri untuk menata tombol di Divi.

Kemudian simpan perubahan.

Di bawah tab konfirmasi pembayaran, Anda dapat menggunakan tag template yang tersedia untuk menyesuaikan pesan dan informasi yang ditampilkan oleh kode pendek di halaman konfirmasi pembayaran Anda. Tapi untuk tutorial ini, saya hanya akan meninggalkan pesan default.

Membuat Formulir Pembayaran Stripe

Formulir pembayaran benar-benar tombol pembayaran Stripe yang menghasilkan formulir pembayaran sembulan yang memungkinkan pengguna menyelesaikan pembelian tanpa harus meninggalkan halaman. Oleh karena itu, Anda perlu membuat formulir pembayaran baru untuk setiap produk atau layanan yang Anda jual. Dalam kasus penggunaan ini, kita akan membuat tiga formulir pembayaran untuk tiga produk tiruan.

Untuk membuat formulir pembayaran baru, buka Dasbor WordPress dan navigasikan ke Simple Pay Lite > Add New.

Beri judul pada Formulir Pembayaran (judul ini tidak akan ditampilkan di bagian depan).

Kemudian di bawah tab Opsi Pembayaran, masukkan Jumlah Satu Kali.

Selanjutnya, klik tab Tampilan Formulir Di Halaman dan ubah Teks Tombol Pembayaran default menjadi "Beli Sekarang" (atau apa pun yang Anda inginkan). Anda juga dapat memilih teks pemrosesan tombol pembayaran.

Di bawah tab Tampilan Hamparan Checkout, perbarui yang berikut ini:

Nama perusahaan
Keterangan Barang
Logo/URL Gambar
Aktifkan Ingat Saya: YA

Opsi ini menentukan apa yang ditampilkan dalam popup formulir checkout untuk produk khusus ini.

Setelah selesai, pastikan dan publikasikan/perbarui formulir pembayaran.

Anda akhirnya perlu menyalin Kode Pendek Formulir Pembayaran yang terletak di kanan atas halaman Edit Formulir Pembayaran untuk menempelkannya ke tata letak halaman Divi Anda.

Namun untuk saat ini, Anda dapat melanjutkan proses yang sama untuk membuat dua formulir pembayaran lagi masing-masing dengan deskripsi item, logo/gambar, dan jumlahnya sendiri.

Setelah semua formulir pembayaran Anda dibuat, Anda dapat mengunjungi formulir pembayaran Anda dengan menavigasi ke Simple Pay Lite > Formulir Pembayaran. Di sana Anda akan memiliki akses mudah ke kode pendek.

Menambahkan Tombol Pembayaran Stripe ke Tata Letak Halaman Divi Anda

Tanpa kode pendek formulir pembayaran stripe yang siap digunakan, sekarang kita perlu menyiapkan dan menjalankan tata letak halaman Divi kita. Untuk melakukan ini, buat halaman baru, beri judul halaman Anda, dan klik untuk menggunakan Divi Builder.

Kemudian pilih opsi “Choose a Premade Layout”.

Buka paket Tata Letak Produk Digital dan klik untuk menggunakan halaman Harga Produk Digital.

Setelah tata letak dimuat ke halaman, publikasikan halaman, lalu klik untuk membangun di bagian depan.

Di tab terpisah, kembali ke halaman formulir pembayaran dan ambil kode pendek yang ingin Anda tambahkan ke tabel harga.

Kemudian kembali ke tata letak halaman harga Anda dan buka pengaturan tabel harga untuk salah satu tabel harga di tata letak.

Keluarkan teks tombol (Anda tidak memerlukannya karena kode pendek akan berfungsi sebagai tombol) lalu tempel kode pendek di bawah konten di kotak konten.

Anda akan melihat tombol tanpa gaya dengan teks "mode uji" disorot di bawah tombol. Tombol di unstyled karena kami memilih opsi untuk menggunakan gaya tema untuk tombol alih-alih tombol biru default. Teks mode uji hanya ada untuk mengingatkan Anda bahwa Anda tidak menggunakan formulir pembayaran garis langsung. Teks mode pengujian jelas akan hilang setelah kunci API langsung digunakan.

Selanjutnya, lanjutkan proses yang sama untuk menyalin dan menempelkan dua kode pendek formulir pembayaran lainnya di dua tabel harga yang tersisa.

Uji salah satu tombol untuk memastikan hamparan formulir pembayaran berfungsi dengan baik. Seharusnya terlihat seperti ini…

Sayangnya, versi plugin ini tidak memungkinkan Anda untuk menyesuaikan hamparan formulir pembayaran di luar gaya default yang Anda lihat. Tetapi fungsionalitasnya ada dan dalam banyak kasus, Anda tidak memerlukan gaya ekstra itu. Namun, Anda dapat menata tombol-tombol itu!

Menata Tombol Pembayaran Stripe agar Sesuai dengan Tata Letak

Untuk menata tombol pembayaran Stripe, kami akan menambahkan beberapa CSS khusus ke pengaturan halaman kami. Pertama, kita perlu mencari tahu pemilih apa yang akan kita gunakan untuk menata tombol. Anda dapat menemukannya dengan menggunakan alat pengembang browser Anda. Klik kanan pada tombol Stripe dan pilih "Periksa". Pada kode html Anda dapat melihat bahwa tombol tersebut memiliki kelas css “simpay-payment-btn”.

Ini adalah pemilih yang kita butuhkan untuk menargetkan gaya tombol.

Jika kita ingin mencocokkan gaya tombol pembayaran Stripe kita dengan tombol yang digunakan pada tata letak yang telah dibuat sebelumnya, kita dapat memeriksa salah satu tombol Divi yang sudah ditata pada halaman untuk mendapatkan kode CSS yang kita butuhkan.

Sekarang buka pengaturan halaman dan tambahkan CSS Kustom berikut di bawah tab Lanjutan:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

Itu dia! Mari kita lihat hasil akhirnya.

Menyesuaikan Konfirmasi Pembayaran Anda dan Halaman Gagal Pembayaran

Jangan lupa bahwa karena plugin menghasilkan konfirmasi pembayaran Anda dan konten halaman gagal pembayaran menggunakan kode pendek, Anda dapat menambahkan kode pendek itu ke tata letak Divi mana pun dan kemudian menggunakan pengaturan bawaan Divi untuk menata teks sesuai keinginan Anda.

Ini berguna untuk mencocokkan gaya halaman ini dengan situs web Anda tanpa harus menggunakan CSS khusus.

Pikiran Akhir

Stripe bisa menjadi solusi yang sangat nyaman untuk mengumpulkan pembayaran online. Dan, dengan plugin Pembayaran Sederhana untuk WordPress, Anda bisa mendapatkan fungsionalitas Stripe Checkout dasar dan berjalan di situs Divi Anda dalam hitungan menit. Juga, jika Anda memanfaatkan tata letak premade Divi, Anda dapat menambahkan dan menata tombol pembayaran Stripe Anda agar sesuai dengan tata letak Anda hanya dengan menyalin dan menempelkan kode CSS yang sudah dibuat untuk Anda. Hasilnya adalah alat pemrosesan pembayaran yang berfungsi penuh dan aman yang dapat mengumpulkan pembayaran dari pengunjung tanpa mereka harus meninggalkan halaman.

Jangan ragu untuk menjelajahi lebih banyak cara untuk menerima pembayaran Stripe di situs web WordPress Anda.

Saya harap Anda menemukan tutorial ini bermanfaat dan saya berharap untuk mendengar dari Anda di komentar.

Bersulang!