หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างประสบการณ์การชำระเงินที่รวดเร็วบนเว็บด้วย Google Pay

Google Pay API ช่วยให้ผู้ใช้มีโอกาสชำระเงินได้ทุกที่โดยใช้ข้อมูลการชำระเงินที่จัดเก็บไว้ในบัญชี Google ในแล็บนี้ คุณจะได้ใช้ประโยชน์จากไลบรารีไคลเอ็นต์ของ Google Pay สำหรับเว็บเพื่อปรับปรุงประสบการณ์การชำระเงินของร้านค้าออนไลน์ตัวอย่างแบบง่ายๆ โดยการสร้างประสบการณ์ที่รวดเร็ว สะดวก และปลอดภัยยิ่งขึ้น ซึ่งจะนำไปสู่ Conversion ที่มากขึ้นและลูกค้าที่พึงพอใจมากขึ้น

Auto T-Shirt Shop เป็นร้านค้าที่สร้างสรรค์ซึ่งใช้ประโยชน์จากความก้าวหน้าล่าสุดด้านปัญญาประดิษฐ์ และใช้ข้อมูลต่างๆ เช่น สไตล์ที่ชอบ สภาพอากาศ ช่วงเวลาของปี และเทรนด์แฟชั่น เพื่อแนะนำไอเทมที่เหมาะสมที่สุดให้คุณซื้อ

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

สิ่งที่คุณจะสร้าง

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

สิ่งที่คุณจะได้เรียนรู้

วิธีผสานรวม Google Pay เข้ากับหน้าชำระเงินที่มีอยู่
วิธีเลือกวิธีการชำระเงินที่ต้องการ
วิธีพิจารณาว่าผู้ใช้พร้อมชำระเงินด้วย Google Pay หรือไม่

สิ่งที่คุณจะต้องมี

คอมพิวเตอร์ที่มีการเข้าถึงอินเทอร์เน็ต
มีความรู้พื้นฐานเกี่ยวกับ JavaScript

เรียกใช้เว็บไซต์ตัวอย่างใน glitch.com

เพื่อให้เริ่มต้นใช้งานได้เร็วที่สุด เราจึงได้เผยแพร่ Codelab นี้บน glitch.com Glitch เป็นสภาพแวดล้อมบนเว็บฟรีที่มีเครื่องมือแก้ไขโค้ด รวมถึงฟีเจอร์การโฮสต์และการติดตั้งใช้งานที่คุณใช้สร้างและแสดงเว็บแอปพลิเคชันได้

หากต้องการเริ่มต้นใช้งาน ให้ใช้ปุ่มด้านล่างเพื่อจัดสรรสภาพแวดล้อมการพัฒนาใหม่ใน Glitch ซึ่งตั้งค่าไว้แล้วพร้อมสำเนาของ Codelab นี้

เริ่มต้นสภาพแวดล้อมในการพัฒนาบน Glitch.com

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

ดูเว็บไซต์ตัวอย่างอย่างคร่าวๆ

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

สำรวจเว็บไซต์

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

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

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

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

มาวางแผนกันเลย

กระบวนการนี้แบ่งออกเป็นขั้นตอนพื้นฐานต่อไปนี้เพื่อให้เข้าใจการผสานรวมนี้ได้ดียิ่งขึ้น

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

เพิ่มแท็ก `script`

สิ่งแรกที่คุณต้องทำเพื่อเริ่มใช้ Google Pay API คือการโหลดไลบรารี JavaScript โดยให้รวมแท็ก script ไว้ในไฟล์ HTML ที่คุณต้องการเรียก API รวมถึงแอตทริบิวต์ src ที่ชี้ไปยังไลบรารี JavaScript ภายนอก

สำหรับ Codelab นี้ ให้เปิดไฟล์ index.html คุณควรเห็นว่าระบบได้รวมแท็กสคริปต์ไว้ให้คุณแล้ว

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

นอกจาก src แล้ว คุณยังเพิ่มแอตทริบิวต์อื่นๆ อีก 2 รายการ

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

สร้างอินสแตนซ์ไคลเอ็นต์ API

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

แก้ไขไฟล์ index.js ซึ่งเป็นส่วนหนึ่งของโครงสร้างไฟล์ในโปรเจ็กต์นี้อยู่แล้ว แทนที่ฟังก์ชัน onGooglePayLoaded ด้วยโค้ดต่อไปนี้

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

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

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

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

Overview

ตอนนี้เราได้โหลดไลบรารีของไคลเอ็นต์ JavaScript ของ Google Pay API แล้ว ตอนนี้เรามากำหนดค่าเพื่อทำการเรียก API ให้เรากัน

การเปลี่ยนแปลงโค้ดต่อไปนี้ทั้งหมดสำหรับส่วนที่เหลือของโค้ดแล็บจะทำในไฟล์ index.js

โครงกระดูก

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

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

ที่พักallowedPaymentMethodsรับวิธีการชำระเงินหลายรายการ คุณต้องระบุพร็อพเพอร์ตี้ต่อไปนี้สำหรับวิธีการชำระเงินทุกวิธี

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

ต้องใช้พร็อพเพอร์ตี้ type และ parameters เท่านั้นเพื่อพิจารณาว่าผู้ใช้ที่เกี่ยวข้องจะชำระเงินด้วย Google Pay ได้หรือไม่

การกำหนดค่าวิธีการชำระเงิน

ในตัวอย่างนี้ คุณจะยอมรับการกำหนดค่าเพียงรายการเดียว ซึ่งอนุญาตให้ชำระเงินด้วยบัตรสำหรับ Mastercard และ Visa ทั้งในรูปแบบโทเค็นและหมายเลขบัญชีหลัก (PAN)

คุณควรกำหนดค่าใน index.js ดังนี้

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

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

เมื่อใช้การตรวจสอบสิทธิ์หมายเลขบัญชีหลัก (PAN) ระบบจะส่งหมายเลขบัญชีบัตร เดือนและปีที่บัตรหมดอายุไปยังผู้ประมวลผลการชำระเงิน ซึ่งจะช่วยให้ลูกค้าใช้บัตรที่ปลอดภัยก่อนหน้านี้ซึ่งเชื่อมโยงกับบัญชี Google ได้
การตรวจสอบสิทธิ์แบบอิงตามรหัสลับแบบไดนามิกจะทำงานร่วมกับการแปลงโทเค็นของบัตร ซึ่งเป็นกลไกที่แทนที่ข้อมูลบัตรของลูกค้าด้วยค่าแบบสุ่มที่ไม่มีใครเข้าใจได้นอกจากผู้ออกบัตรของลูกค้า การดำเนินการนี้ร่วมกับรหัสลับแบบไดนามิกจะช่วยให้มั่นใจได้ว่าโทเค็นที่ส่งไปยังผู้ประมวลผลจะแตกต่างกันเสมอสำหรับทุกธุรกรรม ซึ่งจะช่วยเพิ่มความปลอดภัยในการดำเนินการเหล่านี้ได้อย่างมาก

นำข้อมูลทุกอย่างมารวมกัน

มาสรุปกัน

คุณได้กำหนดวิธีการชำระเงิน 1 วิธีที่จะยอมรับในเว็บไซต์ และจะใช้ API เวอร์ชัน 2.0 การกำหนดค่าที่ได้ควรมีลักษณะดังนี้

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

เมื่อการกำหนดค่าพื้นฐานพร้อมแล้ว เรามาดูส่วนที่สนุกกัน

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

ผู้ใช้ชำระเงินด้วย Google Pay ได้ไหม

สิ่งแรกที่คุณต้องทำคือตรวจสอบว่าผู้ใช้ที่กำลังจะชำระเงินในเว็บไซต์ของคุณใช้ Google Pay เพื่อชำระเงินได้หรือไม่ คำขอนี้กำหนดให้คุณต้องระบุเวอร์ชันของ Google Pay API และวิธีการชำระเงินที่อนุญาตสำหรับเว็บไซต์ของคุณ ซึ่งตรงกับออบเจ็กต์การกำหนดค่าฐานที่กำหนดไว้ในขั้นตอนก่อนหน้านี้

ใน index.js ภายในฟังก์ชัน onGooglePayLoaded() ให้วางข้อความต่อไปนี้

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

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

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

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

หากคุณต้องการให้วิธีนี้ประเมินด้วยว่าผู้ใช้ที่เป็นปัญหาใช้วิธีการชำระเงินที่ใช้งานอยู่ซึ่งตรงกับการกำหนดค่าที่คุณระบุไว้ในส่วน allowedPaymentMethods หรือไม่ ให้รวมพร็อพเพอร์ตี้บูลีน existingPaymentMethodRequired: true ไว้ในออบเจ็กต์ IsReadyToPayRequest นอกเหนือจากพร็อพเพอร์ตี้อื่นๆ ในการกำหนดค่าพื้นฐาน

เพิ่มปุ่มเพื่อชำระเงินด้วย Google Pay

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

หากต้องการสร้างปุ่ม ให้ใช้วิธี createButton ในออบเจ็กต์ PaymentsClient รวมถึง ButtonOptions เพื่อกำหนดค่าปุ่ม

ใน index.js ภายในฟังก์ชัน createAndAddButton() ให้วางข้อความต่อไปนี้

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

พร็อพเพอร์ตี้ที่จำเป็นเพียงอย่างเดียวเมื่อใช้ createButton คือ onClick ซึ่งจำเป็นต่อการกำหนดออบเจ็กต์หรือฟังก์ชันการเรียกกลับเพื่อทริกเกอร์ทุกครั้งที่ผู้ใช้เปิดใช้งานปุ่ม buttonColor และ buttonType ช่วยให้คุณปรับแต่งรูปลักษณ์ของปุ่มได้ ปรับแต่งตามธีมและข้อกำหนด UI ของแอปพลิเคชัน

เมื่อสร้างปุ่มแล้ว สิ่งที่คุณต้องทำคือเพิ่มปุ่มลงในโหนดที่เหมาะสมภายใน DOM ในตัวอย่างนี้ เราใช้โหนด div ที่ระบุด้วย buy-now เพื่อวัตถุประสงค์นี้

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

เตรียมคำขอการชำระเงิน

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

เช่นเดียวกับที่เคยทำก่อนหน้านี้ ในระหว่างการกำหนดคำขอ isReadyToPay การเรียกนี้ยังต้องใช้พร็อพเพอร์ตี้ในออบเจ็กต์การกำหนดค่าพื้นฐานที่กำหนดไว้ก่อนหน้านี้ (apiVersion, apiVersionMinor และ allowedPaymentMethods) นอกเหนือจากพร็อพเพอร์ตี้ใหม่บางรายการ ครั้งนี้มีพร็อพเพอร์ตี้ใหม่ tokenizationSpecification และparameters เพิ่มเติมในวิธีการชำระเงินของคุณซึ่งเกี่ยวข้องกับวัตถุประสงค์ของคำขอนี้ นอกจากนี้ คุณต้องเพิ่ม transactionInfo และ merchantInfo ด้วย

ระบุข้อมูลเพิ่มเติมที่จำเป็นในวิธีการชำระเงิน

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

พร็อพเพอร์ตี้ `tokenizationSpecification`

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

ระบบรองรับกลยุทธ์การจัดการ 2 ประเภท หากคุณประมวลผลธุรกรรมการชำระเงินจากภายในเซิร์ฟเวอร์ที่เป็นไปตามข้อกำหนด PCI DSS ให้ใช้DIRECTประเภทข้อกำหนด ในตัวอย่างนี้ คุณใช้เกตเวย์สำหรับการชำระเงินเพื่อประมวลผลการชำระเงิน ดังนั้นคุณจึงตั้งค่าประเภทข้อกำหนด PAYMENT_GATEWAY