جاهز Google Pay Client Module

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

رابط إلى الوحدة . رمز لديه الوثائق والتعليقات اللازمة. سأقدم بعض التفسيرات هنا.



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

يتكون العمل من مرحلتين: أولاً ، يجب أن نقرر ما إذا كنا سنعرض الزر أم لا (لا تدعم جميع المتصفحات Google Pay) ، ثم ننفذ عملية الدفع نفسها.

1. زر العرض

export function showGooglePayButton(options, callbacks) { //   const check = checkParams("showGooglePayButton", options, callbacks); if (!check) { return false; } else { options = check.options; } const paymentsClient = new google.payments.api.PaymentsClient({environment: options.environment}); //      ,   API callbacks.setPaymentClient(paymentsClient); const request = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [options.googleBaseCardPaymentMethod] }; paymentsClient.isReadyToPay(request) .then(function(response) { if (response.result) { callbacks.success(); return true; } else { console.log("    Google Pay  "); callbacks.fail(); } }) .catch(function(err) { console.log("showGooglePayButton ERROR"); callbacks.fail(); }); } 

لا شيء معقد هنا. في الخيارات ، نجتاز معلمتين - googleBaseCardPaymentMethod والبيئة.

googleBaseCardPaymentMethod هو كائن يسرد أنواع الدفع والمعلمات (مزيد من التفاصيل حول البحث المسموح به هنا ). إذا لم يتم ضبطها ، فإننا ندعو الضابط القياسي في الكود ، مع إعادة كائن نموذجي إلينا:

 const setGoogleBaseCardPaymentMethod = () => { return { type: "CARD", parameters: { allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"] } } }; 

البيئة هي بيئة أو إنتاج أو اختبار

بناءً على نداء رد الاتصال الناجح ، نرسم بالفعل (أو نعرض الزر المرسوم بالفعل). هذا هو اختيارك. فقط تذكر أن Google تتطلب مطابقة أدلةها .

2. المعالجة

لعرض زر Google Pay ، أنشأ المستعرض الخاص بك واجهة برمجة التطبيقات (API) للمتصفح كائن " المدفوعات" ، والذي يحتاج الآن إلى جانب المعلمات الأخرى إلى تمريره إلى وظيفة المعالجة. دعنا ننظر إلى المعلمات الأخرى:

googleBaseCardPaymentMethod - انظر أعلاه
googlePayPublicKey ، merc_id ، merc_name - للعمل بنجاح مع Google Pay ، يجب أن يكون لديك تاجر مسجل. معالمه نحصل على الدعم.

بالإضافة إلى ذلك ، نحن ننقل النجاح ونفشل عمليات الاسترجاع ، وكذلك البيانات لإجراء الدفع (انظر أدناه).

لذلك ، لإجراء عملية دفع ، يجب أن نأخذ كائن المدفوعات Client الذي تم إنشاؤه مسبقًا ونستدعي الأسلوب loadPaymentData مع كائن paymentDataRequest : const paymentDataRequest = getGooglePaymentDataRequest () :

 const getGooglePaymentDataRequest = () => { const cardPaymentMethod = Object.assign( {}, baseMethod, { tokenizationSpecification: token } ); const paymentDataRequest = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods : [cardPaymentMethod], /* for demo (enviroment TEST): merchantInfo : { merchantId: '12345678901234567890', merchantName: 'JOHN SMITH' }, */ /* for prod (enviroment PRODUCTION): merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, */ merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, transactionInfo : { currencyCode: options.currency, totalPriceStatus: 'FINAL', totalPrice: "" + options.sum } }; return paymentDataRequest; }; 

بالنسبة لبيئة الاختبار ، تقدم Google كائن merchantInfo الخاص بها. يجب استخدامه مع merchantId المكتوب في المثال ، merchantName غير مهم.

بالإضافة إلى ذلك ، نحتاج إلى كائن رمزي :

 const token = { /* for demo (enviroment TEST): parameters: { "protocolVersion": "ECv1", "publicKey": yourTestPublicKey } */ /* for prod (enviroment PRODUCTION): parameters: { "protocolVersion": "ECv1", "publicKey": params.googlePayPublicKey } */ type: 'DIRECT', parameters: { "protocolVersion": "ECv1", "publicKey": options.googlePayPublicKey } }; 

→ اقرأ المزيد عن المعلمات هنا

علاوة على ذلك ، عند تكوين الكائن ، باستخدام طريقة loadPaymentData ، يتم إرسال طلب إلى خادم Google ، ويتم فتح الإطار الذي يحتوي على البطاقات المحفوظة ، وبعد اكتمال العملية ، يتم إغلاق الإطار:

 paymentsClient.loadPaymentData(paymentDataRequest) .then(function(paymentData) { const googleToken = JSON.parse(paymentData.paymentMethodData.tokenizationData.token); // your own client-back ajax request here } 

بعد التنفيذ الناجح للأسلوب (أي الاتصال بالبطاقات المحفوظة وتمرير التحقق) ، يمكننا تقديم طلب AJAX للجهة الخلفية الخاصة بنا من أجل إجراء الدفع باستخدام Google Pay. في هذا الطلب ، سنحتاج إلى نقل googleToken ، الذي جاء من Google ، وكذلك المفتاح العام.

هذا كل شيء ، لقد تم الدفع عبر Google Pay بعد المعالجة على ظهره!