@apiosk/checkout-vue

@apiosk/checkout-vue

Vue 3 wrapper for the Apiosk four-layer checkout button.

Like the React wrapper, this package stays thin and delegates the runtime UI to @apiosk/checkout-web.

Install

After publish:

npm install @apiosk/checkout-vue @apiosk/checkout-web @apiosk/checkout-core

Before publish:

npm install ./subs/checkout-vue ./subs/checkout-web ./subs/checkout-core

Component usage

<script setup>
import { ApioskCheckoutButton } from "@apiosk/checkout-vue";

const checkoutConfig = {
  merchantName: "Northstar Marketplace",
  productName: "Automation bundle",
  amountLabel: "24.95 EUR",
  orderReference: "ord_2048",
  subtitle: "One trigger for humans, agents, and programmable rails.",
  rails: [
    {
      id: "credits",
      status: "live",
      launchUrl: "https://gateway.apiosk.com/geocode/forward",
    },
    {
      id: "x402",
      status: "live",
      launchUrl: "https://gateway.apiosk.com/geocode/forward",
    },
    {
      id: "agent",
      status: "pilot",
    },
  ],
};
</script>

<template>
  <ApioskCheckoutButton :config="checkoutConfig" />
</template>

Plugin usage

import { createApp } from "vue";
import App from "./App.vue";
import { ApioskCheckoutVuePlugin } from "@apiosk/checkout-vue";

createApp(App).use(ApioskCheckoutVuePlugin).mount("#app");

Design rule

The Vue layer should not own checkout logic. Keep the contract in @apiosk/checkout-core and the DOM runtime in @apiosk/checkout-web.