SETUP GUIDE

CoinVoyage for Vue

Add PayKit and SwapKit to Vue 3 and Nuxt apps with ready-made components.

Requirements

Your app needs Vue 3.3 or later; Nuxt is supported. A CoinVoyage public API key connects the widgets to your account. You do not need React or a wallet library.

Get your CoinVoyage API key

Follow the API key setup guide to create your public API key.

PayKit supports crypto and eligible card payments. SwapKit is for token swaps.

Install the package

Add the Vue components to your app. The package includes the wallet connections, so no other setup is needed.

Terminal

npm install @coin-voyage/vue@^0.1.1

Add a pay button

Place CoinVoyagePay where customers should pay. Replace the API key and recipient address.

Checkout.vue

<script setup lang="ts">
import { CoinVoyagePay } from "@coin-voyage/vue"

function onComplete(event: unknown) {
  console.log("Payment completed", event)
}
</script>

<template>
  <CoinVoyagePay
    api-key="YOUR_PUBLIC_API_KEY"
    button-text="Pay now"
    :deposit="{ toChain: 1, toAmount: 0.01, toAddress: 'YOUR_RECIPIENT_ADDRESS' }"
    @complete="onComplete"
  />
</template>

This is a deposit. It does not automatically verify a product purchase. Changing a prop restarts the widget, so keep props stable while a payment is open.

Have your own server? Start selling products now

Your server can create a new purchase order (called a SALE order in the API) for each checkout using your production API key and API secret. Validate the product, price, and recipient on your server, then return the order ID to your app and pass it to the pay button:

Copy and paste

<CoinVoyagePay api-key="YOUR_PUBLIC_API_KEY" button-text="Pay now" :order-id="orderId" />

Create a new order for every purchase; do not reuse a single order for multiple buyers. Keep the API secret on your server and verify payment completion there before fulfillment.

Add a swap widget

Optional. CoinVoyageSwap comes with the same package.

SwapWidget.vue

<script setup lang="ts">
import { CoinVoyageSwap } from "@coin-voyage/vue"
</script>

<template>
  <CoinVoyageSwap api-key="YOUR_PUBLIC_API_KEY" mode="dark" />
</template>

Match your site’s appearance

Choose a color mode and set Accent, Accent hover, Button color, Background, Surface, Text color and Radius through the appearance prop. Leave it out to keep the defaults.

Copy and paste

<CoinVoyagePay
  api-key="YOUR_PUBLIC_API_KEY"
  order-id="YOUR_EXISTING_ORDER_ID"
  mode="dark"
  :appearance="{ accent: '#d6296f', accentHover: '#b8225f', accentText: '#ffffff', radius: '16px' }"
/>

For advanced styling, pass the SDK theme object as custom-theme on the pay button or theme on the swap widget. See the PayKit and SwapKit styling references. Custom colors apply in both light and dark modes, so choose matching background and text colors.

Using Nuxt, Svelte, Angular or plain JavaScript?

The components work in Nuxt without a ClientOnly wrapper: they load in the browser after the page mounts.

For other frameworks, install @coin-voyage/embed and mount the same widgets into any element. Use version 0.1.6 or later for payment options. Import it in the browser only.

Copy and paste

const { mount } = await import("@coin-voyage/embed")
const dispose = mount(document.querySelector("#pay"), {
  widget: "pay",
  apiKey: "YOUR_PUBLIC_API_KEY",
  orderId: "YOUR_EXISTING_ORDER_ID",
  paymentMethod: "CARD",
  cardPayments: true,
  closeOnSuccess: true,
  resetOnSuccess: false,
  options: { language: "de-DE", hideTooltips: true },
  debugMode: false,
})

The method selects the first screen when the customer opens checkout. Add defaultOpen: true to open it automatically. Cards must be enabled and eligible; otherwise PayKit shows payment method selection. An explicit cardPayments value overrides options.experimentalFeatures.cardPayments.

Test your setup

Open the page and test the wallets your customers use, including mobile. If you use WalletConnect, pass its project ID as wallet-connect-project-id and add your site's origin to the project.

Before going live

Completion events in the browser are display notifications, not proof of payment. Verify payments on your server before fulfilling an order, and keep your API secret there.

Payment options

These options require @coin-voyage/vue 0.1.1 or later, with @coin-voyage/embed 0.1.6 or later.

Open checkout on Pay with card

Set payment-method="CARD" on the pay button. Other methods are WALLET and DEPOSIT_ADDRESS. Omit the property to keep the normal starting screen.

Copy and paste

<CoinVoyagePay
  api-key="YOUR_PUBLIC_API_KEY"
  :order-id="orderId"
  payment-method="CARD"
  :card-payments="true"
  :close-on-success="true"
  :reset-on-success="false"
/>

Card payments must be enabled and available for your account and order. If unavailable, PayKit shows payment method selection. Choosing a method selects the first screen when the modal opens. To open the modal automatically, also set :default-open="true".

close-on-success closes the modal after payment; reset-on-success clears the widget's payment state. Use boolean bindings, as above, or omit these props to keep SDK defaults. A new purchase still needs a fresh server-created order; resetting a widget does not create one.

Configure PayKit options and debug mode

Pass options and debug-mode to CoinVoyagePay. Keep the options object stable while a payment is open; changing props restarts the widget.

Copy and paste

<script setup lang="ts">
import { CoinVoyagePay, type PayKitOptions } from "@coin-voyage/vue"

const options: PayKitOptions = { language: "de-DE", hideTooltips: true, overlayBlur: 4 }
</script>

<template>
  <CoinVoyagePay
    api-key="YOUR_PUBLIC_API_KEY"
    order-id="YOUR_EXISTING_ORDER_ID"
    :options="options"
    :debug-mode="false"
  />
</template>

Option	Value
`language`	A supported locale, such as en-US, de-DE or fr-FR.
`hideTooltips, hideQuestionMarkCTA, hideRecentBadge`	true or false to hide each UI element.
`walletConnectCTA`	"link", "modal" or "both".
`disclaimer`	Plain text, or null to clear it. HTML is displayed as text.
`overlayBlur`	A finite number of zero or greater.
`optimisticConfirmation`	true or false. Browser completion still requires server verification.
`bufferPolyfill`	true or false. Leave unset unless you need to control the Buffer polyfill.
`experimentalFeatures.cardPayments`	true or false. An explicit card-payments setting takes precedence.

Omit options to keep SDK defaults. Unknown fields and invalid values are rejected. hideNoWalletCTA is accepted by PayKit but currently has no visible effect. An explicit card-payments prop takes precedence over experimentalFeatures.cardPayments.