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

1. مقدمه

این Codelab ادامه Google Pay API برای Web 101: Basics است و بر روی کد نوشته شده در آن Codelab متکی است. برای تکمیل این کد، حتماً ابتدا آن را تکمیل کنید.

چیزی که یاد خواهید گرفت

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

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

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

با استفاده از Project IDX همراه باشید

این کد لبه را در IDX باز کنید

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

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

گزینه

ضرورت

ارزش ها

روی کلیک کنید

مورد نیاز

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

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

اختیاری

PaymentMethod[]

دکمه رنگ

اختیاری

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

buttonLocale

اختیاری

کد 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.

شعاع دکمه

اختیاری

0 تا 100

buttonRootNode

اختیاری

HTMLDocument یا ShadowRoot

دکمهSizeMode

اختیاری

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

نوع دکمه

اختیاری

کتاب، خرید، پرداخت، اهدا، سفارش، پرداخت، ساده، اشتراک

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

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 می گیرد که به شما امکان می دهد نحوه ظاهر و رفتار دکمه را تعریف کنید.

3. بازخوانی داده های پرداخت

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

  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 comment را در main.js پیدا کنید و کامنت را با این کد جایگزین کنید. در این کد لبه قصد داریم هر 4 هدف را پیاده سازی کنیم. 
    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. در صورت اجرای تماس‌های برگشتی، onPaymentAuthorized مورد نیاز است. این پاسخ تماس زمانی فراخوانی می‌شود که فهرست callbackIntents شامل PAYMENT_AUTHORIZATION در PaymentDataRequest باشد.
  3. onPaymentDataChanged اختیاری است. این پاسخ تماس زمانی فراخوانی می شود که لیست callbackIntents شامل OFFER ، SHIPPING_ADDRESS ، یا SHIPPING_OPTION در PaymentDataRequest باشد.
  4. callbackIntents در PaymentDataRequest تنظیم کنید تا هر دو تماس را برای این Codelab فعال کنند.

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

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

تابع 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. تابع callback onPaymentAuthorized() با آرگومان PaymentData فراخوانی می شود و باید یک وعده را برگرداند. در این مثال، تابع به طور تصادفی انتخاب می کند که آیا موفقیت یا خطا را بازگرداند. در پروژه خود، از این فرصت برای پردازش تراکنش با دروازه خود با استفاده از رمز موجود در paymentData در paymentData.paymentMethodData.tokenizationData.token استفاده خواهید کرد.

5. تغییر داده های پرداخت

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

تابع 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() باید قولی را برگرداند که یک شی PaymentDataRequestUpdate را که اطلاعات جدید تراکنش، گزینه های حمل و نقل و خطا را برای به روز رسانی برگه پرداخت مشخص می کند، حل کند.
  3. redemptionCodes مجموعه ای از کدهای تبلیغاتی هستند که در برگه پرداخت وارد می شوند. شامل کدهایی است که قبلاً تأیید شده اند.

6. نتیجه گیری

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

پروژه را اجرا کنید

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

با استفاده از مرورگر وب Google Chrome ، index.html با استفاده از File > Open File... از منوی اصلی Chrome باز کنید. وقتی پروژه به این شکل باز شود، Chrome 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 دیدن کنید.

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

منابع اضافی