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

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

Auto T-Shirt Shop هو متجر مبتكر يستفيد من أحدث التطورات في مجال الذكاء الاصطناعي ويستخدم معلومات مثل تفضيلات الأسلوب والطقس ووقت السنة وأحدث صيحات الموضة لاقتراح المنتج الأنسب لك للشراء.

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

ما ستنشئه

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

أهداف الدورة التعليمية

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

المتطلبات

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

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

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

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

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

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

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

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

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

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

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

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

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

لنخطّط لذلك.

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

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

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

أول إجراء عليك تنفيذه لبدء استخدام Google Pay API هو تحميل مكتبة JavaScript. لإجراء ذلك، أدرِج علامة 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.

نظرة عامة

لقد حمّلنا الآن مكتبة برامج Google Pay API Javascript Client Library. لنضبطه الآن لإجراء طلبات البيانات من واجهة برمجة التطبيقات نيابةً عنّا.

سيتم إجراء جميع تغييرات الرموز التالية لبقية الدرس العملي على ملف 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 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 لهذا الغرض.

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

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

في هذه المرحلة، تكون قد حمّلت 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 القيمة true بنجاح:

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

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

لقد تمكّنت من دمج Google Pay API بنجاح في الموقع الإلكتروني النموذجي في هذا الدرس التطبيقي حول الترميز أو في تطبيقك.

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

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

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

الخطوات التالية

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

هل كان هذا المحتوى مفيدًا؟

مفيدة جدًا! مستوى مقبول لتلبية التوقعات ليس بالضرورة.

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

نعم، سيكون ذلك رائعًا. أنا سعيد بما حصلت عليه.