เมื่อใช้หน้าการชำระเงินตามใบแจ้งหนี้ของฟีเจอร์ Stripe Connector for NetSuite หรือลิงก์ชำระเงินตามใบแจ้งหนี้ (แบบบริการตัวเองและฟรี) คุณจะแมปลิงก์หน้าการชำระเงินจากบันทึกข้อมูลใบแจ้งหนี้ที่เป็นระบบภายในเข้ากับใบแจ้งหนี้แบบ PDF ของลูกค้าได้หลายวิธี เพื่อช่วยให้ลูกค้าสามารถชำระเงินได้ ต่อไปนี้คือตัวอย่างโค้ดสำหรับปุ่ม "ชำระเลย" แบบสำเร็จรูปที่นำไปแทรกลงในซอร์สโค้ดของ PDF ขั้นสูงได้ โปรดดูขั้นตอนและตัวเลือกการปรับแต่งด้านล่าง
ตัวอย่างเทมเพลต PDF ขั้นสูง พร้อมด้วยตัวอย่างโค้ด
ตัวอย่างโค้ดที่ใช้สร้างปุ่ม "ชำระเลย"
<#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>
ส่วนที่เป็นสีม่วงด้านล่างคือตำแหน่งแนะนำสำหรับการวางตัวอย่างโค้ดของปุ่ม "ชำระเลย" ลงในเทมเพลต PDF ขั้นสูง
วิธีติดตั้งตัวอย่างโค้ดของเรา
- ยืนยันหรือกำหนดค่าเทมเพลต PDF ที่จะนำไปใช้กับแบบฟอร์มใบแจ้งหนี้ที่คุณติดตั้งช่องข้อมูลลิงก์หน้าชำระเงิน
- ไปยัง การปรับแต่ง>แบบฟอร์ม>แบบฟอร์มธุรกรรม ค้นหาและแก้ไขแบบฟอร์มใบแจ้งหนี้จากรายการดังกล่าว และตรวจสอบให้แน่ใจว่าได้กำหนดค่าแบบฟอร์มให้ใช้เทมเพลต PDF ขั้นสูงแล้ว คัดลอกหรือจำชื่อเทมเพลตไว้
- ไปยัง การปรับแต่ง>แบบฟอร์ม>แบบฟอร์ม PDF ขั้นสูง/HTML ทำเครื่องหมายที่ปุ่มเปิดปิดบริเวณมุมขวาบนเพื่อดูซอร์สโค้ด
- เทมเพลตจะได้รับการปรับแต่งมาเรียบร้อยแล้ว เว้นแต่คุณจะเริ่มต้นด้วยเทมเพลต PDF ขั้นสูงเริ่มต้นสำหรับใบแจ้งหนี้ ซอร์สโค้ดของ PDF ขั้นสูงเขียนด้วยภาษา HTML และรวมองค์ประกอบ CSS และ FreeMarker เอาไว้ ตัวอย่างโค้ดข้างต้นใช้สำหรับการสร้าง "ตาราง" โดยมีพารามิเตอร์ “<#assign..” 2 รายการก่อนหน้าตาราง คุณสามารถคัดลอกตัวอย่างโค้ดทั้งหมดไปวางตรงไหนก็ได้บนเทมเพลต บริเวณที่ต้องการจะสร้างตาราง
- แนะนำ: คลิกปุ่ม "ตัวอย่าง" ที่มุมขวามุมของหน้าซอร์สโค้ด ระบบจะเปิดแท็บใหม่ขึ้นมาพร้อมด้วยเทมเพลตของแบบฟอร์ม ให้คุณเปิดแท็บนี้ไว้ตลอดเวลาเพื่อจะได้ตรวจสอบดูว่าคุณกำลังอยู่ตรงไหนในโค้ด โดยทั่วไปแล้ว วิธีที่ง่ายที่สุดคือวางตารางระหว่าง <body> และ </body> ที่มีอยู่แล้วในซอร์สโค้ด แต่ก็สามารถวางไว้ในส่วนหัวหรือส่วนท้ายได้เช่นกัน
- คุณต้องหาจุดเริ่มต้นและจุดสิ้นสุดของโค้ดแต่ละส่วน จากนั้นจึงวางตัวอย่างโค้ดลงในบริเวณดังกล่าว มิฉะนั้นจะเป็นการรบกวนการทำงานของโค้ดส่วนนั้น
- ตัวอย่างเช่น คุณจะเห็นลำดับขององค์ประกอบ HTML ที่ใช้สร้างตาราง ซึ่งมักจะเริ่มต้นด้วย <table> และจบด้วย </table> คุณสามารถวางตัวอย่างโค้ดระหว่างตารางที่มีอยู่ได้
ตัวเลือกการปรับแต่ง:
ตัวอย่างโค้ดจะสามารถใช้งานได้ทันที เพียงคัดลอกและวางในบริเวณที่เหมาะสมในซอร์สโค้ด อย่างไรก็ตาม คุณสามารถปรับแต่งหน้าตาและตำแหน่งได้โดยใช้ตัวเลือกต่อไปนี้
- align="left" -เปลี่ยนโค้ดส่วนนี้ (ซึ่งมีการใช้สองครั้ง) เป็น “center” หรือ “right” เพื่อย้ายปุ่ม “ชำระเลย” และโล้โก้ “Powered by Stripe” ไปยังตำแหน่งที่ต้องการในหน้าเว็บ
- background-color: #635BFF -เปลี่ยนตัวระบุสี เพื่อเปลี่ยนสีพื้นหลังของปุ่ม
- color: white -เปลี่ยนคำว่า “white” เป็นชื่อสี HTML อื่น เพื่อเปลี่ยนสีของข้อความภายในปุ่ม
- font-weight: bold -เปลี่ยนคำว่า “bold” เป็นตัวเลือกอื่นในภาษา HTML เพื่อเปลี่ยนรูปแบบอักษรภายในปุ่ม
- ">Pay Now</a> -เปลี่ยนคำว่า “ชำระเลย” เป็นคำที่คุณต้องการ
- src="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 ที่เกี่ยวข้องลงในส่วนที่ไฮไลต์สีเขียวระหว่างเครื่องหมายคำพูด “...”
- ภายในโค้ดนี้มีตัวเลือกสำหรับเปลี่ยนขนาดและขอบของทั้งปุ่ม และโลโก้ “Powered by Stripe”
ตัวเลือกอื่นๆ สำหรับสร้างช่องข้อความของคุณเองที่จะแมปกับเทมเพลต PDF
คุณสามารถวาง {custbody_stripe_payment_link} ลงในช่องข้อความโดยใช้เทมเพลต PDF มาตรฐาน อย่างไรก็ตาม ตัวเลือกนี้มีข้อจำกัดอย่างมากในการปรับแต่งรูปลักษณ์ของลิงก์
คุณสามารถใช้ซอร์สโค้ดของเทมเพลต PDF ขั้นสูง และเขียนโค้ดของตัวเองเพื่อปรับแต่งปุ่มได้ แต่เราแนะนำให้ใช้โค้ดสำเร็จรูปเป็นจุดตั้งต้น มีข้อกำหนดทางเทคนิคใหม่ๆ หลายประการสำหรับลิงก์หน้าการชำระเงินนี้ ซึ่งกำหนดให้ใช้ช่องข้อมูลเนื้อหาธุรกรรมประเภท "Hyperlink" เพื่อป้องกันไม่ให้คุณใช้การตั้งค่า “Link Text” ในหน้าช่องข้อมูลเนื้อหาธุรกรรม ดังนั้น คุณต้องใช้องค์ประกอบ เช่น “<#assign…” และ “<a href…” ในโค้ดของคุณอย่างที่เรายกตัวอย่างในตัวอย่างโค้ดข้างต้น