# Tombol Bayar Sekarang Stripe Connector for NetSuite

Saat menggunakan Stripe Connector for NetSuite [halaman pembayaran invoice](https://docs.stripe.com/connectors/netsuite/invoice-payment-page) atau [tautan pembayaran invoice](https://docs.stripe.com/connectors/netsuite/invoice-payment-link/overview) (gratis atau layanan mandiri), terdapat beberapa cara untuk memetakan tautan halaman pembayaran dari catatan invoice internal ke PDF invoice yang ditujukan kepada pelanggan, sehingga pelanggan Anda dapat melakukan pembayaran. Berikut ini adalah potongan kode tombol “Bayar Sekarang” yang siap-rakit dan dapat disisipkan ke dalam kode sumber Advanced PDF. Lihat petunjuk serta opsi penyesuaian di bawah ini.
Pratinjau templat Advanced PDF 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')>
```
- [Bayar Sekarang]($%7BpaymentLink%7D)
---
- 
Bagian ungu di bawah ini adalah lokasi yang direkomendasikan untuk potongan kode tombol “Bayar Sekarang” dalam templat Advanced PDF:
**Cara memasang potongan kode kami:**
1. Verifikasikan atau konfigurasikan templat PDF mana yang sedang digunakan oleh formulir invoice tempat Anda menginstal bidang Link Halaman Pembayaran.
1. Arahkan ke Kustomisasi > Formulir > Formulir Transaksi. Temukan dan Edit formulir invoice dari daftar tersebut, lalu pastikan formulir tersebut dikonfigurasi untuk menggunakan templat Advanced PDF. Salin atau ingat nama templat tersebut.
1. Arahkan ke Kustomisasi > Formulir > PDF/HTML Lanjutan. Aktifkan toggle di kanan atas untuk menampilkan kode sumber.
1. Kecuali Anda memulai dengan templat Advanced PDF bawaan untuk invoice, kemungkinan besar templat Anda sudah pernah disesuaikan sebelumnya. Kode sumber Advanced PDF ditulis dalam HTML dengan elemen CSS dan FreeMarker. Potongan kode di atas pada dasarnya adalah sebuah “tabel” dengan dua parameter “<#assign..” di depannya. Seluruh potongan kode tersebut umumnya dapat disalin dan ditempelkan di mana saja pada templat, selama bagian tersebut memungkinkan penempatan sebuah tabel.
1. Disarankan: klik tombol “Preview” di pojok kanan atas halaman kode sumber. Tindakan ini akan membuka tab baru yang menampilkan pratinjau visual dari templat formulir. Biarkan tab ini tetap terbuka agar Anda dapat merujuk posisi Anda di dalam kode. Secara umum, tabel paling mudah ditempelkan di antara elemen dan yang sudah ada di kode sumber, namun juga dapat ditempelkan di bagian header atau footer.
1. Anda perlu menemukan awal dan akhir dari setiap blok kode, lalu tempelkan potongan kode di ruang tersebut, bukan dengan menyisipkannya di tengah-tengah sebuah blok kode.
   1. Sebagai contoh, Anda akan melihat hierarki elemen HTML yang digunakan untuk membuat tabel, yang umumnya dimulai dengan
. Anda dapat menempelkan potongan kode di antara tabel yang sudah ada.
**Opsi penyesuaian:**
Potongan kode tersebut akan berfungsi apa adanya hanya dengan menyalin dan menempelkannya ke lokasi yang sesuai dalam kode sumber. Namun, Anda dapat menyesuaikan tampilan dan posisinya lebih lanjut dengan opsi berikut:
* align="left" -Ubah kedua instance ini yang muncul di bawah menjadi “tengah” atau “kanan” untuk menyelaraskan tombol “Bayar Sekarang” dan logo “Didukung oleh Stripe” ke posisi tersebut di halaman.
* background-color:#635BFF -Ubah penanda warna ini untuk mengubah warna latar belakang tombol.
* color:white -Ubah teks warna “putih” menjadi nama warna HTML lain untuk mengubah warna teks pada tombol.
* font-weight:bold -Ubah teks gaya huruf “tebal” (bold) menjadi opsi HTML lain untuk jenis huruf di dalam tombol.
* ">Pay Now -Ubah teks “Bayar Sekarang” menjadi teks pilihan Anda sendiri.
* src="[https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png](https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png)" alt="Powered by Stripe"style="width:90px;height:20px;"/> -Logo “Didukung oleh Stripe” dapat diubah menjadi warna ungu atau putih dengan cara menempelkan URL yang sesuai ke dalam bagian berwarna hijau di antara tanda kutip “...”.
  * Ungu: [https://cdn.brandfolder.io/KGT2DTA4/at/rvgw5pc69nhv9wkh7rw8ckv/Powered_by_Stripe_-_blurple.png](https://cdn.brandfolder.io/KGT2DTA4/at/rvgw5pc69nhv9wkh7rw8ckv/Powered_by_Stripe_-_blurple.png)
  * Putih (untuk latar belakang berwarna): [https://cdn.brandfolder.io/KGT2DTA4/at/v5bcwzcgcmgbp3676v3rg79q/Powered_by_Stripe_-_white.svg](https://cdn.brandfolder.io/KGT2DTA4/at/v5bcwzcgcmgbp3676v3rg79q/Powered_by_Stripe_-_white.svg)
* Terdapat opsi di dalam kode ini untuk mengubah ukuran dan margin baik pada tombol maupun logo “Didukung oleh Stripe”.
**Opsi lain untuk membuat pemetaan kolom Anda sendiri ke dalam templat pdf:**
Dengan menggunakan templat PDF Standar, Anda dapat menyertakan tautan {custbody_stripe_payment_link} di dalam kotak teks. Namun, opsi ini sangat terbatas dalam hal kemampuan untuk menyesuaikan tampilan tautan tersebut.
Dengan menggunakan kode sumber templat PDF Lanjutan, Anda dapat menulis kode sendiri untuk membuat tombol yang disesuaikan. Namun, kami menyarankan untuk menggunakan kode bawaan yang siap-rakit sebagai titik awal. Ada persyaratan teknis baru untuk tautan Halaman Pembayaran ini yang mengharuskannya menggunakan jenis bidang transaction body “Hyperlink”, yang mencegah Anda menggunakan pengaturan “Link Text” pada halaman bidang transaction body. Hal ini mengharuskan Anda untuk menggunakan elemen-elemen dalam kode, seperti “<#assign…” dan “