Scriptorium · I

أضف زر شراء إلى موقع Astro الخاص بك

أنت لا تحتاج إلى حزمة تكامل أو توجيه عميل أو جزيرة. الزر هو HTML عادي يتم شحنه مع البناء الثابت الخاص بك، وهو الشيء الأكثر تشكيلاً في Astro يمكن أن تكون عليه أداة الدفع.

أضف علامة البرنامج النصي، مرة واحدة

ضع علامة البرنامج النصي في رأس التخطيط الأساسي الخاص بك، src/layouts/Layout.astro في معظم المشاريع. يمكن لكل صفحة تستخدم التخطيط عرض الأزرار من ذلك الحين فصاعداً.

---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <script src="https://sdk.coinmoebius.com/latest/sdk.global.js"
      crossorigin="anonymous"
      defer></script>
  </head>

اسم المنتج في لوحة التحكم الخاصة بك

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

ضع الزر حيث تبيع

ألصق الزر في نص أي صفحة .astro أو مكون. يمر Astro ببساطة إلى HTML المدمج دون تغيير.

<coin-moebius-buy
  project-id="proj_YOUR_ID_HERE"
  product-id="t-shirt-medium"
  label="Buy a t-shirt">
</coin-moebius-buy>

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

احرص من هذه

صفر JavaScript مضاف إلى الجزر الخاصة بك

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

MDX ومجموعات المحتوى

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

ثابت و SSR و هجين: كل شيء غرامة

الزر لا يهمه كيف تم إنتاج HTML. إذا وصلت الصفحة إلى متصفح، فإنها تبيع.

جاهز عندما تكون صفحتك

غطاء مجاني 150 معاملة في الشهر. لا بطاقة للتسجيل.

ابدأ مجاناً زر الشراء، السمة حسب السمة