Payment Element คือคอมโพเนนต์ UI แบบฝังได้ที่ทำให้คุณรองรับวิธีการชำระเงินของท้องถิ่นจากทั่วโลกได้
เพื่อช่วยเหลือทั้งผู้ใช้ที่รับชำระเงินแบบครั้งเดียวและผู้ใช้ที่รับชำระเงินตามรอบในการรองรับวิธีการชำระเงินที่หลากหลาย Payment Element จึงรองรับเส้นทางการผสานการทำงานหลักทั้ง 3 เส้นทาง ดังนี้
การชำระเงินแบบครั้งเดียวผ่าน PaymentIntents
คุณสามารถดูคู่มือเกี่ยวกับการผสานการทำงานได้ที่ https://stripe.com/docs/stripe-js/payment-element/accept-a-payment
การชำระเงินตามรอบบิลผ่าน PaymentIntents
คุณสามารถดูคู่มือเกี่ยวกับการผสานการทำงานได้ที่ https://stripe.com/docs/billing/subscriptions/elements#collect-payment
การชำระเงินตามรอบบิลผ่าน SetupIntents
คุณสามารถดูคู่มือเกี่ยวกับการผสานการทำงานได้ที่ https://stripe.com/docs/stripe-js/payment-element/set-up-payment
Stripe กำลังเปิดตัว Elements รุ่นใหม่ด้วย Payment Element (โปรดดูที่ https://stripe.com/payments/elements) ก่อนหน้าที่จะมี Payment Element ผู้ค้าจำเป็นต้องสร้างและดูแลรักษาการผสานการทำงานใหม่สำหรับวิธีการชำระเงินที่แยกกันแต่ละวิธี เมื่อใช้ Payment Element ผู้ค้าจะสามารถประหยัดทั้งเวลาและทรัพยากรได้มาก เนื่องจากคุณไม่จำเป็นต้องทำเช่นนั้นอีกต่อไป
ฟีเจอร์หลักบางส่วนของ Payment Element มีดังนี้
- รองรับวิธีการชำระเงินหลายวิธีผ่านการผสานการทำงาน Elements เพียงรายการเดียว
- ผลิตภัณฑ์นี้จะแสดงตัวเลือกการชำระเงินที่เกี่ยวข้องกับผู้ซื้อแต่ละรายผ่านตรรกะการจัดเรียงโดยพิจารณาจากตำแหน่งที่ตั้งในประเทศของลูกค้า (ซึ่งนำมาจากที่อยู่ IP) และภาษาที่เลือกใช้ (ซึ่งนำมาจากภาษาของเบราว์เซอร์)
- ผลิตภัณฑ์นี้ได้รับการแปลเป็นภาษาต่างๆ ถึง 42 ภาษา ดังนี้ https://stripe.com/docs/js/appendix/supported_locales
- ผู้ค้าสามารถปรับแต่งสไตล์ของผลิตภัณฑ์นี้ (แบบอักษร, สี, การเว้นวรรค ฯลฯ) ให้เหมาะกับแบรนด์ของตนได้
- ผลิตภัณฑ์นี้ปรับการแสดงผลให้เหมาะกับอุปกรณ์เคลื่อนที่ได้
- ผลิตภัณฑ์นี้มาพร้อมฟังก์ชันการตรวจสอบอินพุตในตัว
- ผลิตภัณฑ์นี้เป็นไปตามข้อกำหนดของ PCI-DSS
- ผลิตภัณฑ์นี้สามารถทำงานร่วมกับ PaymentIntents/SetupIntents ได้
Stripe Elements คือชุดคอมโพเนนต์ UI สำเร็จรูป เช่น อินพุตและปุ่มต่างๆ ซึ่งมีไว้สำหรับใช้สร้างขั้นตอนการชำระเงินของคุณ วิธีการชำระเงินแต่ละวิธี (บัตรเครดิต, บัตรเดบิต ฯลฯ) จะมี Element ที่เชื่อมโยงอยู่ Payment Element คือคอมโพเนนต์แบบใหม่ที่ผสานรวม Element ต่างๆ ของวิธีการชำระเงินแต่ละวิธีเข้าด้วยกันเป็น Element เดียว
Stripe Elements และ Payment Element มีข้อแตกต่างกันดังนี้
ก่อนหน้านี้ เมื่อใช้ Elements ผู้ค้าจะต้องสร้างและดูแลรักษาการแม็ปสกุลเงิน/ประเทศ/วิธีการชำระเงินและตรรกะที่เกี่ยวข้องซึ่งระบุว่าเมื่อใดควรเรียกใช้ API ของ Stripe ในแบ็กเอนต์และเมื่อใดควรแสดง/ซ่อน Element ต่างๆ บนอินเตอร์เฟซสำหรับผู้ใช้ (UI) ดังนั้น ผู้ค้าจึงต้องผสานการทำงานให้ Element ทีละรายการ
แต่ด้วย Payment Element ผู้ค้าจะไม่จำเป็นต้องสร้างและดูแลรักษาองค์ประกอบเหล่านี้อีกต่อไป ประสบการณ์การผสานการทำงานจะเริ่มคล้ายการผสานการทำงานให้ Element เพียงรายการเดียว โดย Stripe จะสร้างการแม็ปต่างๆ ตรรกะ การนำเสนอ และพฤติกรรมแบบสำเร็จรูปไว้ให้แล้ว ข้อเสียของ Payment Element คือผู้ค้าจะสามารถทำการปรับแต่งภายในเลเยอร์ของ UI ได้น้อยลงเมื่อเทียบกับที่สามารถทำได้ในปัจจุบันด้วย Stripe Elements อย่างไรก็ตาม ผู้ค้าก็ยังคงสามารถปรับแต่ง UI ได้มากกว่าที่ Stripe Checkout อนุญาตให้ทำ
หากให้กล่าวโดยเจาะจง ความแตกต่างหลักๆ มีดังนี้
- ผู้ค้าต้องใช้ความพยายามในการผสานการทำงานให้ Payment Element เกือบจะเทียบเท่ากับการผสานการทำงานให้ Element อื่นๆ (เช่น Card Element) แต่ผู้ค้าจะใช้ความพยายามน้อยลงมากในการดูแลรักษา เนื่องจากผู้ค้าสามารถเพิ่มวิธีการชำระเงินต่างๆ ได้โดยไม่จำเป็นต้องผสานการทำงานของ Element อื่นกับวิธีการชำระเงินแต่ละวิธี
- ผู้ค้าจะปรับแต่งสไตล์ได้อย่างจำกัดมากขึ้นเมื่อเทียบกับ Elements ที่ใช้อยู่ในปัจจุบัน เนื่องจาก Payment Element รองรับเฉพาะ API สำหรับการปรับแต่งสไตล์ด้วย JavaScript ของเราเท่านั้น (ไม่ใช่ CSS) อย่างไรก็ตาม ผลิตภัณฑ์ใหม่นี้ก็ยังคงรองรับฟังก์ชันการปรับแต่งสไตล์ส่วนใหญ่อยู่
- เนื่องจากผลิตภัณฑ์ใหม่นี้ไม่รองรับการตรวจสอบยืนยันในฝั่งเซิร์ฟเวอร์ ผู้ค้าจึงต้องใช้ Webhook สำหรับการชำระเงินด้วยบัตรเครดิต (ซึ่ง Elements ที่ใช้ในปัจจุบันไม่เป็นเช่นนั้น) อย่างไรก็ตาม เราจะรองรับการข้ามขั้นตอนนี้ใน Cards
- วิธีการชำระเงินส่วนมากที่คุณรับชำระผ่าน Payment Element จำเป็นจะต้องมีการเปลี่ยนเส้นทางไปยังหน้าการยืนยันคำสั่งซื้อ ดังนั้น ผู้ค้าจึงต้องเพิ่มหน้าแยกต่างหากสำหรับการยืนยันคำสั่งซื้อให้กับแอปบนเว็บไซต์ที่มีหน้าเดียว อย่างไรก็ตาม ประสบการณ์การชำระเงินก็ยังคงจะได้รับการฝังโดยสมบูรณ์ไว้ในเว็บไซต์ของผู้ค้าอยู่ (ซึ่งต่างจาก Stripe Checkout)
Payment Element คือคอมโพเนนต์ UI แบบใหม่ที่สามารถนำไปจัดวางไว้ในเว็บไซต์ของผู้ค้า ทั้งยังสามารถนำไปปรับแต่งสไตล์และเสริมความเป็นแบรนด์ให้เหมาะกับประสบการณ์ที่ผู้ค้าอยากส่งมอบได้ ผลิตภัณฑ์นี้ช่วยให้คุณเสนอวิธีการชำระเงินมากมาย (มากกว่า 18 วิธีและยังเพิ่มขึ้นเรื่อยๆ) ให้กับลูกค้าได้โดยไม่ต้องใช้ความพยายามเท่าไรนักในการเก็บรวบรวมข้อมูลที่จำเป็นจากผู้บริโภคโดยอัตโนมัติ (ยกเว้นที่อยู่สำหรับจัดส่ง) Payment Element ใช้ API การชำระเงินของ Stripe (PaymentIntents/SetupIntents) ในการทำงานซึ่งต่อยอดมาจาก SDK ของเราอย่าง Stripe.js ผลิตภัณฑ์นี้ได้รับการออกแบบมาเพื่อผู้ค้าที่ต้องการควบคุมประสบการณ์การชำระเงินที่ตนมอบให้แก่ลูกค้ามากขึ้น กล่าวอย่างเจาะจงคือ หากคุณกำลังมีแผนที่จะผสานการทำงานการชำระเงินไว้ในแอปพลิเคชันบนเว็บไซต์อย่างเต็มรูปแบบ (กล่าวคือ มีการดำเนินการหลายขั้นตอน, คำนึงถึงแบรนด์, ต้องการการควบคุมในระดับสูง และต้องการเสนอเงื่อนไขพิเศษในหน้าการชำระเงิน) Payment Element ก็เป็นผลิตภัณฑ์ที่เหมาะสำหรับคุณ Payment Element ช่วยให้คุณสามารถเก็บรวบรวมข้อมูลใดๆ ที่จำเป็นสำหรับคุณในระหว่างขั้นตอนการชำระเงินและออกแบบประสบการณ์ดังกล่าวได้ตามที่คุณต้องการ
ในทางกลับกัน Stripe Checkout คือหน้าการชำระเงินในระบบของเราโดยสมบูรณ์ ซึ่งทำให้ผู้ค้าสามารถเสนอวิธีการชำระเงินของท้องถิ่นหลายวิธี (มากกว่า 25 วิธี) ให้แก่ลูกค้าได้โดยเว็บไซต์ของคุณจะเปลี่ยนเส้นทางเพื่อนำลูกค้าไปชำระเงิน แต่ผลิตภัณฑ์นี้มาพร้อมตัวเลือกในการปรับแต่งสไตล์ที่จำกัด (สี/โลโก้) Stripe Checkout ใช้ Checkout Sessions ในการทำงานและไม่ใช้ Payment Intent/Setup Intent ผลิตภัณฑ์นี้ได้รับการออกแบบมาเพื่อกรณีการใช้งานที่เรียบง่าย กล่าวคือ มีการดำเนินการเพียงขั้นตอนเดียวและมีความจำเป็นในการควบคุม/ปรับแต่ง/สอดแทรกแบรนด์ไม่มากนัก Stripe Checkout จะให้และเก็บรวบรวมข้อมูลได้มากกว่า รวมถึงการเก็บรวบรวมข้อมูลที่อยู่สำหรับจัดส่ง ทั้งยังแสดงรายการสินค้า/ยอดรวมของการสั่งซื้อและปุ่มส่งอีกด้วย ซึ่ง Payment Element ไม่เป็นเช่นนั้น
ผู้ค้าต้องใช้ความพยายามในการผสานการทำงานให้ Payment Element เกือบจะเทียบเท่ากับการผสานการทำงานให้ Element อื่นๆ (เช่น Card Element) แต่ผู้ค้าจะใช้ความพยายามน้อยลงมากในการดูแลรักษา เมื่อคุณต้องการเสนอวิธีการชำระเงินเพิ่มเติม คุณไม่จำเป็นต้องผสานการทำงานของ Element ให้กับแต่ละตัวเลือก
ผู้ใช้ไม่ต้องเสียค่าใช้จ่ายเพิ่มเติมใดๆ ในการใช้งาน Payment Element ผู้ใช้เพียงต้องเสียค่าใช้จ่ายที่เกี่ยวเนื่องกับวิธีการชำระเงินแต่ละวิธีที่ตนเองรับชำระเท่านั้น (โปรดดู https://stripe.com/pricing/local-payment-methods)
Payment Element รองรับทั้ง PaymentIntents และ SetupIntents อย่างไรก็ตาม ผลิตภัณฑ์นี้ไม่รองรับ API เก่าๆ เช่น Charges และ Sources
คุณจำเป็นต้องใช้ Webhook ร่วมกับ Payment Element เนื่องจากผลิตภัณฑ์นี้ไม่รองรับการยืนยันในฝั่งเซิร์ฟเวอร์
อย่างไรก็ตาม เราสามารถรองรับการข้ามขั้นตอนนี้สำหรับวิธีการชำระเงินที่ไม่จำเป็นต้องมีการเปลี่ยนเส้นทางได้ เช่น Cards คุณสามารถดูโค้ดสำหรับใช้ทำเช่นที่กล่าวไปได้ที่ https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect
หากต้องการใช้ Payment Element เพื่อเสนอวิธีการชำระเงินทั้งหมดที่ Stripe รองรับ คุณจะต้องส่งผ่านอาร์เรย์ของวิธีการชำระเงินไปที่ payment_method_types เมื่อคุณสร้าง PaymentIntent อย่างไรก็ตาม คุณไม่สามารถส่งผ่านวิธีการชำระเงินที่รองรับทั้งหมดในคราวเดียวได้เนื่องจากวิธีการชำระเงินบางวิธีกำหนดให้ต้องใช้สกุลเงินที่แตกต่างกัน คุณสามารถสร้างได้เฉพาะ PaymentIntent ที่มีวิธีการชำระเงินที่รองรับสกุลเงินเดียวกันเท่านั้น โปรดดูตารางวิธีการชำระเงินกับการรองรับผลิตภัณฑ์ที่ https://stripe.com/docs/payments/payment-methods/integration-options
Mobile Payment Element หรือคลาส Payment Sheet ในโค้ด คือคอมโพเนนต์ UI แบบสำเร็จรูปที่แสดงวิธีการชำระเงินหลากหลายวิธีจากทั่วโลก (บัตร, กระเป๋าเงิน, การหักบัญชีธนาคาร, การชำระเงินแบบเปลี่ยนเส้นทางธนาคาร, BNPL ฯลฯ) ผลิตภัณฑ์นี้มีความคล้ายคลึงกับ Payment Element บนเว็บไซต์ แต่เป็นผลิตภัณฑ์สำหรับใช้ภายในแอปพลิเคชันบนอุปกรณ์เคลื่อนที่ ทั้งนี้ อินเตอร์เฟซการชำระเงินจะปรากฏเป็น "แผงด้านล่างหน้าจอ" (Bottom Sheet) (คล้ายกับ Apple Pay/Google Pay) และได้ถูกสร้างไว้ใน SDK สำหรับอุปกรณ์เคลื่อนที่ของ Stripe ผลิตภัณฑ์นี้จะช่วยผู้ค้าของ Stripe ในการเพิ่มอัตราการเปลี่ยนเป็นลูกค้าและลดค่าใช้จ่ายในการชำระเงิน ทั้งยังช่วยขับเคลื่อนเป้าหมายบริษัทของ Stripe ในการปรับใช้วิธีการชำระเงินแบบไม่ใช้บัตรอีกด้วย หากต้องการข้อมูลเพิ่มเติม ให้ไปที่ https://stripe.com/docs/payments/accept-a-payment?platform=ios