> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentcard.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Add the Vault to a web app

> Open the Vault's pages from your web app in a new tab, with nothing to install.

Your web app opens the Vault's links directly: the add-a-card page and the approval page open in a new tab, with nothing to install and no card data passing through your page.

## Open the Vault from your page

Create a vault session on your server, then open its `url` from a click in the page.

```bash theme={null}
curl -X POST https://api.agentcard.sh/api/v2/vault_sessions \
  -H "Authorization: Bearer $ORG_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{}'
```

```html theme={null}
<button id="add-card">Add a card</button>
<script>
  document.getElementById("add-card").addEventListener("click", async () => {
    const tab = window.open("", "_blank");   // open on the click itself, before any await
    const session = await fetch("/api/agentcard/vault-session", { method: "POST" }).then((r) => r.json());
    tab.location = session.url;
  });
</script>
```

Open the tab on the click itself. A tab opened after a network call counts as a popup, and Safari and Firefox block it. Never load the Vault in an iframe: the page refuses to render inside another page's frame, and the user sees a blank box.

Open the approval link the same way. When your agent reaches the payment form, `onApprovalUrl` fires with a link; show the user a button that opens it in a new tab, or send it to them by push notification or email if they are not looking at your page.

When the user finishes, you receive `vault.session_linked` with their `user_id`, then `vault.card_stored`. Store the `user_id`: it is what you pass as `user` on every checkout. Without webhooks, [poll the session](/vault/adding-a-card#option-b-poll-the-session) instead.

## Confirm with webhooks

The user closing the tab is a claim. Your server should act on webhooks, because the tab can close on a page you never hear from again:

* `vault.card_stored` when a card lands in the vault.
* `checkout_authorization.approved` and the other `checkout_authorization.*` events when purchases are approved or declined.

## Test it

A sandbox token creates a sandbox session. Open the link yourself, store any of [Stripe's published test cards](https://docs.stripe.com/testing), any future expiry, any CVC. Rehearse a purchase against [shop.agentcard.sh](https://shop.agentcard.sh), a demo store on Stripe test mode.

Next: [Create a cart](/vault/creating-a-cart).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.