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

André Cipriani Bandarra

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

สำหรับแอปที่สร้างขึ้นโดยใช้กิจกรรมบนเว็บที่เชื่อถือได้ และนำส่งผ่าน 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

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

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

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

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

ข้อกำหนด

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

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

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

นอกจากนี้ ลูกโป่งยังมีฟีเจอร์ด้านหลังธงด้วย ใน คุณจะต้องแก้ไขการกำหนดค่าโปรเจ็กต์ใน 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 ภายใน กิจกรรมบนเว็บที่เชื่อถือได้ และสามารถตรวจพบได้ว่ากิจกรรมดังกล่าวพร้อมใช้งานหรือไม่ โดยตรวจสอบ getDigitalGoodsService บนออบเจ็กต์ window:

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

Digital Goods API อาจมีให้ใช้งานในเบราว์เซอร์ใดก็ได้และรองรับ App Store หลายแห่ง หากต้องการ ตรวจสอบว่าระบบสนับสนุนแบ็กเอนด์ของ Store ที่เฉพาะเจาะจงหรือไม่ คุณจะต้องเรียกใช้ 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 Billing โดย การตั้งค่า 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 จะไม่สนใจค่าเหล่านั้นและใช้ ที่ตั้งไว้เมื่อสร้าง 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

ไปที่ไหนดี

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