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

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

ร้านเสื้อยืดอัตโนมัติ เป็นร้านค้าล้ําสมัยที่ใช้ประโยชน์จากความก้าวหน้าล่าสุดของปัญญาประดิษฐ์ (AI) และใช้ข้อมูลอย่างเช่น ค่ากําหนดสไตล์ สภาพอากาศ ช่วงเวลาของปี และเทรนด์แฟชั่น เพื่อแนะนําสินค้าที่เหมาะสมที่สุดให้คุณซื้อ

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

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

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

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

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

สิ่งที่ต้องมี

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

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

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

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

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

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

ข้ามผ่านเว็บไซต์ตัวอย่าง

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

สํารวจเว็บไซต์

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

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

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

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

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

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

  1. โหลดไลบรารี
  2. ระบุความสามารถในการชําระเงินด้วย Google Pay
  3. แสดงปุ่มเพื่อชําระเงินด้วย Google Pay
  4. สร้างและส่งคําขอชําระเงิน
  5. รวบรวมผลลัพธ์

เพิ่มแท็ก 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 ได้

ภาพรวม

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

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

โครงกระดูก

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

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

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

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

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

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

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

วิธีตั้งค่าการกําหนดค่าใน index.js มีดังนี้

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

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

มาสรุปกัน

กําหนดให้ใช้วิธีการชําระเงินหนึ่งวิธีได้ในเว็บไซต์ของคุณ และคุณจะต้องทํางานกับ 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 แล้ว ทั้งยังเพิ่มปุ่มเพื่อเริ่มกระบวนการชําระเงินเมื่อเปิดใช้งานผู้ใช้ได้อีกด้วย (เช่น การคลิกปุ่ม)

เพิ่มปุ่มเพื่อชําระเงินด้วย 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

ใน index.js ในฟังก์ชัน onGooglePaymentsButtonClicked() ให้วางสิ่งต่อไปนี้

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

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

พารามิเตอร์เพิ่มเติม

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

ใน index.js ในฟังก์ชัน onGooglePaymentsButtonClicked() ให้วางสิ่งต่อไปนี้

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

การเพิ่มข้อมูลเกี่ยวกับธุรกรรม

พร็อพเพอร์ตี้ transactionInfo มีออบเจ็กต์ที่มีรายละเอียดด้านการเงินเกี่ยวกับธุรกรรม อันได้แก่ ราคา และรหัสสกุลเงิน (รูปแบบอัลฟ่า ISO 4217) พร้อมด้วยสถานะราคา ซึ่งอาจเป็นขั้นสุดท้ายหรือประมาณก็ได้ โดยขึ้นอยู่กับลักษณะของธุรกรรม (เช่น ราคาอาจแตกต่างกันไปตามที่อยู่สําหรับจัดส่งที่ระบุ)

ใน index.js ในฟังก์ชัน onGooglePaymentsButtonClicked() ให้วางสิ่งต่อไปนี้

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

การเพิ่มข้อมูลเกี่ยวกับผู้ขาย

คําขอการชําระเงินจะใช้ข้อมูลเกี่ยวกับผู้ขายที่ดําเนินการคําขอภายใต้พร็อพเพอร์ตี้ merchantInfo Codelab นี้จะเน้นที่ 2 รายการต่อไปนี้

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

ใน index.js ในฟังก์ชัน onGooglePaymentsButtonClicked() ให้วางสิ่งต่อไปนี้

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

ขอข้อมูลการชําระเงินและประมวลผลผลลัพธ์

ตอนนี้ ให้รวมการกําหนดค่าที่กําหนดไว้ก่อนหน้านี้ลงในออบเจ็กต์ paymentDataRequest สุดท้าย

ใน index.js ในฟังก์ชัน onGooglePaymentsButtonClicked() ให้วางสิ่งต่อไปนี้

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

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

ใน index.js ในฟังก์ชัน onGooglePaymentsButtonClicked() ให้วางสิ่งต่อไปนี้

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

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

เมื่อเลือกแล้ว ระบบจะปิดชีตและกรอกข้อมูล Promise ด้วยออบเจ็กต์ PaymentData ซึ่งรวมถึงข้อมูลที่เกี่ยวข้องเกี่ยวกับวิธีการชําระเงินที่เลือกไว้

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

ตอนนี้คุณสามารถใช้ข้อมูลวิธีการชําระเงินนี้เพื่อทําธุรกรรมจริงได้แล้ว

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

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

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

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

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

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

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

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

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

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

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

คุณได้ผสานรวม Google Pay API ลงในเว็บไซต์ตัวอย่างใน Codelab หรือแอปพลิเคชันของคุณเองเรียบร้อยแล้ว

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

สิ่งที่เราพูดถึง

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

ขั้นตอนถัดไป

  • ดูข้อมูลเพิ่มเติมเกี่ยวกับ Google Pay
  • ตรวจสอบรายการตรวจสอบการผสานรวมและรับตัวระบุผู้ขาย
  • ดูการผสานรวม 2 ประเภทและตัดสินใจเลือกสิ่งที่เหมาะกับคุณมากกว่า ได้แก่ การผสานรวมโดยตรงหรือใช้เกตเวย์การชําระเงินหรือผู้ประมวลผลข้อมูล
  • ตั้งค่าให้สิทธิ์การชําระเงินเพื่อเริ่มกระบวนการชําระเงินและรับทราบสถานะการให้สิทธิ์ของการชําระเงิน (การตรวจสอบสิทธิ์หรือปฏิเสธ)

ดูข้อมูลเพิ่มเติม

คุณคิดว่าเนื้อหานี้มีประโยชน์ไหม

มีประโยชน์มาก แค่ตรงตามความคาดหวังก็พอ ไม่ครับ

คุณต้องการเห็น Codelab อื่นๆ ที่จะช่วยเหลือคุณเกี่ยวกับการผสานรวมประเภทอื่นๆ (Android, การผสานรวมโดยตรง, API ความภักดี) ไหม

ใช่เลย เยี่ยมไปเลย! ฉันพอใจกับสิ่งที่ได้มา