# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.paywall.one/masterpass-entegrasyonu/1.-websdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.