ใช้ Google Play Billing ในกิจกรรมในเว็บซึ่งเชื่อถือได้

André Cipriani Bandarra

คู่มือนี้มีไว้สำหรับเว็บแอปที่จัดแพ็กเกจเป็นกิจกรรมในเว็บซึ่งเชื่อถือได้ สำหรับแอป Android ที่เขียนด้วย Kotlin หรือ Java โปรดดูเอกสารประกอบเกี่ยวกับ Google Play Billing

แอปใน Google Play ที่ขายสินค้าดิจิทัลหรือการสมัครใช้บริการต้องใช้ Google Play Billing ในกิจกรรมในเว็บซึ่งเชื่อถือได้ คุณจะผสานรวมกับกิจกรรมดังกล่าวโดยใช้ Web API ต่อไปนี้ ซึ่งพร้อมใช้งานใน Chrome 101 ขึ้นไปบน Android และ ChromeOS

  • Digital Goods API: ดึงข้อมูลรายละเอียดสินค้าดิจิทัลและการซื้อของผู้ใช้
  • Payment Request API: เริ่มขั้นตอนการซื้อ

ข้อกำหนด

หากต้องการตั้งค่า Google Play Billing คุณต้องมีสิ่งต่อไปนี้

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

เปิดใช้ Play Billing ในโปรเจ็กต์ Android

หากสร้างแอปด้วย Bubblewrap ให้เปิดใช้ฟีเจอร์ playBilling ใน twa-manifest.json ที่รูทของโปรเจ็กต์ ดังนี้

"features": {
  "playBilling": {
    "enabled": true
  }
}

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

หากคุณสร้างแอปใน Android Studio ให้เพิ่มไลบรารี Android Browser Helper Play Billing ดูการเปลี่ยนแปลง DelegationService และ AndroidManifest.xml ที่จำเป็นได้ที่เดโม twa-play-billing

ตรวจสอบการรองรับ Google Play Billing

เรียกใช้ getDigitalGoodsService() ด้วยตัวระบุ Play Store https://play.google.com/billing หากไม่มีวิธีการดังกล่าวหรือการโทรไม่สำเร็จ ให้ใช้ขั้นตอนการชำระเงินอื่น ดังนี้

if ('getDigitalGoodsService' in window) {
  try {
    const service =
        await window.getDigitalGoodsService('https://play.google.com/billing');
    // Google Play Billing is available.
  } catch (error) {
    // Google Play Billing isn't available. Use another payment flow.
  }
}

แสดงรายละเอียดสินค้า

ใช้ getDetails() เพื่อดึงข้อมูลชื่อ คำอธิบาย และราคาสำหรับรหัสสินค้า เพื่อให้ราคาที่คุณแสดงตรงกับ Play Store ดังนี้

const details = await service.getDetails(['shiny_sword', 'gem']);
for (const item of details) {
  const localizedPrice = new Intl.NumberFormat(
      navigator.language,
      {style: 'currency', currency: item.price.currency}
  ).format(item.price.value);

  renderProductDetails(
      item.itemId, item.title, localizedPrice, item.description);
}

Digital Goods API แสดงรหัสสินค้าของคุณไม่ได้ หากต้องการค้นหาจากแบ็กเอนด์ ให้ใช้ Google Play Developer API

ทำการซื้อ

สร้าง PaymentRequest โดยมี https://play.google.com/billing เป็นวิธีการชำระเงินและรหัสสินค้าเป็น sku ใน data Google Play Billing ใช้ราคาจาก Play Console ดังนั้นจึงต้องระบุ total แต่ระบบจะไม่สนใจ

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

async function makePurchase(service, sku) {
  const paymentMethods = [{
    supportedMethods: 'https://play.google.com/billing',
    data: {sku},
  }];
  // Required by the Payment Request API, but ignored by Google Play Billing.
  const paymentDetails = {
    total: {label: 'Total', amount: {currency: 'USD', value: '0'}},
  };

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

    if (await acknowledgePurchaseOnBackend(purchaseToken, sku)) {
      // Optional: consume the purchase so the user can buy the item again.
      await service.consume(purchaseToken);
      await response.complete('success');
    } else {
      await response.complete('fail');
    }
  } catch (error) {
    // An AbortError usually means the user canceled the purchase.
  }
}

ตรวจสอบการซื้อของผู้ใช้

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

const purchases = await service.listPurchases();
for (const p of purchases) {
  await verifyOrAcknowledgePurchaseOnBackend(p.purchaseToken, p.itemId);
  // Update the UI with items the user is entitled to.
}

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

หากต้องการทดสอบในอุปกรณ์ Android ก่อนเผยแพร่ไปยัง Play Store ให้ทำตามขั้นตอนต่อไปนี้

  1. ใช้ Android 9 ขึ้นไปโดยเปิดใช้ตัวเลือกสำหรับนักพัฒนาแอป
  2. ใน Chrome ให้ไปที่ chrome://flags แล้วเปิดใช้ #enable-debug-for-store-billing
  3. แสดงเว็บไซต์ผ่าน HTTPS Digital Goods API ไม่พร้อมใช้งานผ่าน HTTP

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

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