CrypaxDocs

@crypax/vue

Crypax 결제 연동을 위한 Vue 컴포저블 및 컴포넌트.

설치

$ npm install @crypax/vue

설정

app.use(CrypaxPlugin, { publishableKey })로 플러그인을 등록하세요. 모든 컴포저블은 플러그인이 등록된 컴포넌트 트리 안에서 사용해야 합니다.

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');
프롭타입설명
publishableKeystring공개 키 (pk_live_). 필수.
options?CrypaxOptions선택적 설정: apiUrl 등.

컴포저블 & 컴포넌트

useCrypax()

CrypaxPlugin이 등록한 Crypax 클라이언트 인스턴스를 반환합니다.

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

const crypax = useCrypax();

useConfirmPayment()

결제 확인을 위한 컴포저블. 반응형 상태와 트리거 함수를 반환합니다.

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>
반환값타입설명
confirmPayment(clientSecret: string) => Promise<PaymentResult>주어진 client secret으로 결제 플로우를 트리거합니다.
status"idle" | "processing" | "confirmed" | "failed"반응형 상태: 'idle' | 'processing' | 'confirmed' | 'failed'
resultRef<PaymentResult | null>반응형 PaymentResult ref (완료 전까지 null).
errorRef<Error | null>결제 실패 시 반응형 에러 ref, 아니면 null.
reset() => voidstatus와 error를 idle로 초기화합니다.

useWallet()

사용자 지갑을 감지하고 상호작용하기 위한 컴포저블.

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>
반환값타입설명
walletRef<{ address: string; chainId: number } | null>반응형 지갑 객체 (address, chainId, provider).
loadingRef<boolean>감지 중일 때 반응형 true.
detect() => void지갑 감지를 수동으로 재실행합니다.

usePaymentStatus(clientSecret)

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()

지원 체인 목록을 가져옵니다.

<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

사전 제작 버튼 컴포넌트. 'success', 'cancel', 'error' 이벤트를 emit합니다.

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>

전체 예제

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 레퍼런스 →
Vue SDK | Crypax