# ปุ่ม Stripe Connector for NetSuite Pay Now

เมื่อใช้หน้าการชำระเงินตามใบแจ้งหนี้ของฟีเจอร์ [Stripe Connector for NetSuite](https://docs.stripe.com/connectors/netsuite/invoice-payment-page) หรือ[ลิงก์ชำระเงินตามใบแจ้งหนี้](https://docs.stripe.com/connectors/netsuite/invoice-payment-link/overview) (แบบบริการตัวเองและฟรี) คุณจะแมปลิงก์หน้าการชำระเงินจากบันทึกข้อมูลใบแจ้งหนี้ที่เป็นระบบภายในเข้ากับใบแจ้งหนี้แบบ PDF ของลูกค้าได้หลายวิธี เพื่อช่วยให้ลูกค้าสามารถชำระเงินได้ ต่อไปนี้คือตัวอย่างโค้ดสำหรับปุ่ม "ชำระเลย" แบบสำเร็จรูปที่นำไปแทรกลงในซอร์สโค้ดของ PDF ขั้นสูงได้ โปรดดูคำแนะนำและตัวเลือกการปรับแต่งด้านล่าง
ตัวอย่างเทมเพลต PDF ขั้นสูง พร้อมด้วยตัวอย่างโค้ด
ตัวอย่างโค้ดที่ใช้สร้างปุ่ม "ชำระเลย"
```
 <#assign rawLink = record.custbody_stripe_payment_link>
<#assign paymentLink=rawLink?replace('.*href="([^"]+)".*', '$1', 'r')>
```
- [ชําระตอนนี้]($%7BpaymentLink%7D)
---
- 
ส่วนที่เป็นสีม่วงด้านล่างคือตำแหน่งแนะนำสำหรับการวางตัวอย่างโค้ดของปุ่ม "ชำระเลย" ลงในเทมเพลต PDF ขั้นสูง
**วิธีติดตั้งตัวอย่างโค้ดของเรา**
1. ยืนยันหรือกำหนดค่าเทมเพลต PDF ที่จะนำไปใช้กับแบบฟอร์มใบแจ้งหนี้ที่คุณติดตั้งช่องข้อมูลลิงก์หน้าชำระเงิน
1. ไปที่ การปรับแต่ง>แบบฟอร์ม>แบบฟอร์มธุรกรรม ค้นหาและแก้ไขแบบฟอร์มใบแจ้งหนี้จากรายการดังกล่าว และตรวจสอบว่ามีการกําหนดค่าให้ใช้เทมเพลต PDF ขั้นสูง คัดลอกหรือจดจําชื่อเทมเพลตนั้น
1. ไปที่ การปรับแต่ง>แบบฟอร์ม>แบบฟอร์ม PDF/HTMLขั้นสูง เลือกปุ่มที่ด้านขวาบนเพื่อเปิดเผยซอร์สโค้ด
1. เว้นแต่คุณจะเริ่มต้นด้วยเทมเพลต PDF ขั้นสูงเริ่มต้นสำหรับใบแจ้งหนี้ เทมเพลตของคุณน่าจะได้รับการปรับแต่งไว้แล้ว ซอร์สโค้ด PDF ขั้นสูงเขียนด้วย HTML พร้อมองค์ประกอบ CSS และ FreeMarker ตัวอย่างโค้ดด้านบนนี้โดยพื้นฐานแล้วคือ "ตาราง" ที่มีพารามิเตอร์ "<#assign.." สองตัวอยู่ข้างหน้า โดยทั่วไปแล้วสามารถคัดลอกและวางตัวอย่างโค้ดทั้งหมดลงในเทมเพลตในตำแหน่งใดก็ได้ที่สามารถวางตารางแต่ละตารางได้
1. แนะนํา: คลิกปุ่ม "ตัวอย่าง" ที่มุมขวาบนของหน้าซอร์สโค้ด ซึ่งจะเปิดแท็บใหม่ที่มีเทมเพลตของแบบฟอร์ม เปิดแท็บนี้ไว้ในแท็บแยกต่างหากเพื่อให้คุณสามารถอ้างอิงตำแหน่งปัจจุบันของโค้ดได้ โดยทั่วไปแล้ว การวางตารางไว้ระหว่างองค์ประกอบ และ ที่มีอยู่ในซอร์สโค้ดจะง่ายที่สุด แต่สามารถวางไว้ในส่วนหัวหรือส่วนท้ายได้เช่นกัน
1. คุณต้องหาจุดเริ่มต้นและจุดสิ้นสุดของโค้ดแต่ละส่วน จากนั้นจึงวางตัวอย่างโค้ดลงในบริเวณดังกล่าว มิฉะนั้นจะเป็นการรบกวนการทำงานของโค้ดส่วนนั้น
   1. ตัวอย่างเช่น คุณจะเห็นลำดับขององค์ประกอบ HTML ที่ใช้สร้างตาราง ซึ่งมักจะเริ่มต้นด้วย
คุณสามารถวางตัวอย่างโค้ดระหว่างตารางที่มีอยู่ได้
**ตัวเลือกการปรับแต่ง:**
ตัวอย่างโค้ดสามารถทำงานได้ทันทีเพียงคัดลอกและวางไว้ในตำแหน่งที่เหมาะสมในซอร์สโค้ด แต่คุณสามารถปรับแต่งรูปลักษณ์และตําแหน่งได้ด้วยตัวเลือกต่อไปนี้
* align="left" -เปลี่ยนโค้ดส่วนนี้ (ซึ่งมีการใช้สองครั้ง) เป็น “center” หรือ “right” เพื่อย้ายปุ่ม “ชำระเลย” และโลโก้ “Powered by Stripe” ไปยังตำแหน่งที่ต้องการในหน้าเว็บ
* background-color:#635BFF -เปลี่ยนตัวระบุสี เพื่อเปลี่ยนสีพื้นหลังของปุ่ม
* color:white -เปลี่ยนคำว่า “white” เป็นชื่อสี HTML อื่น เพื่อเปลี่ยนสีของข้อความภายในปุ่ม
* font-weight:bold -เปลี่ยนคำว่า “bold” เป็นตัวเลือกอื่นในภาษา HTML เพื่อเปลี่ยนรูปแบบอักษรภายในปุ่ม
* ">Pay Now -เปลี่ยนคำว่า “ชำระเลย” เป็นคำที่คุณต้องการ
* 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;"/> -โลโก้ “Powered by Stripe” สามารถเปลี่ยนเป็นสีม่วงหรือสีขาวได้โดยวาง url ที่เกี่ยวข้องลงในส่วนที่ไฮไลต์สีเขียวระหว่างเครื่องหมายคำพูด “...”
  * สีม่วง: [https://cdn.brandfolder.io/KGT2DTA4/at/rvgw5pc69nhv9wkh7rw8ckv/Powered_by_Stripe_-_blurple.png](https://cdn.brandfolder.io/KGT2DTA4/at/rvgw5pc69nhv9wkh7rw8ckv/Powered_by_Stripe_-_blurple.png)
  * White (สำหรับสีพื้นหลัง): [https://cdn.brandfolder.io/KGT2DTA4/at/v5bcwzcgcmgbp3676v3rg79q/Powered_by_Stripe_-_white.svg](https://cdn.brandfolder.io/KGT2DTA4/at/v5bcwzcgcmgbp3676v3rg79q/Powered_by_Stripe_-_white.svg)
* ภายในโค้ดนี้มีตัวเลือกสำหรับเปลี่ยนขนาดและขอบของทั้งปุ่ม และโลโก้ “Powered by Stripe”
**ตัวเลือกอื่นๆ สำหรับสร้างช่องข้อความของคุณเองที่จะแมปกับเทมเพลต PDF:**
คุณสามารถวาง {custbody_stripe_payment_link} ลงในช่องข้อความโดยใช้เทมเพลต PDF มาตรฐานได้ อย่างไรก็ตาม ตัวเลือกนี้มีข้อจำกัดอย่างมากในการปรับแต่งรูปลักษณ์ของลิงก์
คุณสามารถเขียนโค้ดเองเพื่อสร้างปุ่มแบบกำหนดเองได้โดยใช้ซอร์สโค้ดของเทมเพลต PDF มาตรฐานได้ แต่เราขอแนะนำให้ใช้โค้ดสำเร็จรูปเป็นจุดเริ่มต้น มีข้อกำหนดทางเทคนิคใหม่สำหรับลิงก์หน้าการชำระเงิน ซึ่งกำหนดให้ต้องใช้ฟิลด์เนื้อหาธุรกรรมแบบ "ไฮเปอร์ลิงก์" ซึ่งทำให้คุณไม่สามารถใช้การตั้งค่า “ข้อความลิงก์” ในหน้าเนื้อหาธุรกรรมได้ ในกรณีนี้ คุณต้องใช้องค์ประกอบในโค้ดของคุณ เช่น "<#assign..." และ "