בעזרת Google Pay, פשוט ליצור חוויית תשלום מהירה באינטרנט

ממשק Google Pay API מאפשר למשתמשים לשלם בכל מקום באמצעות פרטי התשלום ששמורים בחשבונות Google שלהם. בשיעור ה-Lab הזה תשתמשו בספריית הלקוחות של Google Pay לאינטרנט כדי לשפר את חוויית הקנייה בחנות וירטואלית לדוגמה. כך תוכלו ליצור חוויה מהירה יותר, נוחה ובטוחה יותר, שתניב יותר המרות ותשמחו יותר לקוחות.

Auto T-Shirt Store היא חנות חדשנית שמנצלת את היתרונות העדכניים ביותר של בינה מלאכותית (AI) ומשתמשת במידע כמו העדפות סגנון, מזג האוויר, השעה בשנה ומגמות אופנה כדי להציע את הפריט המתאים ביותר לרכישה.

מדדי ההתעניינות בחנות הזו מבוססים על גג הגג. לצערנו, המדדים גם משקפים נטישה גדולה במהלך תהליך התשלום בקופה. אחד הבעלים של הפרויקט נחוץ להתמודד עם הבעיה שבה הוא צפה: סרטון שמציג את התוצאות המבטיחות ש-Google Pay הניבה עבור אתרים דומים. לכן, הוא מחליט לנסות אותו ולדעת שאתם סומכים על השילוב.

מה תפתחו

בשיעור Lab הזה ננחה אתכם איך לשלב את Google Pay באתר קיים, כולל בדיקה אם המשתמש יכול לשלם באמצעי תשלום שנתמך על ידי Google Pay, המיקום והעיצוב של לחצן התשלום וביצוע העסקה.

מה תלמדו

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

מה צריך להכין

  • מחשב עם גישה לאינטרנט
  • ידע בסיסי ב-JavaScript

להפעלת האתר לדוגמה ב-glitch.com

כדי להתחיל לזרום במהירות רבה ככל האפשר, הכלי הזה הפך ל-codelab זמין ב-glitch.com. Glitch הוא סביבה מבוססת-אינטרנט ללא תשלום, שמספקת עורך קוד ותכונות אירוח ופריסה שבהן אפשר להשתמש כדי לבנות ולהציג אפליקציות אינטרנט.

כדי להתחיל, יש להשתמש בלחצן שלמטה כדי להקצות סביבת פיתוח חדשה ב-Glitch שכבר מוגדרת עם עותק של קוד Lab זה.

מתחילים סביבת פיתוח ב-Glitch.com

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

דילוג באתר לדוגמה

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

לעיון באתר

שוק ההדגמה הזה נוצר באופן שדומה ל צנוע של האפליקציה הנוכחית או הפוטנציאלית שלך, עוד לפני שהוספת אמצעי רכישה. למעשה, למרות שאנחנו ממליצים להתחיל לעבוד עם אפליקציית ההדגמה הזו, אפשר להמשיך להשתמש ב-codelab הזה כדי לשלב את Google Pay באפליקציות הקיימות שלכם.

אם האתר עוד לא פעל, יש לפתוח אותו עכשיו. כדי לעשות זאת, לוחצים על הלחצן הצגה אם משתמשים ב-Glitch או פותחים את כתובת ה-URL שבה שרת האינטרנט המקומי פועל.

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

המטרה של שיעור ה-Lab הזה היא להחליף את התהליך הזה בקליק אחד המבוסס על Google Pay.

זה הזמן לתכנן את זה!

כדי להבין טוב יותר את השילוב, התהליך מחולק לשלבים הבסיסיים הבאים:

  1. טוענים את הספרייה
  2. קביעת האפשרות לשלם באמצעות Google Pay
  3. הצגת הלחצן לתשלום באמצעות Google Pay
  4. יצירה ושליחה של בקשת תשלום
  5. איסוף התוצאות

הוספת התג script

הדבר הראשון שצריך לעשות כדי להתחיל להשתמש ב-Google Pay API הוא לטעון את ספריית ה-JavaScript. לשם כך, צריך לכלול תג script בקובץ ה-HTML שממנו מתכוונים להפעיל את ה-API, כולל מאפיין src שמפנה לספריית ה-JavaScript החיצונית.

ל-Codelab הזה, פותחים את הקובץ index.html. אתם אמורים לראות שכבר הטמעתם את תג הסקריפט:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

בנוסף ל-src, הוספת שני מאפיינים אחרים.

  • async מאפשר טעינה והפעלה של הסקריפט באופן אסינכרוני לצד שאר הדף, כך שזמן הטעינה הראשון של המסמך לא יושפע.
  • onload עוזר לך לדחות את ביצוע הקוד שתלוי בספרייה הזו עד שהסקריפט נטען. אחרי ביצוע הפעולה הזו, הפונקציה שתציינו במאפיין הזה תרוץ. במקרה כזה, הפונקציה תהיה onGooglePayLoaded.

יצירה מיידית של לקוח ה-API

אחרי שהסקריפט נטען, הכול מוכן ואפשר להתחיל להשתמש בספרייה. בשלב הראשון, יש ליצור אובייקט לקוח שישמש אותך להתקשרות ל-Google Pay API בשלב מאוחר יותר.

יש לערוך את הקובץ index.js, שהוא כבר חלק ממבנה הקובץ בפרויקט הזה. יש להחליף את הפונקציה onGooglePayLoaded בקוד הבא.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

לקוח התשלום מופעל עם אובייקט PaymentOptions. אם מגדירים את המאפיין environment כ-TEST, אפשר לנסות פרטי תשלום דמה בכל השילוב. כשתהיו מוכנים ליצור פעולות שתומכות בעסקאות אמיתיים, תוכלו לעדכן את הנכס ב-environment ל-PRODUCTION.

סקירה כללית

הוספנו טעינה של ספריית הלקוח ל-JavaScript של Google Pay API. עכשיו צריך להגדיר אותו כך שיבצע קריאות ל-API עבורנו.

כל השינויים הבאים בקוד של שאר ה-codelab יבוצעו בקובץ index.js.

שלד

בכל פעם שאתם מתקשרים עם Google Pay API, יש כמה פרמטרים של הגדרות שצריך לכלול בבקשות, כמו גרסת ה-API שאליה אתם מטרגטים. למטרת קוד הקוד הזה, האובייקט הזה מכיל גם מידע על אמצעי התשלום המקובלים בבקשה. המבנה הסופי נראה כך:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

בנכס allowedPaymentMethods יש רשימה של אמצעי תשלום. בכל אמצעי תשלום צריך לכלול את הנכסים הבאים:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

רק הנכסים type ו-parameters נדרשים כדי לקבוע אם המשתמש הרלוונטי יכול לשלם באמצעות Google Pay.

הגדרת אמצעי התשלום

בדוגמה הזו, אתם מאשרים רק הגדרה אחת שמאפשרת תשלומים בכרטיס אשראי ב-Mastercard וב-Visa, גם בטפסים אסימונים וגם במספרי חשבונות ראשיים (PAN).

כך מגדירים את התצורה ב-index.js:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

שילוב של הכול

תקציר.

הגדרת אמצעי תשלום אחד באתר שלך, וברצונך לעבוד עם גרסה 2.0 של ה-API. כך תיראה התצורה שהתקבלה:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

סיימתם ליצור את ההגדרות הבסיסיות. עכשיו הגיע הזמן ליהנות.

אחת מהמטרות העיקריות של Google Pay היא לספק למשתמשים חוויית תשלום מהירה ונוחה יותר. הקישור הזה רלוונטי לא רק למצבים שבהם אדם יכול להשתמש ב-Google Pay, אלא גם במצבים שבהם הוא לא יכול לעשות זאת. השימוש בבקשה של isReadyToPay מאפשר לך לקבוע את המוכנות לתשלום ב-Google Pay והזדמנות לשנות את החוויה באתר שלך בהתאם.

האם המשתמש יכול לשלם באמצעות Google Pay?

הדבר הראשון שצריך לעשות הוא לבדוק אם משתמש ספציפי שעומד לשלם באתר יכול להשתמש ב-Google Pay כדי לעשות זאת. בבקשה הזו עליכם לציין את גרסת ה-API של Google Pay ואמצעי התשלום המותרים באתר שלכם. זה בדיוק מה שמוגדר באובייקט ההגדרה הבסיסית בשלב הקודם.

ב-index.js בתוך הפונקציה onGooglePayLoaded(), מדביקים את הפרטים הבאים:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

אם השיחה תיכשל או תחודש עם תשובה, לא תינקט פעולה נוספת בהקשר של Google Pay. במקרה כזה, השלב הבא המתאים ביותר הוא להציג ממשק משתמש נוסף שתומך באמצעי תשלום אחרים.

מצד שני, אם התגובה מוצלחת, עכשיו אתם יכולים לאפשר למשתמשים שלכם להשתמש ב-Google Pay. כך תוכלו להמשיך ולהוסיף לחצן כדי להתחיל את תהליך התשלום בהפעלה של המשתמש (לדוגמה, לחיצה על לחצן).

הוספת לחצן לתשלום באמצעות Google Pay

אפשר להשתמש בכל לחצן שעומד בהנחיות המיתוג של Google Pay כדי להתחיל את תהליך התשלום, אבל מומלץ ליצור לחצן כזה באמצעות Google Pay API. כך אתם מבטיחים שימוש מדויק בהנחיות הקהילה, וגם מפיקים תועלת משיפורים אחרים המובנים ישירות בלחצן, כמו התאמה לשוק המקומי.

כדי ליצור לחצן, יש להשתמש בשיטה createButton באובייקט PaymentsClient, כולל buttonOptions להגדרת הלחצן.

ב-index.js בתוך הפונקציה createAndAddButton(), מדביקים את הפרטים הבאים:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

הנכס היחיד הנדרש בעת השימוש ב-createButton הוא onClick, והוא נדרש כדי לקבוע את האובייקט או הפונקציה הקריאה החוזרת בכל פעם שהמשתמשים שלך מפעילים את הלחצן. buttonColor ו-buttonType מאפשרים לך להתאים אישית את מראה הלחצן. אפשר לשנות אותם בהתאם לדרישות העיצוב והממשק של האפליקציה שלך.

לאחר יצירת הלחצן, כל שעליכם לעשות הוא להוסיף אותו לצומת מתאים בתוך ה-DOM. בדוגמה הזו, צומת div שזוהה עם buy-now משמש למטרה זו.

בודקים גם אם הגדרתם פונקציה שתטפל באירועי קליקים על לחצנים. בקטע הבא, משתמשים בפונקציה הזאת כדי לבקש אמצעי תשלום.

הכנת בקשת תשלום

בשלב הזה העליתם את ממשק ה-API של Google Pay וקבעתם שמשתמש באתר שלכם יכול להשתמש ב-Google Pay כדי לבצע תשלום. כתוצאה מכך, ממשק המשתמש של Google Pay מופיע בממשק המשתמש, ועכשיו המשתמש מוכן לבצע את העסקה. הגיע הזמן לטעון את גיליון התשלומים הסופי שמכיל את אמצעי התשלום הזמינים למשתמשים השונים שמחוברים לחשבון.

בדיוק כמו שעשית זאת קודם לכן, במהלך ההגדרה של הבקשה ל-isReadyToPay, השיחה הזו מחייבת גם את המאפיינים באובייקט התצורה הבסיסית שהוגדר קודם לכן (apiVersion, apiVersionMinor ו-allowedPaymentMethods) בנוסף לחלק חדשים. הפעם יש נכס חדש, tokenizationSpecification ו-parameters אמצעי תשלום נוספים, שרלוונטיים לבקשה הזו. בנוסף, צריך להוסיף transactionInfo ו-merchantInfo.

הכללת פרטים נוספים הנדרשים באמצעי התשלום

בשלב הראשון, יוצרים עותק של אמצעי התשלום של כרטיס הבסיס שנעשה בו שימוש בעבר. לאמצעי תשלום זה יש עכשיו נכס tokenizationSpecification כדי להגדיר את אופן הטיפול בנתונים הקשורים לאמצעי התשלום שנבחר, וגם דרישות נוספות לגבי הנתונים הנדרשים לעסקה בפועל: בדוגמה הזו, יש לציין את הכתובת המלאה לחיוב ואת מספר הטלפון.

הנכס tokenizationSpecification

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

יש שני סוגים של שיטות טיפול. אם העיבוד של עסקת התשלום מתבצע מתוך שרתי PCI DSS התואמים, יש להשתמש בסוג המפרט DIRECT. בדוגמה הזו, נעשה שימוש בשער תשלום כדי לעבד את התשלום, ולכן אתם מגדירים את סוג המפרט של PAYMENT_GATEWAY.

ב-index.js בתוך הפונקציה onGooglePaymentsButtonClicked(), מדביקים את הפרטים הבאים:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

בקטע parameters, אפשר לציין שער מרשימת הספקים שנתמכים על ידי Google Pay API, בנוסף לתצורה הנוספת הנדרשת לכל שער. לצורך שיעור ה-Lab הזה, מספיק להשתמש בשער example, שמניב תוצאות בדיקה עבור העסקאות שבוצעו.

פרמטרים נוספים

באופן דומה, עכשיו יש לכם אפשרות לספק פרטים נוספים על המידע שצריך לבקש כדי לבצע את העסקה בהצלחה. בדוגמה הזו צריך להוסיף את הנכסים billingAddressRequired ו-billingAddressParameters כדי לציין שהעסקה הזו מחייבת את כתובת החיוב של המשתמש בפורמט המלא, כולל מספר טלפון.

ב-index.js בתוך הפונקציה onGooglePaymentsButtonClicked(), מדביקים את הפרטים הבאים:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

הוספת מידע על העסקה

הנכס transactionInfo מכיל אובייקט עם פרטים פיננסיים לגבי העסקה, כלומר המחיר וקוד המטבע (פורמט אלפא של ISO 4217) יחד עם סטטוס המחיר, שיכול להיות סופי או משוער בהתאם לאופי העסקה (לדוגמה, המחיר עשוי להשתנות בהתאם לכתובת המשלוח שצוינה).

ב-index.js בתוך הפונקציה onGooglePaymentsButtonClicked(), מדביקים את הפרטים הבאים:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

הוספת מידע על המוכר

בבקשת התשלום נלקחים פרטים על המוכר שביצע את הבקשה בנכס merchantInfo. בשיעור Lab זה, תתמקדו בשני מהם:

  • merchantId מצפה למזהה המשויך לחשבון שלך לאחר שהאתר שלך יאושר להפעלה בייצור. חשוב לזכור שהפעולה הזו לא מתבצעת תוך שימוש בסביבה של TEST.
  • merchantName הוא שם גלוי למשתמש של האתר או הארגון שלך. אפשר להציג את המידע הזה בגיליון התשלומים של Google Pay, כדי לספק למשתמשים מידע נוסף על מי שביקש לבצע את הפעולה.

ב-index.js בתוך הפונקציה onGooglePaymentsButtonClicked(), מדביקים את הפרטים הבאים:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

מבקשים פרטי תשלום ומעבדים את התוצאה

עכשיו צריך למזג את התצורה הקיימת לאובייקט paymentDataRequest הסופי.

ב-index.js בתוך הפונקציה onGooglePaymentsButtonClicked(), מדביקים את הפרטים הבאים:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

בשלב זה יש לכם את כל מה שצריך כדי לבקש אמצעי תשלום תקין ב-Google Pay API. כדי לעשות זאת, צריך להשתמש בשיטה loadPaymentData באובייקטPaymentsClient ולהעביר את התצורה שהגדרת כרגע.

ב-index.js בתוך הפונקציה onGooglePaymentsButtonClicked(), מדביקים את הפרטים הבאים:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

קריאה לשיטה loadPaymentData מפעילה את הצגת גיליון התשלומים של Google Pay. אם אין שגיאות בהגדרה, תהיה לך אפשרות לראות רשימה של אמצעי תשלום חוקיים המשויכים לחשבון שכרגע מחובר.

לאחר הבחירה, הגיליון ייסגר וה-Promise ימולא באמצעות אובייקט PaymentData כולל מידע רלוונטי על אמצעי התשלום שנבחר:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

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

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

עד עכשיו, בדקנו עסקאות עם סכומי תשלום קבועים. אבל נניח שאתם רוצים לעדכן את המחיר על סמך הבחירה בנכסים מסוימים של העסקה (לדוגמה, פרטי המשלוח). כדי לעשות זאת אפשר להגדיר את הפרמטר paymentDataCallback כשיוצרים את הלקוח. קריאה חוזרת זו מאפשרת לכם לטפל בשינויים בעסקה ולהחיל שינויים בהתאם. ניתן להאזין לשינויים בכתובת המשלוח, באפשרות המשלוח ובאמצעי התשלום שנבחר. בדוגמה הזו, אתם מקישים על שינויים באפשרות המשלוח שנבחרה. תחילה, מגדירים את המשתנים שמכילים את כל פרטי המשלוח, ומשנים את paymentDataRequest כך שיכלול אותם:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

בשלב הבא, משנים את יצירת ה-googlePayClient כדי לכלול paymentDataCallback, שנקרא בכל פעם ששינוי הכלול בcallbackIntents מבצע את פעולת התשלום. הקריאה החוזרת הזו כוללת אובייקט עם המאפיינים שהשתנו. אפשר להשתמש בשינויים הבאים כדי ליצור עסקת תשלום מעודכנת:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

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

עכשיו, אחרי שבדקתם שהשילוב פועל כראוי, תוכלו להמשיך עוד צעד אחד ולאחזר מראש את הגדרת התשלום מיד לאחר שקובעים שניתן להשתמש ב-Google Pay. מצב זה מתרחש לפני שהמשתמש מפעיל (באמצעות) את לחצן התשלום של Google Pay.

אם אתם מאחזרים מראש את נתוני התשלום, לפני שהמשתמש מחליט לשלם, המידע הנחוץ לגיליון כדי לטעון כבר יהיה זמין, וכך יפחיתו משמעותית את זמן הטעינה ולכן ישפרו את החוויה הכוללת.

שיטה זו צפויה לקבל קלט זהה לזה של loadPaymentData. כלומר, אפשר להשתמש באותו אובייקט paymentDataRequest שהוגדר קודם. לאחר מכן, כל שעליך לעשות הוא לכלול קריאה לשיטת אחזור הנתונים מראש, לאחר שהחלטת שהמשתמש יכול להשתמש ב-Google Pay לאחר שהחזרה של isReadyToPay בוצעה בהצלחה:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

כך גם מפחיתים את זמן הטעינה על ידי שליפה מראש של נתוני התשלום לפני שהמשתמש לוחץ על הלחצן. מהירות התגובה המשופרת של האתר אמורה לשפר את שיעור ההמרות שלך.

שילבת בהצלחה את Google Pay API באתר לדוגמה שב-Codelab הזה או באפליקציה שלך.

עכשיו, כדי לעשות זאת במצב ייצור, אל תשכחו לעיין ברשימת המשימות לשילוב. אחרי שתסיימו לבדוק את הבקשה, תקבלו מזהה מוכר שתוכלו להוסיף להגדרות של הלקוח. באופן דומה, אם יש לך כוונה להשתמש במעבד תשלומים או בשער של צד שלישי (או שכבר השתמשת בהם), כדאי לעיין ברשימת הספקים הנתמכים ב-Google Pay ולהגדיר את אמצעי התשלום שלך. אם אתם מבצעים שילוב באופן ישיר עם Google Pay, תוכלו לעיין בקטע התיעוד בנושא זה.

מה כללנו?

  • ייבוא והגדרה של Google API באתר.
  • עליכם לקבל תמיכה ל-API ולהגיב בהתאם.
  • יש להוסיף לחצן כדי לאפשר למשתמשים לשלם באמצעות Google Pay.
  • טעינה ועיבוד של פרטי תשלום של משתמשים שנשמרו בעבר.
  • ביצוע אופטימיזציה של זמן הטעינה על ידי אחזור מראש של פרטי התשלום.

השלבים הבאים

  • למידע נוסף על Google Pay.
  • לעיין ברשימת המשימות לשילוב ולקבל מזהה מוכר.
  • יש לבחון את שני סוגי השילוב השונים ולהחליט מה מתאים לכם יותר: שילוב ישיר או שימוש בשער תשלום או במעבד מידע.
  • מגדירים אישור תשלומים כדי להתחיל את תהליך התשלום ומאשרים את סטטוס ההרשאה של התשלום. (אימות או דחייה)

למידע נוסף

האם המידע הועיל לך?

מועילות מאוד! מספיק כדי לעמוד בציפיות. באמת לא.

האם ברצונך לראות מעבדות קוד אחרות שיעזרו לך עם סוגי אינטגרציה אחרים (Android, שילוב ישיר, ממשקי API של מועדון לקוחות)?

כן, זה יהיה נהדר! שמח/ה במה שקיבלתי.