إنشاء تجربة دفع سريعة على الويب باستخدام Google Pay

تتيح Google Pay API للمستخدمين فرصة الدفع في كل مكان باستخدام معلومات الدفع المحفوظة في حساباتهم على Google. ستتمكّن في هذا الدرس التطبيقي من الاستفادة من مكتبة عملاء Google Pay على الويب لتحسين تجربة الدفع لعينة مبسّطة على الإنترنت، وذلك من خلال توفير تجربة أسرع وأكثر ملاءمة وأمانًا، ما يؤدي بدوره إلى جذب المزيد من الإحالات الناجحة وتحسين رضا العملاء.

متجر القمصان التلقائية هو متجر مبتكر يستفيد من أحدث التطورات في مجال الذكاء الاصطناعي ويستخدم معلومات، مثل الإعدادات المفضّلة للنمط والطقس والوقت من العام ومؤشرات الأزياء لاقتراح أكثر سلعة مناسبة لك لشرائها.

يمكنك الاطّلاع على مقاييس التفاعل مع هذا المتجر. للأسف، تعكس المقاييس أيضًا عددًا كبيرًا من عمليات المغادرة أثناء عملية الدفع. وبعد أن قرّر أحد مالكي المشروع أن يتذكّر أنّ أحد المستخدمين رأى فيديو يعرض النتائج الواعدة التي حققها تطبيق Google Pay على مواقع مشابهة، لذا قرّر تنفيذ هذا الإجراء والوثوق بك في هذا الدمج.

البنية التي ستنشئها

يرشدك هذا الدرس التطبيقي إلى خطوات دمج Google Pay في موقع إلكتروني حالي، بما في ذلك تحديد ما إذا كان بإمكان المستخدم الدفع باستخدام طريقة دفع متوافقة مع Google Pay ووضع زر التصميم وتصميمه وتنفيذ المعاملة.

ما ستتعرَّف عليه

  • كيفية دمج Google Pay في صفحة دفع حالية
  • كيفية الاختيار من بين طرق الدفع المفضّلة لديك
  • كيفية تحديد ما إذا كان المستخدم جاهزًا للدفع باستخدام Google Pay

المتطلبات

  • جهاز كمبيوتر متصل بالإنترنت
  • معرفة أساسية بلغة JavaScript

تشغيل نموذج الموقع الإلكتروني glitch.com

تم إعداد هذا الدرس التطبيقي على glitch.com ليكون موقعًا إلكترونيًا سريعًا للعمل. إنّ Glitch هو بيئة مجانية تستند إلى الويب وتقدّم محرِّر الرموز وميزات الاستضافة والنشر التي يمكنك استخدامها لإنشاء تطبيقات الويب وعرضها.

للبدء، استخدِم الزر أدناه لتوفير بيئة تطوير جديدة على Glitch تم إعدادها من قبل مع نسخة من هذا الدرس التطبيقي حول الترميز.

بدء بيئة التطوير على Glitch.com

ومن الآن فصاعدًا، يمكنك استخدام محرِّر الرموز على Glitch لتعديل ملفاتك. ابدأ عرض تطبيقك باستخدام القائمة Show في أعلى الصفحة، واختَر In نافذة جديدة.

تصفّح نماذج الموقع الإلكتروني

كما ترى، يعرض المستودع بنية ملفات غير معقدة. ويتمثل الهدف الأساسي من هذا الدرس التطبيقي في منحك إمكانية تكييف هذا الدمج مع تطبيقاتك الحالية والمستقبلية، وذلك بشكل مستقل عن إطار العمل أو المكتبات أو الأدوات التي تختار استخدامها معها.

استكشاف الموقع الإلكتروني

تم تصميم هذا السوق التجريبي بطريقة تشبه إلى حدٍ كبير الشكل الذي قد يظهر به تطبيقك الحالي أو المحتمل اليوم، قبل أن تضيف وسيلة شراء. في الواقع، علمًا أنّنا ننصحك بالعمل على هذا التطبيق التجريبي، يمكنك استخدام هذا الدرس التطبيقي البرمجي لدمج Google Pay في تطبيقاتك الحالية.

الآن، افتح موقع الويب التجريبي إذا لم تفعل ذلك من قبل. ولإجراء ذلك، انقر على الزر Show (إظهار) إذا كنت تستخدم Glitch أو افتح عنوان URL الذي يتم تشغيل خادم الويب المحلي عليه.

موقع الويب التجريبي ليس مفاجئًا، أليس كذلك؟ صفحة تفاصيل المنتج، مع صورة والسعر ووصف وبعض أدوات الاختيار وزر للانتقال إلى نموذج دفع وهمي وعادي.

والهدف من هذا الدرس التطبيقي هو استبدال هذه العملية بتجربة مستندة إلى نقرتين باستخدام Google Pay.

لنخطّط لهذه الخطة.

لفهم هذا الدمج بشكل أفضل، يتم تقسيم العملية إلى الخطوات الأساسية التالية:

  1. تحميل المكتبة
  2. تحديد إمكانية الدفع باستخدام Google Pay
  3. عرض الزر للدفع باستخدام Google Pay
  4. إنشاء طلب الدفع وإرساله
  5. جمع النتائج

إضافة العلامة script

عليك أولاً تحميل مكتبة JavaScript لبدء استخدام Google Pay API. لإجراء ذلك، عليك تضمين علامة script في ملف HTML في المكان الذي تنوي استدعاء واجهة برمجة التطبيقات فيه، بما في ذلك السمة src التي تشير إلى مكتبة JavaScript الخارجية.

في هذا الدرس التطبيقي حول الترميز، افتح الملف index.html. يجب أن تلاحظ أن علامة النص البرمجي قد تم تضمينها بالفعل:

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

إلى جانب src، لقد أضفت سمتَين أخريَين.

  • يسمح async بتحميل النص البرمجي وتنفيذه بشكل غير متزامن إلى جانب باقي الصفحة، حتى لا يتأثر وقت التحميل الأول للمستند.
  • يمكنك استخدام onload في تأجيل تنفيذ الرمز الذي يعتمد على هذه المكتبة إلى أن يتم تحميل النص البرمجي. وبعد الانتهاء، يتم تنفيذ الوظيفة التي تحدّدها في هذه السمة. في هذه الحالة، تكون الدالة onGooglePayLoaded.

إنشاء حساب عميل واجهة برمجة التطبيقات

بعد تحميل النص البرمجي، يتم إعداد كل شيء لك لبدء استخدام هذه المكتبة. ابدأ بتحديد كائن العميل الذي ستستخدمه لإجراء مكالمات إلى 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. والآن، لنبدأ في ضبط الإعدادات لإجراء طلبات البيانات من واجهة برمجة التطبيقات.

سيتم إجراء جميع التغييرات على الرموز التالية لبقية الدرس التطبيقي حول الترميز على ملف index.js.

هيكل عظمي

في كلّ مرة تتواصل فيها مع Google Pay 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 من واجهة برمجة التطبيقات. يجب أن يبدو التنسيق الناتج كما يلي:

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 فقط، ولكن أيضًا في الحالات التي يتعذّر فيها استخدام Google Pay. يتيح لك طلب isReadyToPay تحديد استعدادك للدفع باستخدام Google Pay ومنحك فرصة لتعديل التجربة في موقعك الإلكتروني وفقًا لذلك.

هل يمكن للمستخدم الدفع باستخدام Google Pay؟

عليك أولاً التحقّق ممّا إذا كان بإمكان مستخدم معيّن على وشك الدفع على موقعك الإلكتروني استخدام Google Pay لإجراء ذلك. ويتطلب منك هذا الطلب تحديد إصدار Google Pay API وطرق الدفع المسموح بها لموقعك الإلكتروني. هذا هو بالضبط ما يحتوي عليه كائن الإعداد الأساسي المحدَّد في الخطوة السابقة.

في 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. وبهذه الطريقة، لا تضمن ضمان استخدام دقيق لإرشادات العلامة التجارية فحسب، بل تستفيد أيضًا من التحسينات الأخرى المضمّنة في الزر مباشرةً، مثل الترجمة.

لإنشاء زر، استخدِم الإجراء 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 تخصيص شكل الزر. يمكنك تعديلها وفقًا لمتطلبات التطبيق وواجهة المستخدم.

وبعد إنشاء الزر، كل ما عليك فعله هو إضافته إلى عقدة مناسبة ضمن نموذج العناصر في المستند. في هذا المثال، يتم استخدام عقدة div التي تم تحديدها باستخدام buy-now لهذا الغرض.

وتجدر الإشارة إلى أنك حددت وظيفة أيضًا للتعامل مع أحداث النقر على الزر. في القسم التالي، يمكنك استخدام هذه الوظيفة لطلب طريقة دفع.

إعداد طلب الدفع

في هذه المرحلة، تكون قد حمّلت Google Pay API وتوصلت إلى أنّ مستخدم موقعك الإلكتروني يمكنه استخدام 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، بالإضافة إلى الضبط الإضافي الذي تطلبه كل بوابة. لأغراض هذا الدرس التطبيقي، يكفي استخدام بوابة 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. في هذا الدرس التطبيقي حول الترميز، سنركّز على أمرَين:

  • يتوقع merchantId أن يكون المعرّف المرتبط بحسابك بمجرد الموافقة على تشغيل موقعك في الإنتاج من قِبل Google. يُرجى العِلم بأنّه لم يتم تقييم ذلك أثناء استخدام البيئة 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 بنجاح في نموذج الموقع الإلكتروني في هذا الدرس التطبيقي أو في تطبيقك الخاص.

الآن، لنشر هذا التطبيق في مرحلة الإنتاج، لا تنسَ إلقاء نظرة على قائمة التحقّق المتعلقة بالدمج. وبعد اكتمال العملية ومراجعتها، ستتلقى معرّف التاجر لإضافته إلى تهيئة العميل. وبالمثل، إذا كنت تنوي استخدام معالج أو بوابة دفع تابعة لجهة خارجية (أو تستخدم حاليًاها)، يمكنك الاطّلاع على قائمة مقدّمي الخدمة المعتمَدين في Google Pay وضبط مقدّم الخدمة. في حال الدمج مع Google Pay مباشرةً، يمكنك الاطّلاع على قسم الوثائق حول هذا الموضوع.

المواضيع التي تناولناها

  • يمكنك استيراد واجهة برمجة تطبيقات Google وإعدادها في موقعك.
  • تحديد الدعم لواجهة برمجة التطبيقات والتفاعل وفقًا لذلك.
  • يمكنك إضافة زر للسماح للمستخدمين بالدفع باستخدام Google Pay.
  • تحميل معلومات دفع المستخدم المخزنة مسبقًا ومعالجتها.
  • يمكنك تحسين وقت التحميل من خلال جلب معلومات الدفع مسبقًا.

الخطوات اللاحقة

  • مزيد من المعلومات حول Google Pay
  • يُرجى مراجعة قائمة التحقّق عند الدمج والحصول على معرّف التاجر.
  • يمكنك الاطّلاع على نوعَين مختلفَين من عمليات الدمج وتحديد الخيار الأنسب لك: الدمج مباشرةً أو استخدام بوابة الدفع أو المعالج.
  • يمكنك إعداد تفويض الدفعات لبدء عملية الدفع والموافقة على حالة تفويض الدفع. (المصادقة أو الرفض)

مزيد من المعلومات

هل وجدت هذه المعلومات مفيدة؟

مفيدة جدًا كفاية لتلبية التوقعات. إجابتك غير صحيحة.

هل تريد الاطّلاع على دروس تطبيقية أخرى لمساعدتك في أنواع الدمج الأخرى (Android والدمج المباشر وواجهات برمجة تطبيقات الولاء)؟

نعم، ذلك من فضلك. أشعر بالرضا عن ما حصلت عليه.