# Vault-Then-Pay

{% hint style="info" %}
**Choose this path when** you want to use the SDK exclusively for vaulting/storing card details. The actual payment is then executed via S2S API calls from your backend using the resulting `payment_method_id` token.

If you want payment and vaulting to happen together in a single SDK flow, see [Pay-Then-Vault](/integration-guide/payment-suite/payments.md).
{% endhint %}

### The Two-Step Pattern

1. **Vault** — Capture card details using the [Vault SDK](https://github.com/juspay/hyperswitch-docs/blob/main/workflows/vault/sdk-integration.md) or the [Server-to-Server API](https://github.com/juspay/hyperswitch-docs/blob/main/workflows/vault/server-to-server-vault-tokenization.md). This generates a `payment_method_id`.
2. **Pay** — Pass the `payment_method_id` into the `/payments` API (or the Proxy endpoint) from your backend to execute the transaction.

### Payment Method Lifecycle

The `payment_method_id` is a unique, reusable token that maps a `customer_id` to a specific payment instrument (card, wallet, bank account). The same instrument from the same customer always resolves to the same ID.

| Customer ID | Payment Instrument        | Payment Method ID |
| ----------- | ------------------------- | ----------------- |
| 123         | Visa ending in 4242       | `PM1`             |
| 123         | Mastercard ending in 1111 | `PM2`             |
| 456         | Visa ending in 4242       | `PM3`             |
| 123         | PayPal (`user@email.com`) | `PM4`             |

### Integration Options in This Section

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Token Led Payment</strong></td><td>Execute a payment using a <code>payment_method_id</code> via S2S API</td><td><a href="/pages/ecneth5mwKKB9scVONye">/pages/ecneth5mwKKB9scVONye</a></td></tr><tr><td><strong>Proxy Payment</strong></td><td>Send PSP payment requests through the Vault Proxy — raw card data never leaves the Vault</td><td><a href="/pages/TMSjT7A6dQjxfw2VxDJI">/pages/TMSjT7A6dQjxfw2VxDJI</a></td></tr><tr><td><strong>Payment Methods Management</strong></td><td>Embed the Vault SDK widget to let customers view, add and delete saved cards</td><td><a href="/pages/yyUy7tIb5oaFrDk2XycP">/pages/yyUy7tIb5oaFrDk2XycP</a></td></tr></tbody></table>

### Vault Integration Reference

For the full SDK and API setup guides used in this flow, see:

* [Vault SDK Integration](https://github.com/juspay/hyperswitch-docs/blob/main/workflows/vault/sdk-integration.md) — React and Vanilla JS step-by-step
* [Server-to-Server Vault Tokenization](https://github.com/juspay/hyperswitch-docs/blob/main/workflows/vault/server-to-server-vault-tokenization.md) — direct API tokenization for PCI-certified backends
* [Vault Configuration](https://github.com/juspay/hyperswitch-docs/blob/main/workflows/vault/configuration.md) — API key generation and dashboard setup


---

# Agent Instructions: 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:

```
GET https://docs.hyperswitch.io/integration-guide/payment-suite/payment-method-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.