@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_your_key',
    options: { apiUrl: 'https:0
  })
  .mount('#app');

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

Composables & Components

`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, error } = useConfirmPayment();

async function handlePay() {
  const result = await confirmPayment(props.clientSecret);
  if (result.status === 'confirmed') {
    console.log('txHash:', result.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>
  </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 of the payment confirmation flow.
`error`	Ref<Error \| null>	Reactive error ref if the payment failed, otherwise null.

`useWallet()`

Composable for detecting and connecting to the user's wallet.

WalletInfo.vue

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

const { address, chainId, isConnected, connect, disconnect } = useWallet();
</script>

<template>
  <div v-if="isConnected">
    <p>Address: {{ address }}</p>
    <p>Chain ID: {{ chainId }}</p>
    <button @click="disconnect">Disconnect</button>
  </div>
  <button v-else @click="connect">Connect Wallet</button>
</template>

`CheckoutButton`

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

Checkout.vue

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

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

<template>
  <CheckoutButton
    client-secret="cs_live_..."
    @success="onSuccess"
    @error="console.error"
  >
    Pay 1 PLM
  </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_your_key' })
  .mount('#app');

PaymentPage.vue

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

const props = defineProps(['clientSecret']);
const { address, isConnected, connect } = useWallet();
const { confirmPayment, status, error } = useConfirmPayment();

async function handlePay() {
  const result = await confirmPayment(props.clientSecret);
  if (result.status === 'confirmed') {
    alert('Payment confirmed! tx: ' + result.txHash);
  }
}
</script>

<template>
  <div>
    <button v-if="!isConnected" @click="connect">Connect Wallet</button>
    <template v-else>
      <p>Paying from: {{ address }}</p>
      <button @click="handlePay" :disabled="status !== 4">
        {{ status === 'idle' ? 'Pay Now' : status }}
      </button>
      <p v-if="error" style="color: red">{{ error.message }}</p>
    </template>
  </div>
</template>

React SDK →Node.js SDK →API Reference →