# Agentic Payments with a Merchant User Interface

## Overview

Chat and Agent-based payments have the unique ability to offer an automated checkout experience on any e-commerce website. Traditionally, the inherent limitation with this process is that the third-party website requires the actual Card Number and CVC to be entered into the user interface. VGS allows agents to perform payments using a merchant or online marketplace's standard checkout user interface.

## Autofill with PAN & CVC via VGS Outbound Proxy

<figure><img src="/files/LE02XYqQYphpoVCqkLa1" alt=""><figcaption></figcaption></figure>

Agentic payment systems can also autofill **traditional card details** (PAN and CVC) by securely proxying browser-based form submissions through VGS.

**How it works:**

* The agent (e.g., a browser automation tool or AI checkout bot) enters **VGS aliases** (e.g., `pan_alias`, `cvc_alias`) into the merchant’s checkout fields.
* The browser is configured to route traffic through the **VGS Outbound Proxy**.
* When the form is submitted, VGS intercepts the outbound HTTPS request, recognizes the aliases, and **reveals** the original sensitive values before forwarding to the merchant's backend.

This approach allows:

* **Pre-existing merchant checkout experiences to be used**
* **PCI-compliant delegation** of sensitive data handling
* **Drop-in compatibility** with merchant forms that expect real card values

Note that this approach requires the use of **format-preserving aliases**, which match the length and format of real PANs and CVCs.

Example:

* PAN: `4242 4242 4242 4242` → `4242 4230 0004 4242`
* CVC: `123` → `789`

A sample implementation for this Option can be found in the [vgs-agent-toolkit Github repo](https://github.com/vgs-samples/vgs-agent-toolkit/tree/main?tab=readme-ov-file#examples).

#### Reference Documentation

* [VGS Browser Proxy Configuration](/vault/example-integrations/browser-proxy.md)
* [Chrome Proxy Configuration](https://developer.chrome.com/docs/extensions/reference/api/proxy)


---

# 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.verygoodsecurity.com/agentic-commerce/agentic-payments-with-a-merchant-user-interface.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.