@apiosk/checkout-vue 0.1.0

package/README.md

@@ -0,0 +1,71 @@
+# `@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:
+
+```bash
+npm install @apiosk/checkout-vue @apiosk/checkout-web @apiosk/checkout-core
+```
+
+Before publish:
+
+```bash
+npm install ./subs/checkout-vue ./subs/checkout-web ./subs/checkout-core
+```
+
+## Component usage
+
+```vue
+<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
+
+```js
+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`.

package/index.d.ts

@@ -0,0 +1,18 @@
+import type { DefineComponent, Plugin, Ref } from "vue";
+import type { CheckoutConfigInput } from "@apiosk/checkout-core";
+
+export interface ApioskCheckoutVueExpose {
+  element: Ref<HTMLElement | null>;
+  openCheckout(): void;
+  closeCheckout(): void;
+}
+
+export declare const ApioskCheckoutButton: DefineComponent<{
+  config: CheckoutConfigInput;
+  className?: string;
+  style?: string | Record<string, unknown> | Array<unknown>;
+}>;
+
+export declare const ApioskCheckoutVuePlugin: Plugin;
+export declare function registerApioskCheckoutButton(): unknown;
+export default ApioskCheckoutButton;

package/index.mjs

@@ -0,0 +1,78 @@
+import { defineComponent, h, onMounted, ref, watch } from "vue";
+import { normalizeCheckoutConfig } from "@apiosk/checkout-core";
+import {
+  CHECKOUT_ELEMENT_TAG,
+  registerApioskCheckoutButton,
+  serializeCheckoutConfig,
+} from "@apiosk/checkout-web";
+
+export const ApioskCheckoutButton = defineComponent({
+  name: "ApioskCheckoutButton",
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+    className: {
+      type: String,
+      default: "",
+    },
+    style: {
+      type: [String, Object, Array],
+      default: undefined,
+    },
+  },
+  setup(props, { attrs, expose, slots }) {
+    const elementRef = ref(null);
+
+    const applyConfig = () => {
+      if (!elementRef.value) {
+        return;
+      }
+
+      elementRef.value.config = normalizeCheckoutConfig(props.config);
+    };
+
+    onMounted(() => {
+      registerApioskCheckoutButton();
+      applyConfig();
+    });
+
+    watch(
+      () => props.config,
+      () => {
+        applyConfig();
+      },
+      { deep: true },
+    );
+
+    expose({
+      element: elementRef,
+      openCheckout: () => elementRef.value?.openCheckout?.(),
+      closeCheckout: () => elementRef.value?.closeCheckout?.(),
+    });
+
+    return () =>
+      h(
+        CHECKOUT_ELEMENT_TAG,
+        {
+          ...attrs,
+          ref: elementRef,
+          config: serializeCheckoutConfig(props.config),
+          class: props.className,
+          style: props.style,
+        },
+        slots.default ? slots.default() : undefined,
+      );
+  },
+});
+
+export const ApioskCheckoutVuePlugin = {
+  install(app) {
+    registerApioskCheckoutButton();
+    app.component("ApioskCheckoutButton", ApioskCheckoutButton);
+  },
+};
+
+export { registerApioskCheckoutButton };
+export default ApioskCheckoutButton;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@apiosk/checkout-vue",
+  "version": "0.1.0",
+  "description": "Vue wrapper for the Apiosk four-layer checkout button",
+  "type": "module",
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "files": [
+    "index.mjs",
+    "index.d.ts",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.mjs"
+    }
+  },
+  "scripts": {
+    "check": "node --check index.mjs"
+  },
+  "keywords": [
+    "apiosk",
+    "checkout",
+    "vue",
+    "payments",
+    "x402"
+  ],
+  "author": "Apiosk",
+  "license": "MIT",
+  "homepage": "https://docs.apiosk.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@apiosk/checkout-core": "^0.1.0",
+    "@apiosk/checkout-web": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  }
+}