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

1. מבוא

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

מה תלמדו

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

הדרישות

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

הסבר מפורט על השימוש ב-Firebase Studio

פתיחה ב-Firebase Studio

2. התאמה אישית של לחצנים

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

אפשרות

הכרחי

ערכים

onClick

חובה

שם של גורם מטפל באירועים של JavaScript

allowedPaymentMethods

אופציונלי

PaymentMethod[]

buttonColor

אופציונלי

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

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.

buttonRadius

אופציונלי

0 עד 100

buttonRootNode

אופציונלי

‫HTMLDocument או ShadowRoot

buttonSizeMode

אופציונלי

סטטי, מילוי

buttonType

אופציונלי

להזמין, לשלם, לתרום, לקנות, להירשם למינוי, פשוט, לבצע הזמנה

מחפשים את השיטה 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() library מקבלת ארגומנט הגדרה ButtonOptions שמאפשר לכם להגדיר איך אתם רוצים שהלחצן ייראה ויתנהג.

3. התקשרות חוזרת (callback) של נתוני תשלומים

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

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

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

בדפדפן האינטרנט Google Chrome, פותחים את index.html באמצעות קובץ > פתיחת קובץ... מהתפריט הראשי של 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.

לאן כדאי ללכת מכאן

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