كيفية إضافة أزرار دفع شريطية بسيطة إلى جداول الأسعار الخاصة بك في Divi

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

في هذا البرنامج التعليمي ، سأوضح لك كيفية إضافة أزرار دفع Stripe إلى موقع Divi الخاص بك باستخدام Stripe Payments for WordPress Plugin. سأريك حتى كيفية تصميم الأزرار لتتناسب مع تخطيط Divi الخاص بك.

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة خاطفة على أزرار الدفع Stripe التي سننشئها في هذا البرنامج التعليمي.

ابدء

في هذا البرنامج التعليمي لحالة الاستخدام ، ستحتاج إلى ما يلي:

• موضوع Divi (مثبت ونشط)
• حساب Stripe
• المدفوعات الشريطية لبرنامج WordPress الإضافي بواسطة WP Simply Pay (مثبت ونشط)
• سنستخدم أيضًا تخطيط صفحة أسعار المنتجات الرقمية المتاح مجانًا داخل Divi Builder

حول البرنامج المساعد

يعد Stripe Payments for WordPress by WP Simply Pay مكونًا إضافيًا يتيح لك البدء في تحصيل مدفوعات بطاقة الائتمان باستخدام Stripe باستخدام رمز قصير مدمج بسيط. يمكنك بالفعل إنشاء نماذج الدفع وأزرار الدفع يدويًا دون استخدام المكون الإضافي ، ولكن نظرًا لأن هذا المكون الإضافي يجعل الأمور سهلة ويقدم بعض الميزات المريحة (مثل تأكيد الدفع وصفحات فشل الدفع) ، فقد اعتقدت أنه كان مفيدًا على المدى الطويل . سأستخدم الإصدار المجاني المجاني من البرنامج المساعد لهذا البرنامج التعليمي. ستمنحك النسخة الاحترافية من المكون الإضافي مزيدًا من التحكم في نمط النماذج الخاصة بك إلى جانب دعم أشياء مثل الحقول المخصصة والمبالغ المخصصة وميزات الاشتراك.

إعداد نماذج الشريط مع البرنامج المساعد

بمجرد تثبيت البرنامج المساعد وتنشيطه ، انتقل إلى Simple Pay Lite > الإعدادات . ثم ضمن علامة التبويب Stripe Keys ، ستحتاج إلى إدخال مفاتيح API الخاصة بحساب Stripe. من أجل هذا البرنامج التعليمي ، سأستخدم مفاتيح الاختبار فقط ، لكنك ستحتاج إلى التأكد من حساب Stripe وتنشيطه وإنشاء بعض مفاتيح API الحية إذا كنت تريد البدء في جمع أموال حقيقية.

يمكنك العثور على مفاتيح API الخاصة بك عن طريق تسجيل الدخول إلى حساب Stripe الخاص بك والنقر فوق Developers > API keys .

ستحتاج إلى نسخ كل من المفتاح القابل للنشر والمفتاح السري إلى إعدادات البرنامج المساعد.

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

اضبط نمط زر الدفع على "لا شيء (ترث من الموضوع)". كل هذا يفعله هو إخراج css المستخدم لتصميم زر الشريط الأزرق الافتراضي. سيؤدي ذلك إلى جعل الأمور أكثر نظافة قليلاً عندما نضيف CSS المخصص الخاص بنا لتصميم الزر في Divi.

ثم احفظ التغييرات.

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

إنشاء نماذج الدفع الشريطية

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

لإنشاء نموذج دفع جديد ، انتقل إلى لوحة تحكم WordPress وانتقل إلى Simple Pay Lite> Add New.

امنح نموذج الدفع عنوانًا (لن يظهر هذا العنوان في الواجهة الأمامية).

ثم ضمن علامة التبويب خيارات الدفع ، أدخل مبلغًا لمرة واحدة.

بعد ذلك ، انقر فوق علامة التبويب عرض النموذج في الصفحة وقم بتغيير نص زر الدفع الافتراضي إلى "اشتر الآن" (أو ما تريد). يمكنك أيضًا اختيار معالجة النص على زر الدفع أيضًا.

ضمن علامة التبويب Checkout Overlay Display ، قم بتحديث ما يلي:

اسم الشركة
وصف السلعة
عنوان URL للشعار / الصورة
تمكين تذكرني: نعم

تحدد هذه الخيارات ما يظهر في نموذج الخروج المنبثق لهذا المنتج المعين.

بمجرد الانتهاء ، تأكد من ونشر / تحديث نموذج الدفع.

ستحتاج في النهاية إلى نسخ الرمز المختصر لنموذج الدفع الموجود في أعلى يمين صفحة تحرير نموذج الدفع من أجل لصقه في تخطيط صفحة Divi الخاصة بك.

ولكن في الوقت الحالي ، يمكنك متابعة نفس العملية لإنشاء نموذجي دفع إضافيين لكل منهما وصف العنصر والشعار / الصورة والمبلغ.

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

إضافة أزرار دفع شريطية إلى تخطيط صفحة Divi الخاص بك

مع وجود الرموز المختصرة لنموذج الدفع الشريطي جاهزة للعمل ، نحتاج الآن إلى إعداد تخطيط صفحة Divi وتشغيله. للقيام بذلك ، قم بإنشاء صفحة جديدة ، وقم بإعطاء صفحتك عنوانًا ، وانقر لاستخدام Divi Builder.

ثم حدد الخيار "Choose a Premade Layout".

افتح حزمة Digital Product Layout وانقر لاستخدام صفحة تسعير المنتج الرقمي.

بمجرد تحميل التخطيط على الصفحة ، انشر الصفحة ثم انقر فوقها للبناء على الواجهة الأمامية.

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

ثم ارجع إلى تخطيط صفحة الأسعار وافتح إعدادات جدول الأسعار لأحد جداول التسعير في التخطيط.

أخرج نص الزر (لست بحاجة إليه لأن الرمز المختصر سيكون بمثابة الزر) ثم الصق الرمز القصير أسفل المحتوى في مربع المحتوى.

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

بعد ذلك ، استمر في نفس العملية لنسخ ولصق الرمزين المختارين الآخرين لنموذج الدفع في جدولي التسعير المتبقيين.

اختبر أحد الأزرار للتأكد من أن تراكب نموذج الدفع يعمل بشكل صحيح. يجب أن تبدو هذه…

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

تصميم أزرار الدفع الشريطية لتتناسب مع التخطيط

لتصميم أزرار الدفع Stripe ، سنضيف بعض CSS المخصص إلى إعدادات صفحتنا. أولاً ، نحتاج إلى معرفة المحدد الذي سنستخدمه لتصميم الزر. يمكنك العثور على هذا باستخدام أدوات مطور المستعرض الخاص بك. انقر بزر الماوس الأيمن على زر Stripe وحدد "فحص". في كود html ، يمكنك أن ترى أن الزر يحتوي على فئة css "simpay-payment-btn".

هذا هو المحدد الذي نحتاجه لاستهداف نمط الزر.

إذا أردنا مطابقة نمط أزرار دفع Stripe مع الأزرار المستخدمة في تخطيطنا المُعد مسبقًا ، فيمكننا فحص أحد أزرار Divi المصممة بالفعل على الصفحة للحصول على كود CSS الذي نحتاجه.

افتح الآن إعدادات الصفحة وأضف CSS المخصص التالي ضمن علامة التبويب خيارات متقدمة:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

هذا كل شيء! دعنا نتحقق من النتيجة النهائية.

تخصيص تأكيد الدفع الخاص بك وصفحات الدفع الفاشلة

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

هذا مفيد لمطابقة أنماط هذه الصفحات مع موقع الويب الخاص بك دون الحاجة إلى اللجوء إلى CSS المخصص.

افكار اخيرة

يمكن أن يكون Stripe حلاً مناسبًا للغاية لتحصيل المدفوعات عبر الإنترنت. ومع البرنامج الإضافي Simple Payments for WordPress ، يمكنك الحصول على وظيفة Stripe Checkout الأساسية وتشغيلها على موقع Divi الخاص بك في دقائق. أيضًا ، إذا استفدت من تخطيطات Divi مسبقة الصنع ، فيمكنك إضافة وتصميم أزرار الدفع Stripe الخاصة بك لتتناسب مع التخطيط الخاص بك ببساطة عن طريق نسخ ولصق كود CSS الذي تم إنشاؤه بالفعل من أجلك. والنتيجة هي أداة معالجة مدفوعات تعمل بكامل طاقتها وآمنة يمكنها تحصيل المدفوعات من الزوار دون الحاجة إلى مغادرة الصفحة.

لا تتردد في استكشاف المزيد من الطرق لقبول مدفوعات Stripe على موقع WordPress الخاص بك.

آمل أن تجد هذا البرنامج التعليمي مفيدًا وأتطلع إلى الاستماع منك في التعليقات.

هتافات!