---
updatedAt: 2026-04-02T13:21:39.000Z
agentTools:
  projectIndex: https://docs.payabl.com/llms.txt
---

# Quick Start

General Implementation Workflow and Web SDK Demo

# Getting Started

Our Web SDK is a JavaScript library that enables you to integrate secure payment processing into your web page or application. It provides a seamless way to handle the entire payment process, including 3-D Secure Authentication, within a single call.

<Image alt="Web SDK - General Implementation Flow" align="center" src="https://files.readme.io/9786a294d40f478fb3186c00dae182934f76a4bf0606bac17dc701eaac6c1910-image.png">
  Web SDK - General Implementation Flow
</Image>

Before executing a payment using the Web SDK, you must initiate a session with Web SDK. Refer to the below [Preliminary Steps](https://docs.payabl.com/docs/get-session-id#preliminary-steps---get-session-id) for general description, and to section [Create Session](https://docs.payabl.com/docs/get-session-id) for detailed, step-by-step guide on calculating the signature and sending the initialization request.

## 1. Preliminary Steps: Getting Session ID

For a detailed, step-by-step guide, please refer to the Web SDK [Create Session](https://docs.payabl.com/docs/get-session-id).

1. **Calculate the Signature and Request a Session ID**: Use the Signature Calculation mechanism to generate a signature (SHA-1 hex value of the string) for your request. Refer to the [Signature Calculation](https://docs.payabl.com/docs/get-session-id#signature) for instructions on obtaining the SHA-1 signature.
2. **Send Initialization Request**: With the obtained signature, make a server-to-server POST request to the following endpoints:

* Sandbox: `https://sandbox.payabl.com/pay/payment/get_payment_widget_session`
* Production: `https://pay4.payabl.com/pay/payment/get_payment_widget_session`

## 2. Main Steps: Integrating with the Web SDK

For a detailed, step-by-step guide, please refer to the [Integration Steps](https://docs.payabl.com/docs/integration-steps).

1. **Use the Session ID**: Extract the `session_id `from the response to the `get_payment_widget_session` request
2. **Initialize** `Payabl.` **Object**: Pass the `session_id` into the `initialize` method of the JavaScript `Payabl.` object
3. **Integrate the Widget**: Follow the remaining steps to complete the Web SDK widget integration