@apiosk/checkout-react

React and Next.js wrapper for the Apiosk four-layer checkout button.

This package does not reimplement the UI logic. It mounts the shared @apiosk/checkout-web custom element and passes the normalized config through to that runtime.

Install

After publish:

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

Before publish:

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

Quick start

import { PayWithApioskButton } from "@apiosk/checkout-react";

export function MerchantCheckout() {
  return (
    <PayWithApioskButton
      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",
        },
      ]}
      callbacks={{
        successUrl: "https://merchant.example/success",
        cancelUrl: "https://merchant.example/cancel",
        webhookUrl: "https://merchant.example/webhooks/apiosk",
      }}
    />
  );
}

Ref API

import { useRef } from "react";
import { PayWithApioskButton } from "@apiosk/checkout-react";

const checkoutRef = useRef(null);

<PayWithApioskButton ref={checkoutRef} config={config} />;

checkoutRef.current?.openCheckout();

The component exposes:

• openCheckout()
• closeCheckout()
• element

Why this wrapper exists

The React package should stay thin. The DOM runtime belongs in @apiosk/checkout-web, and the shared schema belongs in @apiosk/checkout-core.

That keeps React, Vue, and plain HTML integrations aligned around one contract.