ปลดล็อกการสร้างรายได้บนเว็บ: เจาะลึก Digital Goods API สำหรับการซื้อภายในแอป

เป็นเวลาหลายปีที่แอปพลิเคชันบนมือถือแบบเนทีฟมีความได้เปรียบที่ชัดเจนในด้านการสร้างรายได้ นั่นคือระบบการซื้อภายในแอป (in-app purchase - IAP) ที่ราบรื่นและน่าเชื่อถือ ซึ่งผสานรวมโดยตรงกับแอปสโตร์ของระบบปฏิบัติการ กระบวนการที่คล่องตัวนี้เป็นรากฐานสำคัญของเศรษฐกิจแอปบนมือถือ ในขณะเดียวกัน เว็บแบบเปิดแม้จะมีการเข้าถึงที่ไม่มีใครเทียบได้ แต่ก็ต้องต่อสู้กับภาพรวมของผู้ให้บริการชำระเงินภายนอกที่กระจัดกระจาย ซึ่งมักจะนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ค่อยบูรณาการและน่าเชื่อถือน้อยกว่า

ขอแนะนำ Digital Goods API มาตรฐานเว็บสมัยใหม่นี้เป็นตัวเปลี่ยนเกมสำหรับ Progressive Web Apps (PWAs) โดยมีเป้าหมายเพื่อลดช่องว่างระหว่างการสร้างรายได้บนเว็บและแบบเนทีฟ API นี้เป็นวิธีที่เป็นมาตรฐานสำหรับเว็บแอปพลิเคชันในการสื่อสารกับบริการจัดจำหน่ายดิจิทัล เช่น Google Play Store หรือ Microsoft Store เพื่อจัดการผลิตภัณฑ์และการซื้อภายในแอป

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

บทที่ 1: ทำความเข้าใจ Digital Goods API

Digital Goods API คืออะไร

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

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

• สินค้าที่ใช้แล้วหมดไป (Consumables): การซื้อครั้งเดียวที่สามารถใช้และซื้อซ้ำได้ เช่น สกุลเงินในเกม, ชีวิตพิเศษ หรือตัวช่วยเพิ่มพลัง
• สินค้าที่ซื้อครั้งเดียว (Non-consumables): การซื้อถาวรครั้งเดียว เช่น การปลดล็อกฟีเจอร์พรีเมียม, การลบโฆษณา หรือการซื้อชุดด่านใหม่
• การสมัครสมาชิก (Subscriptions): การชำระเงินแบบประจำเพื่อการเข้าถึงเนื้อหาหรือบริการอย่างต่อเนื่อง เช่น การสมัครสมาชิกข่าวรายเดือน หรือการเข้าถึงชุดซอฟต์แวร์พรีเมียม

ประโยชน์หลักของการใช้ API นี้ ได้แก่:

• ประสบการณ์ผู้ใช้ที่ราบรื่น: ผู้ใช้สามารถซื้อสินค้าดิจิทัลโดยใช้บัญชีสโตร์ที่มีอยู่และน่าเชื่อถือได้โดยไม่ต้องป้อนข้อมูลการชำระเงินใหม่ ซึ่งช่วยลดความยุ่งยากและสามารถเพิ่มอัตราการแปลง (conversion rates) ได้อย่างมาก
• ขั้นตอนการชำระเงินที่น่าเชื่อถือ: กระบวนการชำระเงินทั้งหมดได้รับการจัดการโดยแพลตฟอร์มพื้นฐาน (เช่น Google Play) โดยใช้ประโยชน์จากความปลอดภัย ความคุ้นเคย และวิธีการชำระเงินที่บันทึกไว้
• ลดภาระงานในการพัฒนา: แทนที่จะต้องผสานรวมผู้ประมวลผลการชำระเงินหลายรายสำหรับภูมิภาคหรือความต้องการที่แตกต่างกัน นักพัฒนาสามารถใช้ API มาตรฐานเพียงตัวเดียวที่เบราว์เซอร์และแพลตฟอร์มพื้นฐานจัดการได้

แนวคิดหลักและคำศัพท์ที่เกี่ยวข้อง

เพื่อให้สามารถใช้ API ได้อย่างมีประสิทธิภาพ จำเป็นต้องเข้าใจส่วนประกอบหลักของมัน:

• DigitalGoodsService: นี่คือจุดเริ่มต้นหลักของ API คุณจะได้รับอินสแตนซ์ของบริการนี้เพื่อโต้ตอบกับผู้ให้บริการชำระเงิน
• SKU (Stock Keeping Unit): ตัวระบุที่ไม่ซ้ำกันสำหรับผลิตภัณฑ์ดิจิทัลแต่ละรายการที่คุณขาย คุณกำหนด SKU เหล่านี้ในคอนโซลนักพัฒนาของผู้ให้บริการชำระเงินของคุณ (เช่น Google Play Console)
• `getDetails(skus)`: เมธอดสำหรับดึงข้อมูลโดยละเอียดเกี่ยวกับผลิตภัณฑ์ของคุณ เช่น ชื่อ, คำอธิบาย และที่สำคัญที่สุดคือราคาและสกุลเงินที่ปรับตามท้องถิ่นสำหรับผู้ใช้ปัจจุบัน
• Purchase Token: สตริงที่ปลอดภัยและไม่ซ้ำกันซึ่งแสดงถึงธุรกรรมที่เสร็จสมบูรณ์ โทเค็นนี้มีความสำคัญอย่างยิ่งสำหรับการตรวจสอบฝั่งแบ็กเอนด์
• `listPurchases()`: ดึงรายการการซื้อที่ยังใช้งานอยู่และยังไม่ได้ใช้ของผู้ใช้ ซึ่งจำเป็นสำหรับการกู้คืนการเข้าถึงฟีเจอร์พรีเมียมเมื่อผู้ใช้เข้าสู่ระบบบนอุปกรณ์ใหม่
• `consume(purchaseToken)`: ทำเครื่องหมายผลิตภัณฑ์ที่ใช้แล้วหมดไปแบบซื้อครั้งเดียวว่าถูกใช้แล้ว หลังจากการใช้ ผู้ใช้สามารถซื้อสินค้านั้นซ้ำได้อีกครั้ง นี่เป็นสิ่งสำคัญสำหรับไอเท็มเช่นสกุลเงินในเกม
• `acknowledge(purchaseToken)`: ยืนยันว่าการซื้อสินค้าแบบซื้อครั้งเดียวหรือการสมัครสมาชิกได้รับการประมวลผลและมอบให้กับผู้ใช้เรียบร้อยแล้ว หากการซื้อไม่ได้รับการยืนยันภายในกรอบเวลาที่กำหนด (เช่น สามวันบน Google Play) แพลตฟอร์มอาจคืนเงินให้ผู้ใช้โดยอัตโนมัติ

ความแตกต่างจากการชำระเงินบนเว็บแบบดั้งเดิม

สิ่งสำคัญคือต้องแยกแยะ Digital Goods API ออกจากเทคโนโลยีการชำระเงินบนเว็บอื่นๆ:

• เทียบกับ Payment Request API: Payment Request API ถูกออกแบบมาสำหรับธุรกรรมที่หลากหลายกว่า รวมถึงสินค้าและบริการทางกายภาพ มันสร้างมาตรฐานของ *ขั้นตอน* การชำระเงิน แต่ยังคงต้องการให้คุณผสานรวมกับผู้ประมวลผลการชำระเงินเช่น Stripe หรือ Adyen เพื่อจัดการการชำระเงินจริง ในทางตรงกันข้าม Digital Goods API มีไว้สำหรับ *สินค้าดิจิทัล* โดยเฉพาะและผสานรวมโดยตรงกับ *ระบบการเรียกเก็บเงิน* ของแอปสโตร์ ที่จริงแล้ว Digital Goods API มักจะใช้ Payment Request API เบื้องหลังเพื่อเริ่มต้นขั้นตอนการซื้อสำหรับ SKU ที่ต้องการ
• เทียบกับ SDK ของบุคคลที่สาม (Stripe, PayPal, ฯลฯ): บริการเหล่านี้ยอดเยี่ยมสำหรับการชำระเงินโดยตรงถึงผู้บริโภคบนเว็บ อย่างไรก็ตาม บริการเหล่านี้ต้องการให้ผู้ใช้ป้อนรายละเอียดการชำระเงิน (หรือเข้าสู่ระบบบัญชีแยกต่างหาก) และทำงานเป็นอิสระจากแอปสโตร์ของแพลตฟอร์ม Digital Goods API ใช้ประโยชน์จากความสัมพันธ์ทางการเงินที่มีอยู่แล้วของผู้ใช้กับสโตร์ ทำให้เกิดประสบการณ์ที่บูรณาการและ 'เหมือนเนทีฟ' มากขึ้น

บทที่ 2: เส้นทางการนำไปใช้งาน: คู่มือทีละขั้นตอน

เรามาดูขั้นตอนการปฏิบัติในการผสาน Digital Goods API เข้ากับ PWA กัน คู่มือนี้ถือว่าคุณมีโครงสร้าง PWA พื้นฐานอยู่แล้ว

ข้อกำหนดเบื้องต้นและการตั้งค่า

1. PWA ที่ทำงานได้: เว็บแอปของคุณต้องสามารถติดตั้งได้และเป็นไปตามเกณฑ์ของ PWA รวมถึงมี service worker และ web app manifest
2. Trusted Web Activity (TWA): ในการเผยแพร่ PWA ของคุณบนสโตร์เช่น Google Play คุณจะต้องห่อมันด้วย Trusted Web Activity ซึ่งเกี่ยวข้องกับการตั้งค่าไฟล์ Digital Asset Links เพื่อพิสูจน์ความเป็นเจ้าของโดเมนของคุณ
3. บัญชีสโตร์และการกำหนดค่าผลิตภัณฑ์: คุณต้องมีบัญชีนักพัฒนาสำหรับสโตร์เป้าหมาย (เช่น Google Play Console) และกำหนดค่าผลิตภัณฑ์ดิจิทัลของคุณ (SKUs) รวมถึง ID, ประเภท (ใช้แล้วหมดไป, ซื้อครั้งเดียว, สมัครสมาชิก), ราคา และคำอธิบาย

ขั้นตอนที่ 1: การตรวจจับฟีเจอร์ (Feature Detection)

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

            if ('getDigitalGoodsService' in window) {
  // The Digital Goods API is available!
  console.log('Digital Goods API supported.');
  // Proceed with initialization.
} else {
  // The API is not available.
  console.log('Digital Goods API not supported.');
  // Hide IAP purchase buttons or show an alternative message.
}

            

              
                Copy
              
            
          

ขั้นตอนที่ 2: การเชื่อมต่อกับบริการ

เมื่อคุณยืนยันการรองรับแล้ว คุณต้องอ้างอิงถึง `DigitalGoodsService` ซึ่งทำได้โดยการเรียก `window.getDigitalGoodsService()` พร้อมกับตัวระบุสำหรับผู้ให้บริการชำระเงิน สำหรับ Google Play Billing ตัวระบุคือ `"https://play.google.com/billing"`

            async function initializeDigitalGoods() {
  if (!('getDigitalGoodsService' in window)) {
    return null;
  }

  try {
    const service = await window.getDigitalGoodsService("https://play.google.com/billing");
    if (service === null) {
        console.log('No payment provider available.');
        return null;
    }
    return service;
  } catch (error) {
    console.error('Error connecting to Digital Goods Service:', error);
    return null;
  }
}

// Usage:
const digitalGoodsService = await initializeDigitalGoods();

            

              
                Copy
              
            
          

ขั้นตอนที่ 3: การดึงรายละเอียดสินค้า

ก่อนที่คุณจะสามารถแสดงปุ่มซื้อได้ คุณต้องแสดงรายละเอียดของผลิตภัณฑ์ โดยเฉพาะอย่างยิ่งราคาที่ปรับตามท้องถิ่น การเขียนราคาแบบตายตัว (Hardcoding) เป็นแนวปฏิบัติที่ไม่ดี เนื่องจากไม่ได้คำนึงถึงสกุลเงินที่แตกต่างกัน การกำหนดราคาตามภูมิภาค หรือภาษีการขาย ใช้เมธอด `getDetails()` เพื่อดึงข้อมูลนี้โดยตรงจากผู้ให้บริการชำระเงิน

            async function loadProductDetails(service, skus) {
  if (!service) return;

  try {
    const details = await service.getDetails(skus); // skus is an array of strings, e.g., ['premium_upgrade', '100_coins']
    if (details.length === 0) {
        console.log('No products found for the given SKUs.');
        return;
    }

    for (const product of details) {
        console.log(`Product ID: ${product.itemId}`);
        console.log(`Title: ${product.title}`);
        console.log(`Price: ${product.price.value} ${product.price.currency}`);
        
        // Now, update your UI with this information
        const button = document.getElementById(`purchase-${product.itemId}`);
        button.querySelector('.price').textContent = `${product.price.value} ${product.price.currency}`;
    }
  } catch (error) {
    console.error('Failed to fetch product details:', error);
  }
}

// Usage:
const mySkus = ['remove_ads', 'pro_subscription_monthly'];
await loadProductDetails(digitalGoodsService, mySkus);

            

              
                Copy
              
            
          

ขั้นตอนที่ 4: การเริ่มกระบวนการซื้อ

ขั้นตอนการซื้อจะเริ่มต้นโดยใช้ Payment Request API มาตรฐาน ความแตกต่างที่สำคัญคือแทนที่จะระบุวิธีการชำระเงินแบบดั้งเดิม คุณจะส่ง SKU ของสินค้าดิจิทัลที่คุณต้องการขาย

            async function purchaseProduct(sku) {
  try {
    // Define the payment method with the SKU
    const paymentMethod = [{
        supportedMethods: "https://play.google.com/billing",
        data: {
            sku: sku,
        }
    }];

    // Standard Payment Request API details
    const paymentDetails = {
        total: {
            label: `Total`,
            amount: { currency: 'USD', value: '0' } // The price is determined by the SKU, this can be a placeholder
        }
    };

    // Create and show the payment request
    const request = new PaymentRequest(paymentMethod, paymentDetails);
    const paymentResponse = await request.show();

    // The purchase was successful on the client-side
    const { purchaseToken } = paymentResponse.details;
    console.log(`Purchase successful! Token: ${purchaseToken}`);
    
    // IMPORTANT: Now, verify this token on your backend
    await verifyPurchaseOnBackend(purchaseToken);

    // After backend verification, call consume() or acknowledge() if needed
    await paymentResponse.complete('success');

  } catch (error) {
    console.error('Purchase failed:', error);
    if (paymentResponse) {
        await paymentResponse.complete('fail');
    }
  }
}

// Usage when a user clicks a button:
document.getElementById('purchase-pro_subscription_monthly').addEventListener('click', () => {
    purchaseProduct('pro_subscription_monthly');
});

            

              
                Copy
              
            
          

ขั้นตอนที่ 5: การจัดการการซื้อ (หลังการทำธุรกรรม)

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

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

            async function restorePurchases(service) {
  if (!service) return;

  try {
    const existingPurchases = await service.listPurchases();
    for (const purchase of existingPurchases) {
        console.log(`Restoring purchase for SKU: ${purchase.itemId}`);
        // Verify each purchase token on your backend to prevent fraud
        // and grant the user the corresponding feature.
        await verifyPurchaseOnBackend(purchase.purchaseToken);
    }
  } catch (error) {
    console.error('Failed to restore purchases:', error);
  }
}

// Call this on app load for a signed-in user
await restorePurchases(digitalGoodsService);

            

              
                Copy
              
            
          

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

• `consume()`: ใช้สำหรับผลิตภัณฑ์ที่ซื้อครั้งเดียวและสามารถซื้อซ้ำได้ เมื่อถูกใช้แล้ว รายการจะถูกลบออกจากผลลัพธ์ของ `listPurchases()` และผู้ใช้สามารถซื้อได้อีกครั้ง
• `acknowledge()`: ใช้สำหรับสินค้าที่ซื้อครั้งเดียวและสำหรับการสมัครสมาชิกใหม่ เพื่อยืนยันว่าคุณได้ส่งมอบสินค้าแล้ว นี่เป็นการกระทำเพียงครั้งเดียวต่อหนึ่ง purchase token

            // This should be called AFTER successful backend verification

async function handlePostPurchase(service, purchaseToken, isConsumable) {
    if (!service) return;

    try {
        if (isConsumable) {
            await service.consume(purchaseToken);
            console.log('Purchase consumed successfully.');
        } else {
            await service.acknowledge(purchaseToken, 'developer_payload_string_optional');
            console.log('Purchase acknowledged successfully.');
        }
    } catch (error) {
        console.error('Error handling post-purchase action:', error);
    }
}

            

              
                Copy
              
            
          

บทที่ 3: การผสานรวมฝั่ง Backend และแนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด

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

ทำไมการตรวจสอบฝั่ง Backend จึงเป็นสิ่งที่ขาดไม่ได้

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

ขั้นตอนการตรวจสอบ

แผนภาพด้านล่างแสดงกระบวนการตรวจสอบที่ปลอดภัย:

แอปฝั่งไคลเอ็นต์ → (1. ส่ง Purchase Token) → เซิร์ฟเวอร์ Backend ของคุณ → (2. ตรวจสอบ Token กับ) → API ของผู้ให้บริการชำระเงิน (เช่น Google Play Developer API) → (3. ส่งคืนผลการตรวจสอบ) → เซิร์ฟเวอร์ Backend ของคุณ → (4. ให้สิทธิ์และยืนยัน) → แอปฝั่งไคลเอ็นต์

1. แอปฝั่งไคลเอ็นต์ทำการซื้อเสร็จสิ้นและได้รับ `purchaseToken`
2. ไคลเอ็นต์ส่ง `purchaseToken` นี้ไปยังเซิร์ฟเวอร์แบ็กเอนด์ที่ปลอดภัยของคุณ
3. เซิร์ฟเวอร์แบ็กเอนด์ของคุณทำการเรียก API แบบ server-to-server ไปยัง endpoint สำหรับการตรวจสอบของผู้ให้บริการชำระเงิน (เช่น endpoint `purchases.products.get` หรือ `purchases.subscriptions.get` ของ Google Play Developer API) โดยส่งโทเค็นไปด้วย
4. ผู้ให้บริการชำระเงินตอบกลับพร้อมสถานะของการซื้อ (เช่น ซื้อแล้ว, รอดำเนินการ, ยกเลิก)
5. หากการซื้อถูกต้อง แบ็กเอนด์ของคุณจะอัปเดตบัญชีของผู้ใช้ในฐานข้อมูลของคุณเพื่อมอบสิทธิ์ (เช่น ตั้งค่า `user.isPremium = true`)
6. แบ็กเอนด์ของคุณตอบกลับไคลเอ็นต์ด้วยข้อความสำเร็จ จากนั้นไคลเอ็นต์จึงควรเรียก `consume()` หรือ `acknowledge()` และอัปเดต UI

การจัดการการสมัครสมาชิกและการแจ้งเตือนแบบเรียลไทม์

การสมัครสมาชิกมีวงจรชีวิตที่ซับซ้อน (การต่ออายุ, การยกเลิก, ช่วงผ่อนผัน, การหยุดชั่วคราว) การพึ่งพาการเรียก `listPurchases()` ซ้ำๆ นั้นไม่มีประสิทธิภาพ แนวทางปฏิบัติที่ดีที่สุดคือการใช้ Real-Time Developer Notifications (RTDN) หรือ webhooks

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

บทที่ 4: หัวข้อขั้นสูงและข้อควรพิจารณาระดับโลก

การรองรับผู้ให้บริการชำระเงินหลายราย

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

            // A conceptual approach to support multiple stores
const SUPPORTED_PROVIDERS = [
    'https://play.google.com/billing',
    'https://apps.microsoft.com/store/billing'
];

async function getFirstSupportedService() {
    if (!('getDigitalGoodsService' in window)) return null;

    for (const providerId of SUPPORTED_PROVIDERS) {
        try {
            const service = await window.getDigitalGoodsService(providerId);
            if (service) {
                console.log(`Connected to: ${providerId}`);
                return service; // Return the first one that connects
            }
        } catch (error) {
            // Ignore errors for providers that are not available
            console.log(`Could not connect to ${providerId}`);
        }
    }
    return null;
}

            

              
                Copy
              
            
          

การปรับให้เข้ากับท้องถิ่น (Localization) และความเป็นสากล (Internationalization)

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับประสบการณ์ผู้ใช้ (UX)

• ความโปร่งใส: แสดงราคาเต็มอย่างชัดเจน และสำหรับ L การสมัครสมาชิก ให้ระบุความถี่ในการเรียกเก็บเงิน (`/เดือน`, `/ปี`)
• ความเรียบง่าย: ทำให้ปุ่มซื้อโดดเด่นและขั้นตอนง่ายที่สุดเท่าที่จะทำได้ API จะจัดการส่วนที่หนักหน่วงของหน้าจอการชำระเงิน
• กู้คืนการซื้อ: จัดหาปุ่ม "กู้คืนการซื้อ" ที่เข้าถึงได้ง่ายในการตั้งค่าของแอปของคุณ สิ่งนี้ทำให้ผู้ใช้มั่นใจว่าจะไม่สูญเสียการซื้อของพวกเขา
• การให้ข้อมูลตอบกลับ: ให้ข้อมูลตอบกลับที่ชัดเจนแก่ผู้ใช้ในทุกขั้นตอน: เมื่อการซื้อกำลังดำเนินการ, เมื่อสำเร็จ และโดยเฉพาะอย่างยิ่งเมื่อล้มเหลว

บทสรุป: อนาคตของการสร้างรายได้บนเว็บ

Digital Goods API แสดงถึงก้าวสำคัญในการสร้างความเท่าเทียมกันระหว่างแอปเนทีฟและ Progressive Web Apps ด้วยการจัดหากลไกการซื้อภายในแอปที่เป็นมาตรฐาน ปลอดภัย และใช้งานง่าย ทำให้ช่วยให้นักพัฒนาเว็บสามารถสร้างโมเดลธุรกิจที่ยั่งยืนได้โดยตรงบนเว็บแบบเปิด

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