Google Pay לאינטרנט 201: מתקדם

1. מבוא

סדנת הקוד הזו היא המשך של Google Pay API for Web 101: Basics, והיא מבוססת על הקוד שנכתב בסדנת הקוד הקודמת. כדי להשלים את סדנת הקוד הזו, חשוב להשלים קודם את סדנת הקוד הזו.

מה תלמדו

  • איך מתאימים אישית את הלחצן של Google Pay
  • איך מתחילים את תהליך התשלום
  • איך מאשרים את סטטוס האישור של התשלום
  • איך מטפלים בשינויים בכתובת למשלוח
  • איך מטפלים בקודים למימוש שוברים

מה נדרש

  • עורך טקסט לבחירתכם לעריכת קובצי HTML ו-JavaScript.
  • דפדפן האינטרנט Google Chrome או דרך אחרת לבדוק אתר מקומי.
  • בסביבת הייצור, תצטרכו merchantId של Google Pay. ההרשמה במסוף של Google Pay ו-Wallet נמשכת רק דקה, אז כדאי לעשות את זה עכשיו.

איך עוקבים אחרי האירוע באמצעות Project IDX

פתיחת ה-codelab הזה ב-IDX

2. התאמה אישית של הלחצן

זוהי סקירה כללית קצרה של ButtonOptions. הסבר מפורט יותר זמין במסמכי התיעוד

אפשרות

צורך

ערכים

onClick

חובה

השם של פונקציית הטיפול באירועים ב-JavaScript

allowedPaymentMethods

אופציונלי

PaymentMethod[]

buttonColor

אופציונלי

ברירת מחדל, שחור, לבן

buttonLocale

אופציונלי

קוד ISO 639-1 בן שתי אותיות.
השפות הנתמכות הן: 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.

buttonRadius

אופציונלי

0 עד 100

buttonRootNode

אופציונלי

HTMLDocument או ShadowRoot

buttonSizeMode

אופציונלי

סטטי, מילוי

buttonType

אופציונלי

book, buy, checkout, donate, order, pay, plain, subscribe

מחפשים את השיטה 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. קריאות חזרה (callbacks) של נתוני תשלום

לקוח התשלומים מספק מנגנון לצורך רישום פונקציות לטיפול באירועים מסוימים. הבקשה הראשונה היא בקשה לאישור תשלום, והבקשה השנייה היא בקשה לשינוי פרטי התשלום.

  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 ומחליפים את התגובה בקוד הזה. ב-codelab הזה נטמיע את כל 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 יש שני נכסי משנה: אחד להודעת חזרה (callback) לאישור תשלום והשני להודעת חזרה (callback) לשינוי של נתוני התשלום.
  2. אם מטמיעים קריאות חזרה (callbacks), onPaymentAuthorized נדרש. הקריאה החוזרת הזו מופעלת כשהרשימה callbackIntents מכילה את PAYMENT_AUTHORIZATION ב-PaymentDataRequest.
  3. הערך onPaymentDataChanged הוא אופציונלי. קריאת החזרה (callback) הזו מופעלת כשרשימת callbackIntents מכילה את הערכים OFFER,‏ SHIPPING_ADDRESS או SHIPPING_OPTION בשדה PaymentDataRequest.
  4. מגדירים את callbackIntents ב-PaymentDataRequest כדי להפעיל את שתי הפונקציות החוזרות (callbacks) ב-codelab הזה.

4. אישור תשלום

הקריאה Authorize Payments משמשת להתחלת תהליך התשלום ולאישור סטטוס הרשאת התשלום.

מחפשים את הפונקציה 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.

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() חייבת להחזיר הבטחה (promise) שמפנה לאובייקט PaymentDataRequestUpdate שמציין פרטי עסקה חדשים, אפשרויות משלוח ושגיאה לעדכון גיליון התשלומים.
  3. redemptionCodes הם קבוצה של קודי הטבה שמוזנים בגיליון התשלומים. כולל קודים שכבר אושרו.

6. סיכום

כל הכבוד על השלמת ה-Codelab הזה! למדתם איך ...

הרצת הפרויקט

בדיקה באמצעות Google Chrome

פותחים את index.html בדפדפן האינטרנט Google Chrome באמצעות קובץ > פתיחת קובץ… בתפריט הראשי של Chrome. Chrome יבצע את main.js כשהפרויקט ייפתח כך. יכול להיות שדפדפני אינטרנט אחרים לא יאפשרו את ההרצה של JavaScript.

– או –

בדיקה באמצעות שרת אינטרנט מקומי

אם Python מותקנת, מריצים את python3 -m http.server מהמסוף בתיקיית הבסיס pay-web-101.

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

לאחר מכן, נכנסים לאתר בכתובת http://localhost:8000.

מה עושים עכשיו

מקורות מידע נוספים