MAISON CODE .
/ Payments · Checkout · Apple Pay · Conversion · Fintech

المدفوعات عبر الهاتف المحمول: هندسة الاقتصاد بنقرة واحدة

الاحتكاك يقتل التحويل. دليل فني لدمج Apple Pay وGoogle Pay وPayment Request API. الترميز و3DS2 وطرق الدفع المحلية.

AB
Alex B.
المدفوعات عبر الهاتف المحمول: هندسة الاقتصاد بنقرة واحدة

في عام 2025، لن يكون مطالبة مستخدم الهاتف المحمول بكتابة رقم بطاقة ائتمان مكون من 16 رقمًا مجرد فشل في تجربة المستخدم؛ إنه فشل اقتصادي. كل ثانية يقضيها المستخدم في التحديق في بطاقته الائتمانية في غرفة معتمة هي ثانية قد يشكك فيها في عملية الشراء. لا يزال معدل التخلي عن سلة التسوق على الهاتف المحمول يحوم حول 70٪. السبب الرئيسي هو احتكاك الإدخال.

في Maison Code Paris، نعتبر تدفق الدفع بمثابة مسار تحويل. مهمتنا هي تشحيم مسار التحويل هذا حتى يمر المستخدم عبره عن طريق الصدفة. أكثر مواد التشحيم فعالية هي المحفظة الرقمية (Apple Pay، Google Pay). هذه المقالة عبارة عن تحليل فني لكيفية تنفيذ هذه الأنظمة بشكل صحيح، مع ضمان الأمان والسرعة والتحويل.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

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

لماذا تعطي Maison Code الأولوية للمحافظ

نحن نعمل مع العلامات التجارية ذات الحجم الكبير للأزياء وأسلوب الحياة. بالنسبة لهؤلاء العملاء، يعد “الشراء الاندفاعي” محركًا رئيسيًا للإيرادات. إذا رأى المستخدم حذاءًا رياضيًا ذو إصدار محدود ويمكنه شرائه في 3 ثوانٍ باستخدام FaceID، فإن التحويل يحدث قبل بدء منطق “الذنب”. إذا اضطروا إلى البحث عن محفظتهم، ينشط المركز المنطقي في الدماغ، ويخسرون عملية البيع.

نحن نطبق المحافظ ليس لأنها “تقنية رائعة”، ولكن لأنها تغير بشكل أساسي سيكولوجية الإنفاق.

بنية الدفع عبر الهاتف المحمول

تحت الغطاء، لا يقتصر تطبيق “Apple Pay” على إرسال رقم بطاقة الائتمان فحسب. إنها رقصة تشفير معقدة تتضمن العنصر الآمن (الأجهزة) وشبكة البطاقات (Visa/Mastercard).

  1. الترميز: لا يتم تخزين رقم البطاقة الحقيقي للمستخدم (FPAN - رقم الحساب الأساسي للتمويل) على الهاتف أبدًا.
  2. إنشاء DPAN: عند إضافة البطاقة، يصدر البنك رقم الحساب الأساسي للجهاز (DPAN). يتم تخزين هذا في Secure Element (شريحة مخصصة).
  3. المعاملة: عندما يقوم المستخدم بمصادقة (FaceID)، يقوم العنصر الآمن بإنشاء رمز أمان ديناميكي (تشفير) خاص بـ تلك المعاملة.
  4. المعالجة: يتلقى التاجر DPAN + Cryptogram. يرسلونها إلى معالج الدفع (Stripe/Adyen). تقوم الشبكة بتعيين DPAN مرة أخرى إلى FPAN وتأذن بالشحن.

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

التنفيذ: واجهة برمجة تطبيقات طلب الدفع

W3C Payment Request API هو معيار المتصفح الأساسي. ومع ذلك، فإن دمجها مباشرة مع البوابة أمر مؤلم. في النظام البيئي Shopify / Headless، نعتمد على Stripe أو Adyen SDKs التي تلخص هذا التعقيد أثناء الكشف عن واجهة المستخدم الأصلية.

نمط “عنصر الدفع” الشريطي

بالنسبة لواجهة متجر هيدروجين بدون رأس، نستخدم “react-stripe-js”. الجزء الحاسم هو التعامل مع التحقق من التوفر غير المتزامن.

import { PaymentRequestButtonElement, useStripe } from '@stripe/react-stripe-js';
استيراد { useState، useEffect } من 'react'؛

تصدير const ApplePayButton = ({ cartTotal,currencyCode }) => {
  شريط ثابت = useStripe();
  const [PaymentRequest, setPaymentRequest] = useState(null);

  استخدام التأثير (() => {
    إذا (! شريط) العودة؛

    const pr = stripe.PaymentRequest({
      البلد: "الولايات المتحدة"، // البلد التجاري
      العملة:currencyCode.toLowerCase()،
      الإجمالي: {
        التسمية: "عربة كود ميزون" ،
        المبلغ: إجمالي سلة التسوق * 100، // المبلغ بأصغر وحدة (سنت)
      },
      requestPayerName: صحيح،
      البريد الإلكتروني للطلب: صحيح،
      requestPayerPhone: صحيح،
      // أمر بالغ الأهمية للشحن المحسوب
      طلب الشحن: صحيح، 
    });

    // التحقق من التوفر (هل تم إعداد Apple Pay على هذا الجهاز؟)
    pr.canMakePayment().then((النتيجة) => {
      إذا (النتيجة) {
        setPaymentRequest(pr);
      }
    });

// التعامل مع تغييرات عنوان الشحن ديناميكيًا
    pr.on('shippingaddresschange', غير متزامن (ev) => {
        const {shipAddress } = ev;
        const ShippingOptions = انتظار fetchShippingRates(shippingAddress);
        تحديث مع({
            الحالة: "النجاح"،
            خيارات الشحن,
        });
    });

  }, [شريط, عربة إجمالي]);

  إذا أرجع (!PaymentRequest) قيمة فارغة؛ // لا يتم عرض أي شيء إذا لم يكن متاحًا

  العودة (
    <div className="express-checkout-container">
        <PaymentRequestButtonElement options={{ PaymentRequest }} />
    </div>
  );
};

الرؤية الرئيسية: يجب عليك الاستماع إلى “تغيير عنوان الشحن”. تتيح خدمة Apple Pay للمستخدم اختيار عنوان الشحن داخل ورقة Apple. يجب تشغيل منطق الدفع المبسط (حساب الشحن) داخل حلقة الحدث هذه لتحديث السعر الإجمالي قبل أن يؤكده الفحص البيومتري.

3D Secure 2 (3DS2) وتحويل المسؤولية

في أوروبا، تتطلب لوائح PSD2 مصادقة قوية للعميل (SCA). عادةً ما يعني هذا “التحدي” (إعادة التوجيه إلى تطبيق البنك، رمز الرسائل القصيرة). هذا الاحتكاك يقتل التحويل.

المحافظ البيومترية تمثل ثغرة. نظرًا لأن Apple Pay تستخدم FaceID (عامل ثنائي: حيازة الهاتف + القياسات الحيوية)، فإنها تعتبر بمثابة مصادقة قوية للعميل.

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

هذا الانخفاض في عمليات رد المبالغ المدفوعة المتعلقة بالاحتيال وحده يبرر جهود التكامل.

الإستراتيجية: معضلة زر “اشتر الآن”.

أين تضع زر Apple Pay؟

  1. صفحة تفاصيل المنتج (PDP): “الخروج السريع”.
    • Pro: أعلى معدل تحويل (CVR).
    • Con: يخفض متوسط ​​قيمة الطلب (AOV). يشتري المستخدم هذا العنصر فقط، ويتخطى عمليات البيع المتبادل.
  2. عربة/عربة صغيرة:
    • Pro: يسمح بالتجميع والبيع.
    • السلبيات: نقرة واحدة إضافية.

** توصيتنا **:

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

طرق الدفع المحلية (LPMs)

“المدفوعات عبر الهاتف المحمول” لا تعني فقط Apple Pay. ويعني “طريقة الدفع التي يستخدمها الأشخاص على هواتفهم في هذا البلد المحدد.”

  • هولندا: iDEAL (حصة السوق 60%).
  • بلجيكا: بانكونتاكت.
  • الصين: Alipay / WeChat Pay.
  • البرازيل: بيكسل.
  • السويد: حفيف.

إذا قمت بإطلاق متجر في هولندا باستخدام “Visa/Mastercard/ApplePay” فقط، فسوف تخسر 50% من مبيعاتك. التكامل عبر Adyen يسمح بالعرض الديناميكي لهذه الأزرار بناءً على عنوان IP/العملة الخاصة بالمستخدم.

اشتر الآن وادفع لاحقًا (Klarna / Afterpay)

BNPL هو العملاق الآخر للتجارة عبر الهاتف المحمول. ومن الناحية الفنية، فهو يعمل مثل تدفق إعادة التوجيه. من ناحية تجربة المستخدم، فهو يقلل من “ألم السعر”. إن تقسيم 200 يورو إلى “4 دفعات بقيمة 50 يورو” يجعل عملية الشراء عبر الهاتف المحمول تبدو “أخف وزنًا”. نرى زيادة بنسبة 15-20% في إجمالي قيمة الطلب عندما يكون BNPL متاحًا على الهاتف المحمول.

الأداء: تجربة “الورقة”.

يؤدي تنفيذ المتصفح الأصلي (تنزلق “الورقة” لأعلى) إلى حظر العرض في بعض السياقات القديمة، ولكنه يعمل بشكل عام على سلسلة رسائل منفصلة عن عرض الويب. ومع ذلك، فإن البدء به يتطلب تفاعل المستخدم (انقر). لا يمكنك تشغيله برمجياً عند تحميل الصفحة. زمن الوصول: يمكن أن يستغرق فحص canMakePayment() من 200 إلى 500 مللي ثانية. إصلاح تجربة المستخدم: لا “تضغط” على الزر. قم بحجز مساحة (Skeleton Loader) أو استخدم حاوية min-height حتى لا يتغير التخطيط عندما يقرر الزر الظهور. يؤدي تغيير التخطيط (CLS) على زر “شراء” إلى حدوث نقرات خاطئة وغضب.

11. مفاتيح المرور (WebAuthn): نهاية كلمات المرور

المستخدمون يكرهون كلمات المرور. يعيدون استخدام “Password123”. مفاتيح المرور تستبدل كلمات المرور بـ FaceID باستخدام معيار WebAuthn.

  1. يقوم المستخدم بإدخال البريد الإلكتروني.
  2. “تسجيل الدخول باستخدام FaceID؟”
  3. تم. لا الرسائل القصيرة. لا نسيت تدفق كلمة المرور. يؤدي هذا إلى زيادة تحويل “إنشاء الحساب” بنسبة 40%. يدعم Shopify الآن مفاتيح المرور محليًا. نحن نمكنها لجميع البنيات مقطوعة الرأس.

12. مدفوعات رمز الاستجابة السريعة (النموذج الآسيوي)

في الصين (WeChat) والبرازيل (PIX)، لا أحد يستخدم NFC. يقومون بمسح رموز QR. نحن نبني ميزات “المسح الضوئي للدفع” لعملاء التجزئة. يعرض جهاز iPad POS رمز QR الديناميكي. يقوم العميل بإجراء المسح باستخدام الهاتف -> يتم فتح Apple Pay Sheet على هواتفهم *. تتيح آلية “الجسر” هذه طرق الدفع عبر الإنترنت في العالم المادي بدون محطات بطاقات باهظة الثمن.

13. فهم تحول المسؤولية (الحماية من رد المبالغ المدفوعة)

في معاملة بطاقة الائتمان العادية، في حالة سرقة البطاقة، يتعين عليك (التاجر) دفع مبلغ رد المبالغ المدفوعة + رسوم قدرها 15 دولارًا. في معاملة Apple Pay، يقوم البنك بالدفع. لماذا؟ لأن البنك معتمد على الأمن البيومتري. وهذا ما يسمى ** نقل المسؤولية **. بالنسبة للصناعات عالية المخاطر (الأحذية الرياضية والإلكترونيات)، فإن تمكين Apple Pay هو في الأساس “تأمين مجاني” ضد الاحتيال.

14. ترميز الاشتراك (CIT مقابل MIT)

“هل يمكنني استخدام Apple Pay للاشتراكات؟” نعم، ولكن الأمر صعب.

  1. CIT (المعاملة التي بدأها العميل): الدفعة الأولى. يستخدم المستخدم FaceID. نقوم بحفظ “Payment_method_id”.
  2. MIT (المعاملة التي بدأها التاجر): التجديد. نحن نستخدم المعرف المحفوظ. يجب عليك وضع علامة على البيانات الوصفية بشكل صحيح (الاستخدام: off_session) وإلا سيرفض البنك التجديد. نحن نتعامل مع هذا التنسيق في خدمة الدفع الصغيرة الخاصة بنا.

15. الاستنتاج

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


تدقيق الخروج الخاص بك

هل معدل التحويل على هاتفك المحمول أقل من 2%؟ لديك مشكلة الاحتكاك. قم بتوظيف مهندسينا.