รับการชำระเงินผ่านการเรียกเก็บเงินของ Google Play ด้วย Digital Goods API และ Payment Request API

André Cipriani Bandarra

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

สำหรับแอปที่สร้างโดยใช้ Trusted Web Activities และเผยแพร่ผ่าน Google Play Store ตอนนี้คุณใช้ Payment Request API และ Digital Goods API เพื่อผสานรวมกับ Google Play Billing ได้แล้ว ฟีเจอร์นี้พร้อมใช้งานใน Chrome 101 ขึ้นไปสำหรับ Android และ ChromeOS

ในคู่มือนี้ คุณจะได้เรียนรู้วิธีเพิ่มการรองรับการเรียกเก็บเงินของ Google Play ลงใน PWA และแพ็กเกจสำหรับการเผยแพร่ใน Google Play Store สำหรับทั้ง ChromeOS และ Play Store

คุณจะใช้ Web Platform API 2 รายการเพื่อเพิ่มการรองรับ Play Billing ลงใน PWA Digital Goods API ใช้เพื่อรวบรวมข้อมูล SKU และตรวจสอบการซื้อและสิทธิ์จาก Play Store Payment Request API ใช้เพื่อกำหนดค่า Google Play Store เป็นวิธีการชำระเงินและดำเนินการซื้อให้เสร็จสมบูรณ์

วิธีสร้างรายได้จากแอปพลิเคชันใน Play Store

แอปพลิเคชันสามารถสร้างรายได้ด้วย Google Play Billing ใน Play Store ได้ 2 วิธีดังนี้

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

ข้อกำหนด

คุณจะต้องมีสิ่งต่อไปนี้เพื่อตั้งค่า Google Play Billing

อัปเดตโปรเจ็กต์ Bubblewrap

หากยังไม่ได้ติดตั้ง Bubblewrap คุณจะต้องติดตั้งก่อน ดูรายละเอียดเกี่ยวกับวิธีเริ่มต้นใช้งานได้ในคู่มือเริ่มใช้งานฉบับย่อ หากคุณมี Bubblewrap อยู่แล้ว โปรดอัปเดตเป็นเวอร์ชัน 1.8.2 ขึ้นไป

นอกจากนี้ Bubblewrap ยังมีฟีเจอร์ที่อยู่เบื้องหลัง Flag ด้วย หากต้องการเปิดใช้ คุณต้องแก้ไขการกําหนดค่าโปรเจ็กต์ใน twa-manifest.json ซึ่งอยู่ที่รูทของโปรเจ็กต์ และเปิดใช้ทั้งฟีเจอร์ alphaDependencies และ playBilling ดังนี้

  ...,
  "enableNotifications": true,
  "features": {
    "playBilling": {
      "enabled": true
    }
  },
  "alphaDependencies": {
    "enabled": true
  },
  ...

เมื่ออัปเดตไฟล์การกําหนดค่าแล้ว ให้เรียกใช้ bubblewrap update เพื่อใช้การกําหนดค่ากับโปรเจ็กต์ ตามด้วย bubblewrap build เพื่อสร้างแพ็กเกจ Android ใหม่และอัปโหลดแพ็กเกจนี้ไปยัง Play Store

ฟีเจอร์ที่ตรวจหาความพร้อมให้บริการของ Digital Goods API และ Google Play Billing

ปัจจุบัน Chrome รองรับ Digital Goods API เฉพาะเมื่อมีการเรียกใช้ PWA ภายในกิจกรรมบนเว็บที่เชื่อถือได้เท่านั้น และสามารถตรวจหาได้ว่า API พร้อมใช้งานหรือไม่โดยตรวจสอบหา getDigitalGoodsService ในออบเจ็กต์ window ดังนี้

if ('getDigitalGoodsService' in window) {
 // Digital Goods API is supported!
}

Digital Goods API อาจพร้อมใช้งานในเบราว์เซอร์ทุกประเภทและรองรับร้านค้าต่างๆ หากต้องการตรวจสอบว่าระบบรองรับแบ็กเอนด์ของร้านค้าที่เฉพาะเจาะจงหรือไม่ คุณจะต้องเรียกใช้getDigitalGoodsService()โดยส่งรหัสร้านค้าเป็นพารามิเตอร์ Google Play Store จะระบุด้วยสตริง https://play.google.com/billing

if ('getDigitalGoodsService' in window) {
  // Digital Goods API is supported!
  try {
    const service =
        await window.getDigitalGoodsService('https://play.google.com/billing');
    // Google Play Billing is supported!

  } catch (error) {
    // Google Play Billing is not available. Use another payment flow.
    return;
  }
}

เรียกข้อมูลรายละเอียดสำหรับ SKU

Digital Goods API มี getDetails() ซึ่งช่วยให้ดึงข้อมูลต่างๆ เช่น ชื่อผลิตภัณฑ์ รายละเอียด และที่สำคัญที่สุดคือราคา จากแบ็กเอนด์การชำระเงินได้

จากนั้นคุณใช้ข้อมูลนี้ในอินเทอร์เฟซผู้ใช้และระบุรายละเอียดเพิ่มเติมให้ผู้ใช้ทราบได้

const skuDetails = await service.getDetails(['shiny_sword', 'gem']);
for (item of skuDetails) {
  // Format the price according to the user locale.
  const localizedPrice = new Intl.NumberFormat(
      navigator.language,
      {style: 'currency', currency: item.price.currency}
    ).format(item.price.value);

  // Render the price to the UI.
  renderProductDetails(
        item.itemId, item.title, localizedPrice, item.description);
}

สร้างขั้นตอนการซื้อ

ตัวสร้างของ PaymentRequest จะใช้พารามิเตอร์ 2 รายการ ได้แก่ รายการวิธีการชำระเงินและรายการรายละเอียดการชำระเงิน

เมื่ออยู่ในกิจกรรมบนเว็บที่เชื่อถือได้ คุณต้องใช้วิธีการชำระเงินสำหรับการเรียกเก็บเงินของ Google Play โดยตั้งค่า https://play.google.com/billing เป็นตัวระบุ และเพิ่ม SKU ของผลิตภัณฑ์เป็นสมาชิกข้อมูล ดังนี้

async function makePurchase(service, sku) {
   // Define the preferred payment method and item ID
   const paymentMethods = [{
       supportedMethods: "https://play.google.com/billing",
       data: {
           sku: sku,
       }
   }];

   ...
}

แม้ว่าจะต้องระบุรายละเอียดการชำระเงิน แต่ Play Billing จะละเว้นค่าเหล่านั้นและใช้ค่าที่กำหนดไว้เมื่อสร้าง SKU ใน Play Console คุณจึงป้อนค่าที่ไม่ถูกต้องได้

const paymentDetails = {
    total: {
        label: `Total`,
        amount: {currency: `USD`, value: `0`}
    }
};

const request = new PaymentRequest(paymentMethods, paymentDetails);

เรียก show() บนออบเจ็กต์คำขอการชำระเงินเพื่อเริ่มขั้นตอนการชําระเงิน หาก Promise สำเร็จ แสดงว่าการชำระเงินสำเร็จ หากดำเนินการไม่สำเร็จ แสดงว่าผู้ใช้อาจยกเลิกการชำระเงิน

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

...
const request = new PaymentRequest(paymentMethods, paymentDetails);
try {
    const paymentResponse = await request.show();
    const {purchaseToken} = paymentResponse.details;

    // Call backend to validate and acknowledge the purchase.
    if (await acknowledgePurchaseOnBackend(purchaseToken, sku)) {
        // Optional: tell the PaymentRequest API the validation was
        // successful. The user-agent may show a "payment successful"
        // message to the user.
        const paymentComplete = await paymentResponse.complete('success');
    } else {
        // Optional: tell the PaymentRequest API the validation failed. The
        // user agent may show a message to the user.
        const paymentComplete = await paymentResponse.complete('fail');
    }
} catch(e) {
    // The purchase failed, and we can handle the failure here. AbortError
    // usually means a user cancellation
}
...

คุณอาจเรียกใช้ consume() ใน purchaseToken เพื่อทําเครื่องหมายการซื้อว่าใช้ไปแล้วและอนุญาตให้ซื้ออีกครั้งได้

เมื่อรวมทุกอย่างเข้าด้วยกัน วิธีการซื้อจะมีลักษณะดังต่อไปนี้

async function makePurchase(service, sku) {
    // Define the preferred payment method and item ID
    const paymentMethods = [{
        supportedMethods: "https://play.google.com/billing",
        data: {
            sku: sku,
        }
    }];

    // The "total" member of the paymentDetails is required by the Payment
    // Request API, but is not used when using Google Play Billing. We can
    // set it up with bogus details.
    const paymentDetails = {
        total: {
            label: `Total`,
            amount: {currency: `USD`, value: `0`}
        }
    };

    const request = new PaymentRequest(paymentMethods, paymentDetails);
    try {
        const paymentResponse = await request.show();
        const {purchaseToken} = paymentResponse.details;

        // Call backend to validate and acknowledge the purchase.
        if (await acknowledgePurchaseOnBackend(purchaseToken, sku)) {
            // Optional: consume the purchase, allowing the user to purchase
            // the same item again.
            service.consume(purchaseToken);

            // Optional: tell the PaymentRequest API the validation was
            // successful. The user-agent may show a "payment successful"
            // message to the user.
            const paymentComplete =
                    await paymentResponse.complete('success');
        } else {
            // Optional: tell the PaymentRequest API the validation failed.
            // The user agent may show a message to the user.
            const paymentComplete = await paymentResponse.complete('fail');
        }
    } catch(e) {
        // The purchase failed, and we can handle the failure here.
        // AbortError usually means a user cancellation
    }
}

ตรวจสอบสถานะการซื้อที่มีอยู่

Digital Goods API ช่วยให้คุณตรวจสอบได้ว่าผู้ใช้มีสิทธิ์ใดๆ ที่มีอยู่ (การซื้อในแอปที่ยังไม่ได้ใช้งานหรือการสมัครใช้บริการต่อเนื่อง) จากการซื้อก่อนหน้านี้ที่ผู้ใช้ดำเนินการไปแล้ว ไม่ว่าจะในอุปกรณ์เครื่องอื่น จากการติดตั้งครั้งก่อนหน้า แลกสิทธิ์จากรหัสโปรโมชัน หรือเพิ่งแลกสิทธิ์เมื่อเปิดแอปครั้งล่าสุด


const service =
     await window.getDigitalGoodsService('https://play.google.com/billing');
...
const existingPurchases = await service.listPurchases();
for (const p of existingPurchases) {
    // Update the UI with items the user is already entitled to.
    console.log(`Users has entitlement for ${p.itemId}`);
}

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

const service =
     await window.getDigitalGoodsService("https://play.google.com/billing");
...
const existingPurchases = await service.listPurchases();
for (const p of existingPurchases) {
    await verifyOrAcknowledgePurchaseOnBackend(p.purchaseToken, p.itemId);

    // Update the UI with items the user is already entitled to.
    console.log(`Users has entitlement for ${p.itemId}`);
}

ทดสอบการผสานรวม

ในอุปกรณ์ Android สำหรับการพัฒนา

คุณเปิดใช้ Digital Goods API ในอุปกรณ์ Android สำหรับการพัฒนาเพื่อทดสอบได้ ดังนี้

  • ตรวจสอบว่าคุณใช้ Android 9 ขึ้นไปโดยเปิดใช้โหมดนักพัฒนาซอฟต์แวร์
  • ติดตั้ง Chrome เวอร์ชัน 101 ขึ้นไป
  • เปิดใช้การติดธงต่อไปนี้ใน Chrome โดยไปที่ chrome://flags แล้วค้นหาการติดธงตามชื่อ
    • #enable-debug-for-store-billing
  • ตรวจสอบว่าเว็บไซต์โฮสต์โดยใช้โปรโตคอล https การใช้ http จะทำให้ API เป็น undefined

ในอุปกรณ์ ChromeOS

Digital Goods API จะพร้อมใช้งานใน ChromeOS เวอร์ชันเสถียรตั้งแต่เวอร์ชัน 89 เป็นต้นไป ในระหว่างนี้ คุณสามารถทดสอบ Digital Goods API ได้โดยทำดังนี้

  • ติดตั้งแอปจาก Play Store บนอุปกรณ์
  • ตรวจสอบว่าเว็บไซต์โฮสต์โดยใช้โปรโตคอล https การใช้ http จะทำให้ API เป็น undefined

กับผู้ใช้ทดสอบและทีม QA

Play Store มีสิ่งอํานวยความสะดวกสําหรับการทดสอบ ซึ่งรวมถึงบัญชีทดสอบของผู้ใช้และ SKU ทดสอบ ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบการทดสอบ Google Play Billing

ไปที่ไหนต่อดี

ดังที่ได้กล่าวไว้ในเอกสารนี้ Play Billing API ประกอบด้วยคอมโพเนนต์ฝั่งไคลเอ็นต์ซึ่งจัดการโดย Digital Goods API และคอมโพเนนต์ฝั่งเซิร์ฟเวอร์