ปุ่ม Stripe Connector for NetSuite Pay Now

เมื่อใช้หน้าการชำระเงินตามใบแจ้งหนี้ของฟีเจอร์ Stripe Connector for NetSuite หรือลิงก์ชำระเงินตามใบแจ้งหนี้ (แบบบริการตัวเองและฟรี) คุณจะแมปลิงก์หน้าการชำระเงินจากบันทึกข้อมูลใบแจ้งหนี้ที่เป็นระบบภายในเข้ากับใบแจ้งหนี้แบบ PDF ของลูกค้าได้หลายวิธี เพื่อช่วยให้ลูกค้าสามารถชำระเงินได้ ต่อไปนี้คือตัวอย่างโค้ดสำหรับปุ่ม "ชำระเลย" แบบสำเร็จรูปที่นำไปแทรกลงในซอร์สโค้ดของ PDF ขั้นสูงได้ โปรดดูขั้นตอนและตัวเลือกการปรับแต่งด้านล่าง

ตัวอย่างเทมเพลต PDF ขั้นสูง พร้อมด้วยตัวอย่างโค้ด

image13.png

ตัวอย่างโค้ดที่ใช้สร้างปุ่ม "ชำระเลย"

<#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 ขั้นสูง

image6.png

วิธีติดตั้งตัวอย่างโค้ดของเรา

  1. ยืนยันหรือกำหนดค่าเทมเพลต PDF ที่จะนำไปใช้กับแบบฟอร์มใบแจ้งหนี้ที่คุณติดตั้งช่องข้อมูลลิงก์หน้าชำระเงิน
    1. ไปยัง การปรับแต่ง>แบบฟอร์ม>แบบฟอร์มธุรกรรม ค้นหาและแก้ไขแบบฟอร์มใบแจ้งหนี้จากรายการดังกล่าว และตรวจสอบให้แน่ใจว่าได้กำหนดค่าแบบฟอร์มให้ใช้เทมเพลต PDF ขั้นสูงแล้ว คัดลอกหรือจำชื่อเทมเพลตไว้
    2. ไปยัง การปรับแต่ง>แบบฟอร์ม>แบบฟอร์ม PDF ขั้นสูง/HTML ทำเครื่องหมายที่ปุ่มเปิดปิดบริเวณมุมขวาบนเพื่อดูซอร์สโค้ด
  2. เทมเพลตจะได้รับการปรับแต่งมาเรียบร้อยแล้ว เว้นแต่คุณจะเริ่มต้นด้วยเทมเพลต PDF ขั้นสูงเริ่มต้นสำหรับใบแจ้งหนี้ ซอร์สโค้ดของ PDF ขั้นสูงเขียนด้วยภาษา HTML และรวมองค์ประกอบ CSS และ FreeMarker เอาไว้ ตัวอย่างโค้ดข้างต้นใช้สำหรับการสร้าง "ตาราง" โดยมีพารามิเตอร์ “<#assign..” 2 รายการก่อนหน้าตาราง คุณสามารถคัดลอกตัวอย่างโค้ดทั้งหมดไปวางตรงไหนก็ได้บนเทมเพลต บริเวณที่ต้องการจะสร้างตาราง
    1. แนะนำ: คลิกปุ่ม "ตัวอย่าง" ที่มุมขวามุมของหน้าซอร์สโค้ด ระบบจะเปิดแท็บใหม่ขึ้นมาพร้อมด้วยเทมเพลตของแบบฟอร์ม ให้คุณเปิดแท็บนี้ไว้ตลอดเวลาเพื่อจะได้ตรวจสอบดูว่าคุณกำลังอยู่ตรงไหนในโค้ด โดยทั่วไปแล้ว วิธีที่ง่ายที่สุดคือวางตารางระหว่าง <body> และ </body> ที่มีอยู่แล้วในซอร์สโค้ด แต่ก็สามารถวางไว้ในส่วนหัวหรือส่วนท้ายได้เช่นกัน
    2. คุณต้องหาจุดเริ่มต้นและจุดสิ้นสุดของโค้ดแต่ละส่วน จากนั้นจึงวางตัวอย่างโค้ดลงในบริเวณดังกล่าว มิฉะนั้นจะเป็นการรบกวนการทำงานของโค้ดส่วนนั้น
      1. ตัวอย่างเช่น คุณจะเห็นลำดับขององค์ประกอบ HTML ที่ใช้สร้างตาราง ซึ่งมักจะเริ่มต้นด้วย <table> และจบด้วย </table> คุณสามารถวางตัวอย่างโค้ดระหว่างตารางที่มีอยู่ได้

ตัวเลือกการปรับแต่ง:

ตัวอย่างโค้ดจะสามารถใช้งานได้ทันที เพียงคัดลอกและวางในบริเวณที่เหมาะสมในซอร์สโค้ด อย่างไรก็ตาม คุณสามารถปรับแต่งหน้าตาและตำแหน่งได้โดยใช้ตัวเลือกต่อไปนี้

ตัวเลือกอื่นๆ สำหรับสร้างช่องข้อความของคุณเองที่จะแมปกับเทมเพลต PDF

คุณสามารถวาง {custbody_stripe_payment_link} ลงในช่องข้อความโดยใช้เทมเพลต PDF มาตรฐาน อย่างไรก็ตาม ตัวเลือกนี้มีข้อจำกัดอย่างมากในการปรับแต่งรูปลักษณ์ของลิงก์

คุณสามารถใช้ซอร์สโค้ดของเทมเพลต PDF ขั้นสูง และเขียนโค้ดของตัวเองเพื่อปรับแต่งปุ่มได้ แต่เราแนะนำให้ใช้โค้ดสำเร็จรูปเป็นจุดตั้งต้น มีข้อกำหนดทางเทคนิคใหม่ๆ หลายประการสำหรับลิงก์หน้าการชำระเงินนี้ ซึ่งกำหนดให้ใช้ช่องข้อมูลเนื้อหาธุรกรรมประเภท "Hyperlink" เพื่อป้องกันไม่ให้คุณใช้การตั้งค่า “Link Text” ในหน้าช่องข้อมูลเนื้อหาธุรกรรม ดังนั้น คุณต้องใช้องค์ประกอบ เช่น “<#assign…” และ “<a href…” ในโค้ดของคุณอย่างที่เรายกตัวอย่างในตัวอย่างโค้ดข้างต้น