WLCM — zamonaviy savdo ilovalari uchun quvonchli va shaxsiy o'lchamdagi to'lov platformasi.
Web SDK
React, Angular, Vue va boshqa barcha frontend framevorklar uchun tayyorlangan xavfsiz to'lov komponenti.
Iframe Vault
PCI-DSS talablariga mos, merchantdan izolyatsiya qilingan xavfsiz muhit.
Dinamik Dizayn
CSS o'zgaruvchilari yordamida brendingizga to'liq moslashuvchi interfeys.
O'rnatish
Scriptni head qismiga qo'shing. Bu WLCM runtime-ni
yuklaydi va wlcm-payment-element tegini ro'yxatdan
o'tkazadi.
Hamma narsa brauzerning o'zida native ishlaydi, hech qanday qo'shimcha kutubxona shart emas.
// 1. SDK-ni sahifaga ulash
<script type="module" src="https://sdk.wlcm.uz/v1/wlcm-payment-element.js"></script>
// 2. Komponentni ishlatish
<wlcm-payment-element
order-id="5085"
></wlcm-payment-element>Atributlar (Konfiguratsiya)
Komponentning ishlashini va tashqi ko'rinishini quyidagi atributlar orqali boshqaring:
| Atribut | Vazifasi | Standart |
|---|---|---|
| order-id | Tranzaksiyani bog'lash uchun backend-da yaratilgan unikal ID. | - |
| color-primary | Focus, border va asosiy elementlar uchun brend rangi. | #30313d |
| color-background | Inputlar va ichki muhitning orqa fon rangi. | #ffffff |
| border-radius | Elementlarning burchak aylanaligi (masalan: 12px, 20px). | 20px |
| font-family |
Shrift turi: sans-serif,
monospace va h.k.
|
sans-serif |
| font-size | Matnning umumiy o'lchami. | 14px |
| font-weight | Matn qalinligi (masalan: 400, 500, 600). | 400 |
const el = document.querySelector('wlcm-payment-element');
// To'lov muvaffaqiyatini tinglash
el.addEventListener('payment-success', (e) => {
const { token } = e.detail;
console.log("Muvaffaqiyatli:", token);
});
// To'lovni boshlash
el.submitPayment();JavaScript Boshqaruvi
SDK standart DOM event'lardan foydalanadi.
payment-success orqali tranzaksiya yakunlangani haqida
xabar olasiz.
Bu xabar ichidagi tokenni o'z backend-ingizga yuborib, to'lov holatini tekshiring.