> 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/payment-orchestration-integration-document/masterpass-integration/1.-websdk.md).

# 1. WebSDK

**Paywall provides a Web SDK specifically developed to enable its clients to use Masterpass services in web environments.**

With this SDK, the Masterpass integration is implemented in a **Client (merchant application) – Masterpass Server** architecture, in full compliance with Masterpass standards. Paywall supports this process by ensuring proper guidance and infrastructure compatibility, allowing clients to use Masterpass services in a secure and efficient manner.

The Masterpass Web SDK is designed to facilitate the seamless integration of Masterpass functionalities—such as card storage, payment initiation, and user flow management—into web applications.

All up-to-date information regarding the installation, configuration, and technical details of the SDK can be found in the GitHub repository below:

👉 **GitHub – Web SDK Documentation**\
<https://github.com/paywallone/PaywallJsSdk.Public>

{% tabs %}
{% tab title="SDK Kullanım Akışı" %}

```mermaid
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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://developer.paywall.one/payment-orchestration-integration-document/masterpass-integration/1.-websdk.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.