Tombol Bayar Sekarang Stripe Connector for NetSuite
Ketika menggunakan fitur Stripe Connector for NetSuite halaman pembayaran invoice, atau tautan pembayaran invoice (gratis & layanan mandiri), ada beberapa cara untuk memetakan tautan halaman pembayaran dari catatan invoice yang dilihat guna internal ke PDF invoice yang dilihat oleh pelanggan untuk memungkinkan pelanggan Anda melakukan pembayaran. Berikut ini potongan kode tombol "Bayar Sekarang" siap-rakit yang dapat disisipkan ke dalam kode sumber PDF Lanjutan. Lihat di bawah untuk instruksi dan opsi penyesuaian.
Pratinjau templat PDF Lanjutan dengan potongan kode yang disertakan:
Potongan kode yang membuat tombol “Bayar Sekarang”:
<#assign rawLink = record.custbody_stripe_payment_link>
<#assign paymentLink = rawLink?replace('.*href="([^"]+)".*', '$1', 'r')>
<table class="payhere" style="width: 100%; margin-top: 10px; margin-bottom: 20px;">
<tr>
<td align="left" style="text-align: center; padding-bottom: 20px;">
<a href="${paymentLink}" style="display: inline-block; padding: 15px 30px; background-color: #635BFF; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; font-size: 18px;">Pay Now</a>
</td>
</tr>
<tr>
<td align="left" style="text-align: center;">
<img src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" />
</td>
</tr>
</table>
Bagian ungu di bawah ini adalah lokasi potongan kode tombol “Bayar Sekarang” yang direkomendasikan di templat PDF Lanjutan:
Cara menginstal potongan kode kami:
- Verifikasikan atau konfigurasikan templat PDF mana yang sedang digunakan oleh formulir invoice tempat Anda menginstal bidang Link Halaman Pembayaran.
- Buka Penyesuaian>Formulir>Formulir transaksi. Temukan serta Edit formulir invoice dari daftar tersebut, dan pastikan formulir tersebut dikonfigurasi untuk menggunakan templat PDF Lanjutan. Salin atau ingat nama templat tersebut.
- Buka Penyesuaian>Formulir>Formulir PDF/HTML Lanjutan. Periksa tombol alih di kanan atas untuk memperlihatkan kode sumber.
- Kecuali jika Anda memulai dengan templat PDF Lanjutan default untuk invoice, templat Anda kemungkinan sudah disesuaikan. Kode sumber PDF Lanjutan ditulis dalam HTML dengan menyertakan elemen CSS dan FreeMarker. Potongan kode di atas pada dasarnya adalah sebuah “tabel” dengan dua parameter “<#assign..” di depannya. Secara umum, keseluruhan pootongan dapat disalin dan ditempel di mana saja pada templat tempat tabel perorangan dapat ditempatkan.
- Direkomendasikan: klik tombol “Pratinjau” di sudut kanan atas halaman kode sumber. Ini akan membuka tab baru dengan templat visual formulir. Biarkan ini terbuka di tab terpisah sehingga Anda dapat merujuk ke lokasi Anda dalam kode. Secara umum, tabel paling mudah ditempel di antara elemen <body> dan </body> yang sudah ada di kode sumber, tetapi dapat juga ditempel di dalam header atau footer.
- Anda perlu menemukan awal dan akhir blok kode yang berbeda serta menempelkan potongan kode di ruang tersebut, sebagai ganti menginterupsi blok kode.
- Misalnya, Anda akan melihat hierarki elemen HTML yang digunakan untuk membuat tabel, yang umumnya dimulai dengan <tabel> dan diakhiri dengan </tabel>. Anda dapat menempelkan potongan kode tersebut di antara tabel-tabel yang ada.
Opsi penyesuaian:
Potongan kode akan berfungsi sebagaimana mestinya hanya dengan menyalin serta menempelkannya ke lokasi yang sesuai di kode sumber. Namun, Anda dapat menyesuaikan tampilan dan posisi lebih lanjut dengan opsi berikut:
- align="left" -Ubah kedua contoh yang muncul di bawah ini menjadi “rata tengah” atau “rata kanan” untuk menyelaraskan tombol “Bayar Sekarang” dan logo “Powered by Stripe” ke posisi tersebut pada halaman.
- background-color: #635BFF - Ubah pengidentifikasi warna ini untuk mengubah warna latar belakang tombol.
- color: white -Ubah teks “putih” ke nama warna HTML lain untuk mengubah warna teks di tombol.
- font-weight: bold -Ubah teks “tebal” ke opsi HTML lain untuk font di dalam tombol.
- ">Bayar Sekarang</a> - Ubah teks “Bayar Sekarang” ke pilihan teks Anda sendiri.
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" /> -Logo “Powered by Stripe” dapat diubah ke warna ungu atau putih dengan menempelkan URL yang sesuai ke bagian yang disorot hijau di antara tanda kutip “...”.
- Terdapat opsi yang disertakan dalam kode ini untuk mengubah penentuan ukuran serta margin tombol dan logo “Powered by Stripe”.
Opsi lain untuk membuat pemetaan bidang Anda sendiri ke templat pdf:
Dengan menggunakan templat PDF Standar, Anda dapat menyertakan {custbody_stripe_payment_link} dalam kotak teks. Namun, opsi ini sangat terbatas dalam hal kemampuan menyesuaikan penampilan tautan.
Dengan menggunakan kode sumber templat PDF Lanjutan, Anda dapat menulis kode sendiri untuk tombol yang disesuaikan, tetapi kami merekomendasikan penggunaan kode siap-rakit sebagai titik awal. Ada persyaratan teknis baru untuk tautan Halaman Pembayaran ini yang mengharuskannya menggunakan tipe bidang isi transaksi “Hyperlink”, yang mencegah Anda memanfaatkan pengaturan “Teks Tautan” pada halaman bidang isi transaksi. Hal ini mengharuskan Anda untuk menggunakan elemen dalam kode seperti “<#assign…” dan “<a href…” sebagaimana yang telah kami lakukan dalam potongan kode di atas.