> For the complete documentation index, see [llms.txt](https://docs.zotlo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zotlo.com/integrating-zotlo/web-sdk/sdk-overview.md).

# SDK Overview

A lightweight JavaScript SDK that allows you to embed secure payment and card-update experiences directly into your website, without handling sensitive financial data on your servers.

The Web SDK powers two core components:

* **Checkout Form SDK** → Embedded payment form for subscription & one-time purchases
* **Card Update SDK** → Allows existing subscribers to update their saved credit cards

Both components are fully PCI-compliant, mobile-responsive, and work seamlessly with Zotlo’s billing engine.

## **What You Can Do With It**

The SDK enables you to:

### **Embed a checkout form**

* Accept subscription and one-time payments
* Use plan-level pricing, trials, country-based currency
* Receive webhook notifications for all transactions
* Customize the form’s design using the `style` config

### **Update saved cards**

* Let subscribers replace their payment card securely
* Trigger 3D Secure flows when needed
* Continue the subscription lifecycle without interruption

### **Track steps of the process**

Through SDK event hooks:

* `onLoad`
* `onSubmit`
* `onSuccess`
* `onFail`
* `onInvalidForm`

## **Where to Find Your Keys**

To initialize any checkout or card-update flow, you need:

#### **🔑 Web SDK Key**

A short-lived, auto-generated token used to start the SDK flow.

You can both live and sandbox keys in:\
**Zotlo Dashboard → Developer Tools → Checkout SDK**

## **How the Web SDK Works**

1. Your backend generates a **Checkout Token** using API Keys
2. You pass this token to the SDK in your web application
3. The SDK renders a PCI-compliant payment form
4. User completes the payment → SDK triggers callbacks
5. Zotlo sends **webhook events** to your server (optional but recommended)

## **Browser Support**

* All modern browsers supported
* Fully responsive mobile & tablet layouts
* Works in single-page apps and server-rendered sites

## **Security & Compliance**

* SDK handles all card data — your servers never touch it
* Fully PCI-DSS compliant
* Secure 3D Secure (3DS) flows handled automatically
* Sensitive fields are encrypted in-browser using Zotlo’s secure payment layer

## **When to Use Web SDK**

Use the SDK if you want:

* Embedded checkout on your own site
* Zero PCI burden
* Fully controlled UI/UX
* Dynamic user-targeted checkout flows
* Card update flows without exposing card info
* Conversion-optimized payment experience

If you prefer redirect flows instead of embedded forms, consider **Hosted Checkout** instead.

## **Related Documentation**

* [**About Embedded Checkout**](/features/checkout/embedded-checkout.md)
* [**Checkout Form SDK**](/integrating-zotlo/web-sdk/checkout-sdk.md)
* [**Card Update SDK**](/integrating-zotlo/web-sdk/card-update-sdk.md)


---

# 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://docs.zotlo.com/integrating-zotlo/web-sdk/sdk-overview.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.