> For the complete documentation index, see [llms.txt](https://gotsol.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gotsol.gitbook.io/docs/widgets/bagspay.md).

# BagsPay

<figure><img src="https://1423349738-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe2mXQd1JIUOOQ9nl9PcL%2Fuploads%2FLYiX6fIRfmmZPJKejkw1%2F3216.png?alt=media&#x26;token=632a6bf5-e6a5-4d8a-a828-2ca1f0ad1402" alt="BagsPay embeddable checkout widget logo" width="563"><figcaption></figcaption></figure>

## Live Demo

{% embed url="<https://bagspay-widget-demo.vercel.app/>" %}

> **Note**: For the hackathon demo, mock APIs are used. Replace with real Bags API endpoints when deploying to production.

***

## Overview

BagsPay is an embeddable, non-custodial checkout widget powered by the **Bags API** that enables merchants to accept payments using **any Bags memecoin**. It is built as a standalone demo for the Bags Hackathon and is designed to integrate cleanly into existing commerce platforms (e.g., GotSOL) without exposing private codebases.

### What's Included in This Demo

* Embeddable checkout widget (payments-only scope).
* Live demo site deployed via Vercel.
* Quote routing via Bags API (live or mocked depending on environment).
* Receipt / success state with transaction metadata.
* Designed to integrate cleanly into GotSOL Paylinks and merchant sites.

### What this is

* **Checkout Widget**: drop-in UI for merchant sites/apps.
* **Demo Site**: judge-friendly interactive demo showcasing the widget flow.
* **Non-custodial**: users remain in control of funds (no custody).

### Why it matters

Most merchants don't want to rebuild their stack to accept new assets. A widget is the fastest path to adoption:\
• Merchants embed the widget.\
• Customers pay with any Bags memecoin.\
• Routing/quotes are handled via Bags API.\
• Receipts are transparent and verifiable.

***

## Hackathon Focus

For the Bags Hackathon, BagsPay is intentionally scoped to:

* Payments-only (no inventory or bookkeeping logic inside the widget).
* Fully non-custodial.
* Powered by the Bags API.
* Designed as a reusable primitive that GotSOL and other apps can embed.

{% hint style="info" %}
Inventory, bookkeeping, and merchant dashboards remain owned by GotSOL and react to payment events emitted by the widget.
{% endhint %}

### How it works (high level)

1. Merchant configures the widget (merchant wallet or `.sol`, amount, currency)
2. Customer selects a token and receives a quote (via Bags API)
3. Customer confirms → payment executes → receipt is shown (tx signature + details)

### Features (MVP)

* Merchant config panel (amount, merchant, currency, theme)
* Checkout link generation + QR code
* Widget UI states: idle → quote → confirm → processing → success/error
* Receipt page with transaction signature and details
* SNS `.sol` resolution (mock or real, depending on environment)
* Live Bags API integration for swap quoting
* Execution mocked for demo safety

### Project Structure

```
bagspay/
├─ apps/
│  └─ demo/              # Hackathon demo site for judges
├─ packages/
│  └─ widget/            # Embeddable checkout widget
├─ lib/
│  ├─ bagsApi.ts         # Bags API client
│  ├─ sns.ts             # .sol domain resolution
│  └─ types.ts           # Shared type definitions
```

***

## Bags API Integration

The widget uses the Bags API for:

* Fetching available Bags tokens.
* Getting token prices.
* Creating payment requests.
* Verifying transactions.

```
<script src="https://widget.bagspay.com/embed.js"></script>
<script>
  BagsPay.init({
    merchant: 'your-merchant.sol',
    amount: 100,
    currency: 'USDC',
    theme: 'light'
  });
</script>
```

***

## Demo Flow

1. Visit <https://bagspay-widget-demo.vercel.app/>
2. Click "Launch Demo" to see the interactive demo.
3. Configure merchant settings (amount, merchant address, currency).
4. Generate checkout link and QR code.
5. Test the full payment flow with mock tokens.
6. View receipt page with transaction details.

## Security

* **Non-Custodial**: Private keys never leave the user's wallet.
* **Direct Transactions**: Payments go directly from user to merchant.
* **Transaction Verification**: All payments are verified via Bags API.
* **HTTPS Only**: Widget should only be served over HTTPS in production.

***