> For the complete documentation index, see [llms.txt](https://developer.paywall.one/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.paywall.one/masterpass-entegrasyonu/1.-websdk.md).

# 1. WebSDK

Paywall, müşterilerinin **Masterpass servislerini web ortamında kullanabilmesi** için özel olarak geliştirilmiş bir **WebSDK** sunar.

Bu SDK ile birlikte Masterpass entegrasyonu, **Client (müşteri uygulaması) – Masterpass Server** mimarisinde, Masterpass standartlarına uygun şekilde gerçekleştirilir. Paywall, entegrasyon sürecinde gerekli yönlendirmeleri ve altyapı uyumluluğunu sağlayarak müşterilerin Masterpass servislerini güvenli ve hızlı bir şekilde kullanmasını mümkün kılar.

Masterpass Web SDK; kart saklama, ödeme başlatma ve kullanıcı sürecinin yönetilebildiği Masterpass fonksiyonlarının web uygulamalarına kolayca entegre edilmesini amaçlar.

SDK’nın kurulumu, konfigürasyonu ve teknik detaylarına ilişkin tüm güncel bilgiler aşağıdaki GitHub reposunda yer almaktadır:

👉 **GitHub –  WebSDK Dokümantasyonu**\
<https://github.com/paywallone/PaywallJsSdk.Public>

{% tabs %}
{% tab title="SDK Kullanım Akışı" %}
{% @mermaid/diagram content="graph TB
Start(\[Start]) --> Docs\["🔗 DETAYLI DÖKÜMANTASYON<br/>👉 Buraya Tıklayın 👈"]
Docs --> Backend\["Merchant Backend<br/>Session + Token oluştur"]
Backend --> BackendNote\["Backend session bilgilerini<br/>token içine ekler"]
BackendNote --> InitPaywallSdk\[1. PaywallJsSdk.InitPaywallSdk<br/>SDK + Session hazırlama]

```
  click Docs "https://developer.paywall.one/client-side-servisler/2.-yetkilendirme-sdk" "SDK Yetkilendirme Dokümantasyonu" _blank
  InitPaywallSdk --> SdkParams["Params:<br/>- environment: 'test'/'prod'<br/>- token: Backend'den token<br/>- includeMasterpassSession: true"]
  SdkParams --> SdkNote["SDK otomatik parse eder:<br/>- SessionId<br/>- MasterpassToken<br/>- UserId<br/>- UserPhone<br/>(Otomatik SDK'da!)"]
  SdkNote --> InitCheck{Success?}
  
  InitCheck -->|Yes| ProviderInit[2. PaywallJsSdk.providers<br/>.masterpass.init<br/>Provider hazırlama]
  InitCheck -->|No| Error1[Init Failed]
  
  ProviderInit --> ProviderCheck{Success?}
  ProviderCheck -->|Yes| SessionData["✅ Session Bilgileri Hazır:<br/>Tüm bilgiler SDK'da<br/>Manuel set GEREKMEZ!"]
  ProviderCheck -->|No| Error2[Provider Init Failed]
  
  SessionData --> Operations[3. İşlemler]
  
  Operations --> AccountAccess["accountAccess<br/>Masterpass hesap kontrolü"]
  Operations --> MerchantLink["merchantLink<br/>Kart bağlama"]
  Operations --> AddCard["addCard<br/>Yeni kart ekleme"]
  Operations --> DeleteCard["deleteCard<br/>Kart silme"]
  
  AccountAccess --> Payment[4. Ödeme İşlemleri]
  MerchantLink --> Payment
  AddCard --> Payment
  DeleteCard --> Payment
  
  Payment --> PayRegistered["payment.init<br/>Kayıtlı kart ile ödeme<br/>(sessionId otomatik kullanılır)"]
  Payment --> PayManual["payment.init<br/>Manuel kart ile ödeme<br/>(sessionId otomatik kullanılır)"]
  Payment --> RegisterPurchase["registerAndPurchase<br/>Kart kaydet ve öde<br/>(sessionId otomatik kullanılır)"]
  
  PayRegistered --> ResponseCheck{Response<br/>Code?}
  PayManual --> ResponseCheck
  RegisterPurchase --> ResponseCheck
  
  ResponseCheck -->|5001| VerifyOtp["verifyOtp<br/>OTP doğrulama"]
  ResponseCheck -->|5010| ThreeDRedirect["3D Secure<br/>Redirect to URL"]
  ResponseCheck -->|SUCCESS| Success[✅ Ödeme Başarılı]
  
  VerifyOtp --> FinalCheck{Success?}
  ThreeDRedirect --> FinalCheck
  
  FinalCheck -->|Yes| Success
  FinalCheck -->|No| Failed[❌ Ödeme Başarısız]
  
  style Docs fill:#FF6B6B,stroke:#C92A2A,stroke-width:4px,color:#fff
  style Backend fill:#FFA726,stroke:#F57C00,stroke-width:3px,color:#fff
  style BackendNote fill:#FFE082,stroke:#FFB300,stroke-width:2px,color:#333
  style InitPaywallSdk fill:#E67E22,stroke:#A04000,stroke-width:4px,color:#fff
  style SdkParams fill:#F39C12,stroke:#D68910,stroke-width:3px,color:#fff
  style SdkNote fill:#52C41A,stroke:#389E0D,stroke-width:3px,color:#fff
  style ProviderInit fill:#50C878,stroke:#2E7D4E,stroke-width:3px,color:#fff
  style Operations fill:#9B59B6,stroke:#6C3483,stroke-width:3px,color:#fff
  style Payment fill:#3498DB,stroke:#2874A6,stroke-width:3px,color:#fff
  style Success fill:#27AE60,stroke:#1E8449,stroke-width:3px,color:#fff
  style Failed fill:#E74C3C,stroke:#C0392B,stroke-width:3px,color:#fff
  style Error1 fill:#E74C3C,stroke:#C0392B,stroke-width:3px,color:#fff
  style Error2 fill:#E74C3C,stroke:#C0392B,stroke-width:3px,color:#fff
  style SessionData fill:#1ABC9C,stroke:#148F77,stroke-width:3px,color:#fff" %}
```

{% endtab %}
{% endtabs %}