@crypax/vue

Vue composables and components for integrating Crypax payments.

Installation

$ npm install @crypax/vue

Setup

Register the plugin with app.use(CrypaxPlugin, { publishableKey }). All composables must be used inside a component tree where the plugin is registered.

main.ts

import { createApp } from 'vue';
import { CrypaxPlugin } from '@crypax/vue';
import App from './App.vue';

createApp(App)
  .use(CrypaxPlugin, { publishableKey: 'pk_live_...' })
  .mount('#app');

Prop	Type	Description
`publishableKey`	string	Your publishable key (pk_live_). Required.
`options?`	CrypaxOptions	Optional config: apiUrl, etc.

Composables & Components

`useCrypax()`

Returns the Crypax client instance registered by CrypaxPlugin.

import { useCrypax } from '@crypax/vue';

const crypax = useCrypax();

`useConfirmPayment()`

Composable for confirming a payment. Returns reactive state and a trigger function.

Checkout.vue

<script setup>
import { useConfirmPayment } from '@crypax/vue';

const props = defineProps(['clientSecret']);
const { confirmPayment, status, result, error, reset } = useConfirmPayment();

async function handlePay() {
  const res = await confirmPayment(props.clientSecret);
  if (res.status === 'confirmed') {
    console.log('txHash:', res.txHash);
  }
}
</script>

<template>
  <div>
    <button @click="handlePay" :disabled="status !== 4">
      {{ status === 'idle' ? 'Pay Now' : status }}
    </button>
    <p v-if="error" class="error">{{ error.message }}</p>
    <button v-if="status !== 7" @click="reset">Reset</button>
  </div>
</template>

Return	Type	Description
`confirmPayment`	(clientSecret: string) => Promise<PaymentResult>	Trigger the payment modal for the given client secret.
`status`	"idle" \| "processing" \| "confirmed" \| "failed"	Reactive status: 'idle' \| 'processing' \| 'confirmed' \| 'failed'
`result`	Ref<PaymentResult \| null>	Reactive PaymentResult ref (null until resolved).
`error`	Ref<Error \| null>	Reactive error ref if the payment failed, otherwise null.
`reset`	() => void	Reset status and error back to idle.

`useWallet()`

Composable for detecting and interacting with the user's wallet.

WalletInfo.vue

<script setup>
import { useWallet } from '@crypax/vue';

const { wallet, loading, detect } = useWallet();
</script>

<template>
  <div v-if="loading">Detecting wallet...</div>
  <div v-else-if="wallet">
    <p>Address: {{ wallet.address }}</p>
    <p>Chain ID: {{ wallet.chainId }}</p>
  </div>
  <button v-else @click="detect">Detect Wallet</button>
</template>

Return	Type	Description
`wallet`	Ref<{ address: string; chainId: number } \| null>	Reactive wallet object (address, chainId, provider).
`loading`	Ref<boolean>	Reactive boolean, true while detecting.
`detect`	() => void	Re-run wallet detection manually.

`usePaymentStatus(clientSecret)`

Polls and returns the current status of a payment by client secret.

<script setup>
import { usePaymentStatus } from '@crypax/vue';

const props = defineProps(['clientSecret']);
const { status, payment, loading, error } = usePaymentStatus(props.clientSecret);
</script>

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">Error: {{ error.message }}</p>
  <p v-else>Status: {{ status }}</p>
</template>

`useChains()`

Fetches the list of supported chains.

<script setup>
import { useChains } from '@crypax/vue';

const { chains, loading, error } = useChains();
</script>

<template>
  <ul v-if="!loading">
    <li v-for="chain in chains" :key="chain.chainId">
      {{ chain.name }} ({{ chain.chainId }})
    </li>
  </ul>
</template>

`CheckoutButton`

Pre-built button component. Emits 'success', 'cancel', and 'error' events.

Checkout.vue

<script setup>
import { CheckoutButton } from '@crypax/vue';

function onSuccess(result) {
  console.log('Paid!', result.txHash);
}
function onCancel() {
  console.log('User cancelled');
}
</script>

<template>
  <CheckoutButton
    client-secret="cs_live_..."
    @success="onSuccess"
    @cancel="onCancel"
    @error="console.error"
  >
    Pay Now
  </CheckoutButton>
</template>

Full Example

main.ts

import { createApp } from 'vue';
import { CrypaxPlugin } from '@crypax/vue';
import App from './App.vue';

createApp(App)
  .use(CrypaxPlugin, { publishableKey: 'pk_live_...' })
  .mount('#app');

PaymentPage.vue

<script setup>
import { CheckoutButton } from '@crypax/vue';

// clientSecret comes from your server
const props = defineProps(['clientSecret']);

function handleSuccess(result) {
  alert('Payment confirmed! tx: ' + result.txHash);
}
</script>

<template>
  <CheckoutButton
    :client-secret="props.clientSecret"
    @success="handleSuccess"
    @cancel="() => console.log(4)"
    @error="(err) => console.error(err)"
  >
    Pay Now
  </CheckoutButton>
</template>

React SDK →Node.js SDK →API Reference →