# 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**](https://docs.zotlo.com/features/checkout/embedded-checkout)
* [**Checkout Form SDK**](https://docs.zotlo.com/integrating-zotlo/web-sdk/checkout-sdk)
* [**Card Update SDK**](https://docs.zotlo.com/integrating-zotlo/web-sdk/card-update-sdk)