Drop live shipping
into your own checkout.

import ShipWidget from './ShipWidget';

// Drop the widget straight into your checkout route.
export default function Checkout() {
  return (
    <ShipWidget
      endpoint="/api"
      apiKey="pk_live_…"       // publishable → ShipKit-Api-Key header
      theme="dark"
      onPurchase={(label) => router.push(label.trackingUrl)}
      onError={(err) => toast.error(err.message)}
    />
  );
}

<script setup>
import ShipWidget from './ShipWidget.vue';
</script>

<template>
  <ShipWidget
    endpoint="/api"
    api-key="pk_live_…"
    theme="dark"
    @purchase="(label) => (window.location = label.labelUrl)"
    @error="(err) => notify(err.message)"
  />
</template>

<!-- One mount point -->
<div id="ship"></div>

<script src="/js/shipkit.js"></script>
<script>
  ShipKit.init({
    mount: '#ship',
    endpoint: '/api',
    apiKey: 'pk_live_…',        // publishable widget key
    theme: 'dark',
    onPurchase: (label) => { window.location = label.labelUrl; },
    onError: (err) => console.error(err.stage, err.message)
  });
</script>

<!-- Mount point for the widget -->
<div id="ship"></div>

<!-- ShipKit Managed · Secured by Lifted Payments 3-D Secure -->
<!-- Zero-JS: data-mount auto-inits the widget on load -->
<script
  src="https://cdn.liftedholdings.com/shipkit@1.0.0/shipkit.min.js"
  integrity="sha384-Kx7dZq9mB2sPfR0aVt3nJhY6uL8wE1cQpX4oN5rG7iD9kS2bH0mA3vC6yU8lT4z"
  crossorigin="anonymous"
  data-managed-key="pk_live_your_publishable_key"
  data-mount="#ship"></script>

// …or init by hand to hold the instance and subscribe to events:
const kit = ShipKit.init({ mount: '#ship', managedKey: 'pk_live_…' });
kit.on('purchase', label => console.log('Tracking:', label.trackingCode));
kit.on('error', err => console.error(err.stage, err.message));
// later: kit.destroy();