อัปเกรดขั้นตอนการชำระเงินออนไลน์ของคุณ

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

หากต้องการเตรียมพร้อมสำหรับการอัปเกรดนี้ คุณจำเป็นต้องดำเนินการดังต่อไปนี้:

  1. ดูตัวอย่างการชำระเงินใหม่และทดสอบประสบการณ์การชำระเงินจากมุมมองของลูกค้า คุณอาจต้องเปลี่ยนไฟล์ checkout.liquid ก่อนจะสามารถอัปเกรดได้ ทั้งนี้ขึ้นอยู่กับการปรับแต่งที่ได้ทำไว้ในขั้นตอนการชำระเงิน
  2. เมื่อคุณพอใจกับการเปลี่ยนแปลงของคุณแล้วให้อัปเกรดร้านค้าของคุณเพื่อใช้งานการชำระเงิน Shopify ใหม่

ดูตัวอย่างการชำระเงินของคุณและทดสอบข้อผิดพลาด

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

นั่นคือการลองเป็นลูกค้าและสร้างการชำระเงินสำหรับทดสอบ หากคุณพบข้อผิดพลาดในระหว่างการทดสอบเหล่านี้การปรับแต่งการชำระเงินของคุณอาจกำลังขัดแย้งกับการปรับปรุงอื่นๆ ในเวอร์ชันใหม่ หากเป็นกรณีเช่นนี้คุณจำเป็นต้องทำการเปลี่ยนแปลงไฟล์ checkout.liquid ของคุณก่อนที่จะอัปเกรด

การแก้ไขข้อผิดพลาด

ขั้นตอน:

  1. ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. คลิกการดำเนินการจากนั้นคลิกทำซ้ำ
  3. จากธีมเพิ่มเติมให้ค้นหาธีมที่ซ้ำกันจากนั้นคลิกการดำเนินการ > แก้ไขรหัส ทำการแก้ไขและทดสอบโดยใช้ธีมที่ซ้ำกันและไม่ได้เผยแพร่เวอร์ชันนี้

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

  1. เปิดไฟล์ checkout.liquid

  2. ดูตัวอย่างไฟล์ checkout.liquid จากธีมที่ทำซ้ำของคุณโดยใช้การชำระเงิน Shopify แบบใหม่:

    1. ไปที่หน้าอัปเกรดการชำระเงินของ Shopify admin แล้วคลิกดูตัวอย่างการชำระเงิน จากนั้นเลือกธีมที่ซ้ำกัน
    2. ดำเนินการคำสั่งซื้อให้เสร็จสมบูรณ์ในการทดสอบตัวอย่าง

หากคุณมีข้อผิดพลาดหรือสังเกตเห็นปัญหาในรูปแบบที่การชำระเงินปรากฏในหน้าการชำระเงินคุณจำเป็นต้องแก้ไขไฟล์checkout.liquidเพื่อแก้ปัญหานี้

อัปเกรดเป็นการชำระเงินแบบใหม่ของ Shopify

การอัปเกรดขั้นตอนการชำระเงินของคุณคือกระบวนการแบบสองขั้นที่กำหนดให้คุณต้องอัปเกรดการชำระเงินของ Shopify และแทนที่ธีมที่เผยแพร่ในปัจจุบันด้วยสำเนาของธีมที่มีการเปลี่ยนแปลงของคุณ

เลือกช่วงเวลาที่ผู้คนเบาบางสำหรับการอัปเกรด (เช่นเช้าตรู่ ช่วงดึกหรือในช่วงสุดสัปดาห์) เพื่อลดการหยุดชะงักในการดำเนินการที่อาจเกิดขึ้น

ขั้นตอน:

  1. ในหน้าอัปเกรดการชำระเงินให้คลิกอัปเกรดขั้นตอนการชำระเงิน (ปุ่มนี้จะอยู่ที่ด้านล่างของหน้า)

  2. หากคุณพบข้อผิดพลาดเมื่อแสดงตัวอย่างธีมแรกของคุณ ก่อนอื่นคุณควรตรวจสอบให้แน่ใจว่าได้แก้ไขข้อผิดลาดดังกล่าวแล้ว (อ้างอิงถึงการแก้ไขข้อผิดพลาดด้านบน) จากนั้นให้เผยแพร่ธีมซ้ำเดิมที่อัปเดตแล้วของคุณ:

    1. จากร้านค้าออนไลน์ของคุณ ให้คลิกธีม
    2. ค้นหาสำเนาธีมของคุณแล้วคลิกการดำเนินการ > เผยแพร่

ขั้นตอนการชำระเงินของคุณจะได้รับการอัปเกรดและสำเนาธีมของคุณคือธีมปัจจุบันของคุณ

มีอะไรใหม่ในขั้นตอนการชำระเงินของ Shopify

การชำระเงินของ Shopify เวอร์ชันใหม่ประกอบด้วยการเปลี่ยนแปลงและฟีเจอร์ใหม่ๆ ดังต่อไปนี้:

  • ตัวแปรส่วนลด liquid
  • การเลือกใช้ Shop
  • การแก้ไขคำสั่งซื้อ
  • การปรับปรุงการเข้าถึง
  • ลบช่องว่างออกแล้ว
  • การแสดงวิธีการชำระเงิน
  • ลบสตริงตัวยึดตำแหน่งแล้ว
  • การแสดงที่อยู่ของลูกค้าที่บันทึกไว้
  • การตรวจสอบความปลอดภัย 3D
  • การเปลี่ยนแปลงช่อง JavaScript ของ Google Analytics เพิ่มเติม
  • การเปลี่ยนแปลง CSS
  • ข้อความแจ้งข้อผิดพลาด

ตัวแปรส่วนลด liquid

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

ตารางแสดงรายการตัวแปร liquid ใหม่
ตัวแปร ความหมาย
การชำระเงิน cart_level_discount_applications แสดงอาร์เรย์แอปพลิเคชันส่วนลดเฉพาะตะกร้าสินค้าใดๆ สำหรับขั้นตอนการชำระเงิน
line_item discount_allocations แสดงรายการการปันส่วนส่วนลดทั้งหมดที่มีจำนวนส่วนลดและการอ้างอิงไปยังแอปพลิเคชันส่วนลดหลัก line_item.discount_allocationsพร้อมใช้งานบนสินค้าเฉพาะรายการในตะกร้าสินค้าการชำระเงินคำสั่งซื้อและคำสั่งซื้อที่ยังไม่ชำระเงิน
line_item final_line_price แสดงราคารวมของสินค้าทั้งหมดในสินค้าเฉพาะรายการ ซึ่งเท่ากับ line_item.final_price คูณด้วย line_item.quantity
line_item final_price แสดงราคาของสินค้าเฉพาะรายการรวมถึงจำนวนส่วนลดตามระดับรายการทั้งหมด
line_item line_level_discount_allocations ส่งคืนรายการปันส่วนลดเฉพาะรายการที่มีจำนวนส่วนลด และการอ้างอิงไปยังแอปพลิเคชันส่วนลดหลัก line_item.line_level_discount_allocations พร้อมจำหน่ายสินค้าเฉพาะรายการในตะกร้าสินค้า การชำระเงิน คำสั่งซื้อ และคำสั่งซื้อที่ยังไม่ชำระเงิน
line_item.total_discount แสดงยอดรวมของส่วนลดทั้งหมดที่ใช้กับสินค้าเฉพาะรายการ แอตทริบิวต์นี้มีค่าหากคุณกำลังใช้งานแอปScript Editorเท่านั้น

การเลือกใช้ Shop

เพิ่มช่องหมายเลขโทรศัพท์เฉพาะไปยังหน้าแสดงสถานะ ลูกค้าจะได้รับแจ้งให้ป้อนหมายเลขโทรศัพท์มือถือเพื่อรับการอัปเดตสถานะการจัดส่งทางข้อความ ข้อความเหล่านี้ยังมีลิงก์ไปยังแอป Shop

การแก้ไขคำสั่งซื้อ

เมื่อมีการแก้ไขคำสั่งซื้อพร้อมให้บริการสำหรับผู้ขายของ Shopify Plus ระบบจะอนุญาตให้บันทึกการชำระเงินที่ค้างชำระเพิ่มเติมสำหรับคำสั่งซื้อที่ได้รับการแก้ไขโดยใช้การชำระเงิน Shopify มีการเปลี่ยนแปลงบางอย่างในหน้าการชำระเงินเพื่อให้แน่ใจว่าระบบสามารถทำงานได้ตามเป้าหมาย:

  • ลูกค้าไม่สามารถเปลี่ยนแปลงข้อมูลติดต่อที่อยู่สำหรับการจัดส่งหรือวิธีการจัดส่งได้
  • สินค้าเฉพาะรายการเพิ่มเติมที่บ่งชี้ถึงยอดรวมคำสั่งซื้อและจำนวนเงินที่ชำระแล้ว
  • ปุ่มเสร็จสิ้นการซื้อจะเปลี่ยนเป็นชำระเงินตอนนี้ จำนวนทั้งหมดเป็นจำนวนเงินที่ต้องชำระ
  • แทนที่จะเป็นข้อมูลร่องรอยเส้นทางที่แสดงว่าลูกค้าอยู่ในขั้นตอนใดในกระบวนการชำระเงินลูกค้าจะเห็นแบนเนอร์แบบพับได้ที่แสดงรายละเอียดข้อมูลเพิ่มเติมเกี่ยวกับคำสั่งซื้อดังต่อไปนี้แทน: - จำนวนการชำระเงินเพิ่มเติม
    • สินค้าที่เพิ่มหรือลบออกจากคำสั่งซื้อ
    • หมายเลขคำสั่งซื้อ

รูปภาพที่แสดงหน้าการชำระเงินเมื่อจำเป็นต้องมีการชำระเงินเพิ่มเติม

การเปลี่ยนแปลงเหล่านี้จะมีผลบังคับใช้เมื่อมีการแก้ไขคำสั่งซื้อและจำเป็นต้องมีการชำระเงินเพิ่มเติมจากลูกค้าของคุณ

หากการกำหนดค่าการชำระเงินของคุณใช้ร่องรอยเส้นทางเพื่อระบุขั้นตอนการชำระเงินปัจจุบันคุณควรใช้ออบเจ็กต์ Shopify.Checkout.step แทน ดูรหัสขั้นตอนเพื่อดูข้อมูลเพิ่มเติม

การปรับปรุงการเข้าถึง

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

  • ร่องรอยเส้นทางจะมาพร้อมกับองค์ประกอบ nav ในขั้นตอนการชำระเงินทั้งหมดแล้ว แอตทริบิวต์ของ aria-current ถูกย้ายไปยังองค์ประกอบ li จากองค์ประกอบ span
  • สรุปคำสั่งซื้อในขณะนี้อยู่ในองค์ประกอบ aside
  • ID ช่องรหัสส่วนลดสำหรับลูกค้ามือถือมีการเปลี่ยนแปลงจาก checkout_reduction_code เป็น checkout_reduction_code_mobile ในขั้นตอนการชำระเงินทั้งหมด
  • แอตทริบิวต์การเข้าถึงถูกเพิ่มไปยังแผนที่สำหรับหน้าแสดงสถานะคำขอขอบคุณและคำสั่งซื้อ ขณะนี้แผนที่มี role=region และ aria-label ด้วยที่อยู่สำหรับการจัดส่ง
  • step และ step__section wrapper divs ได้ถูกเพิ่มไปยังสถานะคำสั่งซื้อหมดสต็อกและหน้าขอบคุณ
  • องค์ประกอบ HTML5 ทางตรรกได้ถูกนำมาใช้งานไปยังขั้นตอนการชำระเงินและแอตทริบิวต์ role ได้รับการอัปเดตแล้ว - สรุปคำสั่งซื้ออยู่ในองค์ประกอบ aside
    • Div สำหรับ .main__header อยู่ในขณะนี้เป็นองค์ประกอบส่วนหัวที่มี role=banner.
    • Div สำหรับ .main__content อยู่ในขณะนี้องค์ประกอบส่วนหลักที่มี role=main
    • Div สำหรับ .main__footer อยู่ในขณะนี้องค์ประกอบส่วนท้ายที่มี role=contentinfo
    • Div สำหรับ banner ในขณะนี้เป็นส่วนหัวที่มี role=banner.

ลบช่องว่างออกแล้ว

หน้าสถานะคำสั่งซื้อ หน้าหมดสต็อก และหน้าขอบคุณที่มีพื้นที่สีขาวถูกลบออกระหว่างชื่อร้านค้าและหมายเลขคำสั่งซื้อ ช่องว่างพิเศษนี้ถูกลบออกจากส่วน div.section.section--page-title

การแสดงวิธีการชำระเงิน

ยอดรวมของคำสั่งซื้อจะปรากฏให้ลูกค้าในหน้าสถานะคำสั่งซื้อในส่วนวิธีการชำระเงิน

ลบสตริงตัวยึดตำแหน่งแล้ว

ตัวยึดตำแหน่งอีเมลและช่องตัวยึดตำแหน่งอีเมลหรือโทรศัพท์ถูกลบออกจากตัวเลือกภาษาในการตั้งค่าธีมของคุณ การเปลี่ยนแปลงใดๆ ที่จำเป็นสามารถทำได้ในช่องใบจ่าหน้าอีเมลและอีเมลหรือใบจ่าหน้าโทรศัพท์ตามลำดับ หากต้องการเข้าถึงช่องเหล่านี้ให้ไปที่ธีม > ร้านค้าออนไลน์จากนั้นคลิกการดำเนินการ>แก้ไขภาษา> การชำระเงินและระบบ

การแสดงที่อยู่ของลูกค้าที่บันทึกไว้

วิธีที่บันทึกที่อยู่ไว้จะแสดงขึ้นในระหว่างการชำระเงินสำหรับลูกค้าที่เข้าสู่ระบบและมีการเปลี่ยนแปลง

ตัวเลือกที่อยู่จะแสดงในคำสั่งซื้อต่อไปนี้:

  1. ที่อยู่ที่บันทึกไว้เป็นค่าเริ่มต้น
  2. ที่อยู่ที่เพิ่มเข้ามาล่าสุดจากที่สุดถึงอย่างน้อยที่สุด
  3. ตัวเลือกในการใช้ที่อยู่ใหม่

เมนูดรอปดาวน์จะแสดงที่อยู่สูงสุดห้าแห่ง

การตรวจสอบความปลอดภัย 3D

เทคโนโลยี 3D Secure เพิ่มระดับการรักษาความปลอดภัยเพิ่มเติมที่ลูกค้าจำเป็นต้องใช้เพื่อดำเนินการให้เสร็จสิ้นก่อนจึงจะสามารถทำการสั่งซื้อและใช้งานบริการต่างๆ เช่นบัตร Visa, Mastercard Identity หรือ Amex SafeKey ได้ในระหว่างขั้นตอนการชำระเงินลูกค้าบางรายอาจถูกเปลี่ยนเส้นทางไปยังพอร์ทัลของธนาคารของตนเพื่อการยืนยันตัวตนเพิ่มเติม หากต้องการดูข้อมูลเพิ่มเติมโปรดดูที่การทำความเข้าใจกับ PSD2 และการยืนยันตัวตนที่รัดกุมของลูกค้า

ผู้ขายที่อยู่ในเขตเศรษฐกิจยุโรป (EEA) และสหราชอาณาจักรสามารถใช้ Cardinal เพื่อเสนอบริการ 3D Secure ได้ ดูที่ 3D Secure ด้วย Cardinal สำหรับข้อมูลเพิ่มเติม

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

การเปลี่ยนแปลงช่อง JavaScript ของ Google Analytics เพิ่มเติม

JavaScript ที่ป้อนลงในส่วนของGoogle Analytics Javascript เพิ่มเติมในส่วน Shopify admin ของคุณในร้านค้าออนไลน์ > >การกำหนดค่าได้ถูกเพิ่มลงในการชำระเงินเป็น iFrame ที่ไม่สามารถมองเห็นได้ การดำเนินการนี้จะไม่ส่งผลต่อ JavaScript ที่ใช้สำหรับวัตถุประสงค์ด้านการวิเคราะห์แต่จะไม่สามารถทำการเปลี่ยนแปลงอื่นๆ ในขั้นตอนการชำระเงินได้ หากคุณต้องการเพิ่ม JavaScript ที่กำหนดเองไปยังขั้นตอนการชำระเงินของคุณด้วยเหตุผลอื่นๆให้เพิ่มไปยังไฟล์ checkout.liquid โดยตรง

การเปลี่ยนแปลง CSS

heading-* และได้เพิ่มระดับ CSS text-container ไปยังขั้นตอนการชำระเงินทั้งหมดแล้ว

ข้อความแจ้งข้อผิดพลาด

มีการเพิ่มแบนเนอร์ข้อผิดพลาดที่จะแจ้งให้ลูกค้าทราบเมื่อเลือกวิธีการชำระเงินแบบด่วนที่เลือกไว้ไม่พร้อมใช้งาน แบนเนอร์นี้จะปรากฏที่ด้านบนของขั้นตอนข้อมูลติดต่อของขั้นตอนการชำระเงิน

แบนเนอร์ข้อผิดพลาดแจ้งให้ลูกค้าทราบว่าอัตราค่าจัดส่งก่อนหน้านี้ไม่ถูกต้องหรือถูกย้ายไปแล้ว แบนเนอร์นี้จะปรากฏเหนือตัวเลือกการจัดส่งที่มีให้บริการ

ลิงก์ที่เกี่ยวข้อง

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี