Google Pay API برای وب 201: پیشرفته

۱. مقدمه

این آزمایشگاه کد، ادامه‌ی API گوگل پی برای وب ۱۰۱: مبانی است و به کدی که در آن آزمایشگاه کد نوشته شده است، متکی است. برای تکمیل این آزمایشگاه کد، حتماً ابتدا آن را تکمیل کنید.

آنچه یاد خواهید گرفت

  • نحوه شخصی‌سازی دکمه گوگل پی
  • نحوه شروع فرآیند پرداخت
  • نحوه تأیید وضعیت مجوز پرداخت
  • نحوه مدیریت تغییرات آدرس حمل و نقل
  • نحوه کار با کدهای بازخرید

آنچه نیاز دارید

  • یک ویرایشگر متن به دلخواه شما برای ویرایش فایل‌های HTML و جاوا اسکریپت.
  • مرورگر وب گوگل کروم یا روش دیگری برای آزمایش یک وب‌سایت محلی.
  • برای تولید، به یک شناسه تجاری گوگل پی (Google Pay merchantId ) نیاز دارید. ثبت نام در کنسول گوگل پی و کیف پول (Google Pay & Wallet Console) فقط یک دقیقه طول می‌کشد، پس بهتر است همین الان این کار را انجام دهید.

با استفاده از Firebase Studio همراه ما باشید

باز کردن در فایربیس استودیو

۲. سفارشی‌سازی دکمه

این یک مرور کلی از ButtonOptions است. برای توضیحات بیشتر به مستندات مراجعه کنید.

گزینه

ضرورت

ارزش‌ها

روی کلیک

مورد نیاز

نام کنترل‌کننده رویداد جاوا اسکریپت

روش‌های پرداخت مجاز

اختیاری

PaymentMethod[]

رنگ دکمه

اختیاری

پیش‌فرض، سیاه، سفید

دکمه محلی

اختیاری

کد دو حرفی ISO 639-1.
زبان‌های پشتیبانی‌شده شامل en، ar، bg، ca، cs، da، de، el، es، et، fi، fr، hr، id، it، ja، ko، ms، nl، no، pl، pt، ru، sk، sl، sr، sv، th، tr، uk و zh هستند.

دکمهشعاع

اختیاری

۰ تا ۱۰۰

دکمهRootNode

اختیاری

سند HTML یا ShadowRoot

دکمهاندازهحالت

اختیاری

استاتیک، پر کردن

نوع دکمه

اختیاری

رزرو، خرید، تسویه حساب، اهدا، سفارش، پرداخت، ساده، مشترک شدن

در فایل main.js خود به دنبال متد renderGooglePayButton() بگردید و آن را با کدی که در اینجا ذکر شده است جایگزین کنید.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

توضیح کد

  1. متد کتابخانه‌ای createButton() یک آرگومان پیکربندی ButtonOptions دریافت می‌کند که به شما امکان می‌دهد نحوه‌ی نمایش و رفتار دکمه را تعریف کنید.

۳. فراخوانی‌های داده‌های پرداخت

کلاینت پرداخت‌ها مکانیزمی را برای شما فراهم می‌کند تا توابعی را ثبت کنید تا در صورت وقوع رویدادهای خاص، آنها را مدیریت کنید. اولین مورد، مجوز پرداخت و دومین مورد، تغییر داده‌های پرداخت است.

  1. کامنت // todo: paymentDataCallbacks را در main.js پیدا کنید و آن را با این کد جایگزین کنید. 
    paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},
  2. سپس بخش Event Handlers را در main.js پیدا کنید و کد زیر را به انتهای بخش اضافه کنید. 
    function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}
  3. در نهایت، کامنت // todo: callbackIntents را در main.js پیدا کنید و این کد را جایگزین کامنت کنید. در این آزمایشگاه کد، ما قصد داریم هر ۴ intent را پیاده‌سازی کنیم. 
    callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free shipping',
      description: 'Free Shipping delivered in 5 business days.'
    },
    {
      id: 'shipping-002',
      label: '$1.99: Standard shipping',
      description: 'Standard shipping delivered in 3 business days.'
    },
    {
      id: 'shipping-003',
      label: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

توضیح کد

  1. ویژگی PaymentDataCallbacks دارای دو زیر ویژگی است که یکی برای فراخوانی مجوز پرداخت و دیگری برای فراخوانی تغییر داده‌های پرداخت است.
  2. در صورت پیاده‌سازی callbackها، onPaymentAuthorized الزامی است. این callback زمانی فراخوانی می‌شود که لیست callbackIntents شامل PAYMENT_AUTHORIZATION در PaymentDataRequest باشد.
  3. onPaymentDataChanged اختیاری است. این فراخوانی زمانی فراخوانی می‌شود که لیست callbackIntents شامل OFFER ، SHIPPING_ADDRESS یا SHIPPING_OPTION در PaymentDataRequest باشد.
  4. callbackIntents در PaymentDataRequest طوری تنظیم کنید که هر دو callback را برای این codelab فعال کند.

۴. مجوز پرداخت

مجوز پرداخت‌ها برای شروع فرآیند پرداخت و تأیید وضعیت مجوز پرداخت استفاده می‌شود.

تابع onPaymentAuthorized() را که در مرحله قبل اضافه کرده‌اید، در main.js پیدا کنید و آن را با کد زیر جایگزین کنید.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

توضیح کد

  1. تابع فراخوانی onPaymentAuthorized() با آرگومان PaymentData فراخوانی می‌شود و باید یک promise را برگرداند. در این مثال، تابع به صورت تصادفی انتخاب می‌کند که آیا موفقیت را برگرداند یا خطا. در پروژه شما، از این فرصت برای پردازش تراکنش با درگاه خود با استفاده از توکن موجود در paymentData در paymentData.paymentMethodData.tokenizationData.token استفاده خواهید کرد.

۵. تغییر داده‌های پرداخت

به‌روزرسانی‌های پویای قیمت به فروشنده اجازه می‌دهد تا گزینه‌های ارسال و اطلاعات تراکنش را بر اساس آدرس ارسال انتخاب‌شده، به‌صورت پویا به‌روزرسانی کند. علاوه بر این، شما می‌توانید اطلاعات تراکنش را بر اساس گزینه ارسال انتخاب‌شده، به‌صورت پویا به‌روزرسانی کنید.

تابع onPaymentDataChanged() را که در مرحله قبل اضافه کرده‌اید، در main.js پیدا کنید و آن را با کد زیر جایگزین کنید.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

توضیح کد

  1. تابع onPaymentDataChanged() IntermediatePaymentData به عنوان آرگومان دریافت می‌کند. این تابع زمانی فراخوانی می‌شود که آدرس ارسال یا گزینه‌های ارسال در برگه پرداخت تغییر کند.
  2. تابع onPaymentDataChanged() باید یک promise برگرداند که یک شیء PaymentDataRequestUpdate را حل کند که اطلاعات تراکنش جدید، گزینه‌های ارسال و خطای به‌روزرسانی برگه پرداخت را مشخص می‌کند.
  3. redemptionCodes مجموعه‌ای از کدهای تبلیغاتی هستند که در برگه پرداخت وارد می‌شوند. شامل کدهایی می‌شوند که قبلاً تأیید شده‌اند.

۶. نتیجه‌گیری

تبریک می‌گویم که این Codelab را تمام کردید! شما یاد گرفتید که چگونه ...

اجرای پروژه

با گوگل کروم تست کنید

با استفاده از مرورگر وب گوگل کروم ، index.html را با استفاده از مسیر File > Open File... از منوی اصلی کروم باز کنید. کروم وقتی پروژه به این روش باز شود، main.js اجرا خواهد کرد. سایر مرورگرهای وب ممکن است اجازه اجرای جاوا اسکریپت را ندهند.

– یا –

با یک وب سرور محلی تست کنید

اگر پایتون نصب شده است، دستور python3 -m http.server را از طریق ترمینال و در پوشه‌ی root یعنی pay-web-101 اجرا کنید.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

سپس، از سایت خود در http://localhost:8000 بازدید کنید.

از اینجا به کجا برویم؟

منابع اضافی