หลักเกณฑ์ต่อไปนี้แสดงวิธีรวมแบรนด์ Google Pay ไว้ในเว็บไซต์
ปุ่มการชำระเงินด้วย Google Pay
ปุ่มชำระเงินของ Google Pay ต้องเรียกใช้ Google Pay API เสมอ จากนั้น Google Pay API จะเรียก ชีตการชำระเงินที่ผู้ใช้เลือกวิธีการชำระเงินได้
ชิ้นงาน
เมธอด JavaScript createButton()
จะแทรกกฎ CSS และไฟล์ SVG จาก CDN ของ Google สำหรับองค์ประกอบ HTML <button> แบบไดนามิก
เมื่อใช้วิธี createButton()
คุณจะได้รับสิ่งต่อไปนี้
- การปฏิบัติตามข้อกำหนดของแบรนด์: ผสานรวมปุ่มชำระเงินด้วย Google Pay ได้อย่างราบรื่น ซึ่งจะปฏิบัติตาม หลักเกณฑ์การสร้างแบรนด์ล่าสุดของ Google Pay โดยอัตโนมัติ พร้อมทั้งมีตัวเลือกที่ปรับแต่งได้ เพื่อให้ตรงกับการออกแบบ UI ของคุณโดยใช้ความพยายามน้อยที่สุด
- รูปร่างที่ปรับแต่งได้: ปรับความโค้งมนของมุมปุ่มให้เข้ากับสุนทรียะการออกแบบที่มีอยู่ได้อย่างราบรื่น
- ประสบการณ์การใช้งานที่แปลเป็นภาษาท้องถิ่น: คำบรรยายของปุ่มจะแปลเป็นภาษาของเบราว์เซอร์ของผู้ใช้โดยอัตโนมัติ ซึ่งช่วยเพิ่มการเข้าถึง
- ปรับเปลี่ยนในแบบของผู้ใช้: ช่วยให้ผู้ใช้ค้นพบวิธีการชำระเงินที่มีให้บริการในกระเป๋าเงิน Google Pay เพื่อให้กระบวนการชำระเงินเร็วขึ้น
หากวิธีที่สะดวกนี้หรือภาษาที่รองรับไม่ตรงกับความต้องการของคุณ โปรดติดต่อเรา
รูปแบบ
ปุ่มชำระเงินของ Google Pay มี 2 รูปแบบ ได้แก่ แบบเข้มและแบบอ่อน คุณดูตัวอย่างของทั้ง 2 สไตล์ได้ในส่วนชิ้นงาน ห้ามแปลชื่อแบรนด์ Google Pay อย่าสร้างปุ่มที่มีข้อความที่แปลเป็นภาษาของคุณเอง
| ประเภทปุ่ม | มืด | เบา |
| book |  |
 |
| buy |  |
 |
| checkout |  |
 |
| บริจาค |  |
 |
| คำสั่งซื้อ |  |
 |
| pay |  |
 |
| ธรรมดา |  |
 |
| สมัครรับข้อมูล |  |
 |
ใช้ข้อความประเภทปุ่มที่เหมาะกับหน้าชำระเงินของคุณมากที่สุด |
ใช้ปุ่มสีเข้มบนพื้นหลังสีอ่อนเพื่อให้เกิดคอนทราสต์ |
ใช้ปุ่มสีอ่อนบนพื้นหลังสีเข้มหรือมีสีสัน |
การปรับเปลี่ยนในแบบของคุณ
เมื่อผู้ใช้มีบัตรที่มีสิทธิ์ในบัญชี Google Pay ปุ่มการชำระเงิน "ซื้อ" "ชำระเงิน" และ "ธรรมดา" จะแสดงเครือข่ายบัตรและหมายเลข 4 หลักสุดท้ายของหมายเลขบัตร ระบบจะแสดงเครือข่ายบัตรในตำแหน่งเดียวกับข้อความ "ซื้อด้วย" หรือ "ชำระเงินด้วย"
| ประเภทปุ่ม | มืด | เบา |
| ซื้อ จ่าย และธรรมดา |  |
 |
ใช้ปุ่มประเภทซื้อ ชำระเงิน หรือธรรมดาเพื่อเปิดใช้การปรับเปลี่ยนในแบบของคุณ |
ใช้ปุ่มสีเข้มบนพื้นหลังสีอ่อนเพื่อให้เกิดคอนทราสต์ |
ใช้ปุ่มสีอ่อนบนพื้นหลังสีเข้มหรือมีสีสัน |
ปุ่มที่กำหนดเอง
ใช้เครื่องมือต่อไปนี้เพื่อดูตัวอย่างลักษณะของปุ่มแต่ละปุ่ม
พื้นที่ว่าง
รักษาระยะห่างขั้นต่ำ 8 dp รอบปุ่มชำระเงินเสมอ ตรวจสอบว่า พื้นที่ว่างไม่ถูกกราฟิกหรือข้อความรบกวน
ตัวอย่าง
| หากวางปุ่ม Google Pay ไว้ข้างปุ่มอื่น ให้ตรวจสอบว่าปุ่ม Google Pay มีขนาดเท่ากับปุ่มอื่น | ใช้ปุ่ม Google Pay ที่ตัดกับพื้นหลังที่ปุ่มปรากฏเสมอ |
| เมื่อปรับขนาดปุ่ม Google Pay ให้คงสัดส่วนของปุ่มไว้เสมอ |
สิ่งที่ควรและไม่ควรทำ
| สิ่งที่ควรทำ | สิ่งที่ไม่ควรทำ |
|---|---|
|
|
เครื่องหมาย Google Pay
ใช้เฉพาะเครื่องหมาย Google Pay ที่ระบุไว้ในหลักเกณฑ์เหล่านี้เมื่อแสดง Google Pay เป็นตัวเลือกในขั้นตอนการชำระเงิน
ชิ้นงาน
คลิกปุ่มต่อไปนี้เพื่อดาวน์โหลดเครื่องหมาย Google Pay ในรูปแบบไฟล์ SVG
ดาวน์โหลดชิ้นงานทำเครื่องหมาย
ใช้เครื่องหมาย Google Pay ต่อไปนี้เมื่อแสดง Google Pay เป็นตัวเลือกการชำระเงิน
แสดง "Google Pay" ในข้อความข้างเครื่องหมายหากคุณทำเช่นนั้นกับแบรนด์อื่นๆ อย่าเปลี่ยนสีหรือความหนาของเส้นขอบเครื่องหมาย หรือดัดแปลงเครื่องหมายในลักษณะใดก็ตาม ใช้เฉพาะเครื่องหมายที่ Google จัดหาให้เท่านั้น
พื้นที่ว่าง
รักษาระดับความสูงของตัวอักษร G พิมพ์ใหญ่ให้มีขนาดอย่างน้อยครึ่งหนึ่ง (0.5 เท่า) ในทุกด้านของเครื่องหมายการยอมรับ Google Pay ตรวจสอบว่าพื้นที่ว่างเท่ากับอัตลักษณ์ของแบรนด์อื่นๆ ที่คุณ แสดง
ขนาด
ปรับความสูงให้ตรงกับเอกลักษณ์ของแบรนด์อื่นๆ ที่แสดงในขั้นตอนการชำระเงิน อย่าทำให้เครื่องหมาย Google Pay มีขนาดเล็กกว่าเอกลักษณ์ของแบรนด์อื่นๆ
สิ่งที่ควรและไม่ควรทำ
| สิ่งที่ควรทำ | สิ่งที่ไม่ควรทำ |
|---|---|
|
|
Google Pay ในข้อความ
คุณอาจใช้ข้อความเพื่อระบุ Google Pay เป็นตัวเลือกการชำระเงิน และเพื่อโปรโมต Google Pay ในการสื่อสารทางการตลาด
- ใช้อักษรตัวพิมพ์ใหญ่กับตัวอักษร "G" และ "P"
- ใช้ "G" และ "P" ตัวพิมพ์ใหญ่เสมอ ตามด้วยตัวอักษรพิมพ์เล็ก อย่าใช้ตัวพิมพ์ใหญ่กับชื่อเต็ม "GOOGLE PAY" เว้นแต่จะใช้เพื่อให้ตรงกับรูปแบบการพิมพ์ในเว็บไซต์ ห้ามใช้ "GOOGLE PAY" ที่เป็นตัวพิมพ์ใหญ่ในการสื่อสารทางการตลาด
- อย่าใช้ตัวย่อของ Google Pay
- เขียนคำว่า "Google" และ "Pay" เต็มคำเสมอ
- จับคู่สไตล์ในเว็บไซต์
- ตั้งค่า "Google Pay" ในแบบอักษรและรูปแบบการพิมพ์เดียวกันกับข้อความอื่นๆ บนเว็บไซต์ อย่าเลียนแบบรูปแบบตัวอักษรของ Google
- ไม่ต้องแปล Google Pay
- เขียน "Google Pay" เป็นภาษาอังกฤษเสมอ อย่าแปลเป็นภาษาอื่น
- ใช้สัญลักษณ์เครื่องหมายการค้าในครั้งแรกที่ "Google Pay" ปรากฏในการสื่อสารทางการตลาด
- เมื่อใช้ "Google Pay" ในการสื่อสารทางการตลาด ให้แสดงสัญลักษณ์เครื่องหมายการค้า ™ ในครั้งแรกหรือครั้งที่โดดเด่นที่สุดที่ปรากฏ โปรดอย่าใช้สัญลักษณ์เครื่องหมายการค้าเมื่อแสดง Google Pay เป็นตัวเลือกในการชำระเงินบนเว็บไซต์
| หากคุณไม่แสดงเอกลักษณ์ของแบรนด์สำหรับตัวเลือกการชำระเงินอื่นๆ ให้แสดง "Google Pay" ด้วยข้อความ | ตั้งค่า "Google Pay" ในแบบอักษรและ รูปแบบการพิมพ์เดียวกันกับข้อความอื่นๆ ในเว็บไซต์ |
แนวทางปฏิบัติแนะนำสำหรับ Google Pay
เพิ่ม Conversion ให้ได้สูงสุดด้วยขั้นตอนการชำระเงินและชีตการชำระเงินที่ช่วยให้ลูกค้าตรวจสอบข้อมูลการชำระเงินและยืนยันการซื้อได้อย่างรวดเร็วและง่ายดาย
แนวทางปฏิบัติแนะนำมีดังนี้
- ตั้งค่า Google Pay เป็นตัวเลือกการชำระเงินหลัก
- แสดงปุ่ม Google Pay อย่างโดดเด่นทุกที่ที่ทำได้ นอกจากนี้ คุณยังตั้งให้เป็นตัวเลือกเริ่มต้น หรือตัวเลือกการชำระเงินเพียงตัวเลือกเดียวได้ด้วย
- ให้ลูกค้าซื้อได้โดยไม่ต้องมีบัญชี
- การสร้างบัญชีทำให้กระบวนการชำระเงินช้าลงและอาจทำให้ผู้ใช้ละทิ้งรถเข็น ใช้ Google Pay เพื่อให้ผู้ใช้ชำระเงินในฐานะผู้มาเยือนได้เร็วขึ้น หากต้องการให้ลูกค้าสร้างบัญชี โปรดอนุญาตให้ลูกค้าสร้างบัญชีหลังจากที่ลูกค้าทำการซื้อเสร็จสมบูรณ์แล้ว
- ใช้ Google Pay เพื่อเริ่มชำระเงินระหว่างชำระเงินในรถเข็น
- ปุ่ม Google Pay จะแสดงชีตการชำระเงิน ในชีตการชำระเงิน ลูกค้าจะทำได้เพียง เลือกและยืนยันวิธีการชำระเงินและที่อยู่สำหรับการจัดส่งรายการเดียว อย่าลืมขอข้อมูลอื่นๆ ทั้งหมด ที่คุณต้องการก่อนที่จะให้ตัวเลือกแก่ลูกค้าในการเลือกปุ่ม Google Pay ข้อมูลอื่นๆ อาจรวมถึงข้อมูลต่อไปนี้
- ขนาด สี หรือจำนวนของสินค้า
- ตัวเลือกในการเพิ่มข้อความของขวัญหรือใช้รหัสโปรโมชัน
- ความสามารถในการเลือกความเร็วในการจัดส่งและปลายทางที่แตกต่างกันสำหรับสินค้าแต่ละรายการ
- หากลูกค้าไม่ให้ข้อมูลที่จำเป็น ให้เสนอความคิดเห็นแบบเรียลไทม์เพื่อแจ้งให้ลูกค้าทราบ สิ่งที่คุณต้องการก่อนที่ลูกค้าจะแสดงชีตการชำระเงินได้
- เพิ่มปุ่ม Google Pay ลงในหน้ารายละเอียดผลิตภัณฑ์นอกเหนือจากการชำระเงินในรถเข็น
- คุณเร่งการชำระเงินสำหรับสินค้า 1 รายการได้หากอนุญาตให้ลูกค้าซื้อสินค้าแต่ละรายการ จากหน้ารายละเอียดสินค้าโดยตรง หากลูกค้าเลือกตัวเลือกนี้ โปรด ยกเว้นสินค้าอื่นๆ ที่ลูกค้ามีในรถเข็นช็อปปิ้ง เนื่องจาก ชีตการชำระเงินจะให้ลูกค้ายืนยันข้อมูลการชำระเงินและการจัดส่งเท่านั้น
- ใส่ Google Pay ในหน้าการยืนยันและใบเสร็จ
- เมื่อแสดงข้อมูลการชำระเงินในหน้ายืนยันและใบเสร็จทางอีเมล ให้ตรวจสอบว่าคุณ ระบุว่าลูกค้าชำระเงินด้วย Google Pay และแสดง Google Pay ในลักษณะเดียวกับวิธีการชำระเงินอื่นๆ
- ห้ามแสดงหมายเลขบัญชีทั้งหมด วันที่หมดอายุ หรือรายละเอียดวิธีการชำระเงินอื่นๆ ต่อผู้ใช้ ใช้ข้อความอธิบายที่ Google Pay API แสดงผลเสมอเพื่อระบุวิธีการชำระเงิน
- ตัวอย่างข้อความอธิบายที่ยอมรับได้มีดังนี้
- "เครือข่าย •••• 1234 ด้วย Google Pay"
- "เครือข่าย •••• 1234 (Google Pay)"
- "Google Pay (เครือข่าย •••• 1234)"
- "ชำระเงินให้ Paypal abc...d@gmail.com ด้วย Google Pay"
- "วิธีการชำระเงิน: Google Pay"
- "ชำระเงินด้วย Google Pay"
นำข้อมูลทุกอย่างมารวมกัน
รูปภาพต่อไปนี้แสดงการผสานรวมที่เสร็จสมบูรณ์ การผสานรวมยังรวมถึงขั้นตอนการเลือกสินค้า/ก่อนซื้อ ขั้นตอนธุรกรรม ขั้นตอนตัวเลือก Google Pay และขั้นตอนหลังการซื้อ
รับการอนุมัติ
เมื่อผสานรวม Google Pay API แล้ว คุณจะต้อง ขอรับการอนุมัติสำหรับทุกที่ที่คุณแสดงหรืออ้างอิง Google Pay เพื่อรับสิทธิ์เข้าถึงเวอร์ชันที่ใช้งานจริง
ทำรายการตรวจสอบการผสานรวมให้เสร็จสมบูรณ์เพื่อส่งการผสานรวมเว็บเข้ารับการตรวจสอบ คุณควรได้รับการอนุมัติหรือความคิดเห็นภายใน 1 วันทำการ