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

컴포저블 & 컴포넌트

useConfirmPayment()

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

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>
반환값타입설명
confirmPayment(clientSecret: string) => Promise<PaymentResult>주어진 client secret으로 결제 모달을 트리거합니다.
status"idle" | "processing" | "confirmed" | "failed"결제 확인 플로우의 반응형 상태.
errorRef<Error | null>결제 실패 시 반응형 에러 ref, 아니면 null.

useWallet()

사용자 지갑을 감지하고 연결하기 위한 컴포저블.

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

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

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>

전체 예제

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