@billmyagent/payments-vue

Vue 3 composable and component for the x402 payment protocol.

A thin wrapper around @billmyagent/payments-core that lets Vue apps call x402-gated URLs and automatically pay the HTTP 402 challenge when one is returned (the core client signs an EIP-3009 transferWithAuthorization and the facilitator settles it on-chain):

• <PaymentButton> — drop-in button that calls a URL and pays the 402, with built-in loading and error states
• usePayment() — composable for calling an x402-gated URL imperatively and tracking the request lifecycle

Install

npm install @billmyagent/payments-vue @billmyagent/payments-core

Peer dependency: Vue >=3.0.0.

Quick start

Build a PaymentClient with a signer. In a browser, pass a viem wallet client backed by the user's wallet; on a server/agent, build one from a private key with createSigner (never ship a real key to a browser).

Drop-in button

<script setup lang="ts">
import { PaymentButton, PaymentClient, createSigner } from '@billmyagent/payments-vue';

const signer = await createSigner('base', import.meta.env.VITE_PRIVATE_KEY);
const client = new PaymentClient({ signer });
</script>

<template>
  <PaymentButton
    :client="client"
    url="https://api.example.com/premium-article"
    label="Read article"
    :onSuccess="(data) => console.log('unlocked:', data)"
    :onError="(err) => console.error(err)"
  />
</template>

Imperative composable

<script setup lang="ts">
import { usePayment } from '@billmyagent/payments-vue';

const { pay, data, loading, error, paid } = usePayment(client);
</script>

<template>
  <button :disabled="loading" @click="pay('https://api.example.com/premium')">
    {{ loading ? 'Loading…' : 'Load premium' }}
  </button>
  <p v-if="error">Error: {{ error.message }}</p>
  <p v-else-if="data">Loaded{{ paid ? ' (paid)' : '' }}: {{ data }}</p>
</template>

API

<PaymentButton> props

| prop | type | required | notes | |---|---|---|---| | client | PaymentClient | yes | instance created with a signer | | url | string | yes | the x402-gated URL to call (and pay, if challenged) | | requestConfig | AxiosRequestConfig | no | method, headers, body, params | | label | string | no | button label; defaults to "Pay" | | onSuccess | (data: unknown) => void | no | | | onError | (error: Error) => void | no | |

usePayment(client)

Returns { data, loading, error, paid, pay, reset } as refs/functions:

• pay(url, config?) — call an x402-gated URL; if it responds 402 and the client has a signer, the payment is made and the request retried. Resolves with the body.
• paid — true when the most recent call required and completed a payment.
• reset() — clear data, error, and paid.

For merchant account operations and the payment REST API, use the PaymentClient methods directly — see @billmyagent/payments-core.

Supported networks

EVM only, exact scheme: Base, Ethereum, Polygon.

Development

# from sdk/vue/
npm install
npm test
npm run build

License

Apache 2.0 — see LICENSE.