@indiegateway/vue

Vue 3 paywall for IndieGateway (native-crypto). Uses @indiegateway/client — talks only to your billing BFF.

Full integration guide is provided with your IndieGateway merchant onboarding.

<script setup lang="ts">
import { ref } from 'vue';
import { IndiePaywall } from '@indiegateway/vue';
import '@indiegateway/vue/style.css';
import { indieGatewayClient, CheckoutReason } from '@indiegateway/client';

const api = indieGatewayClient.createBillingApi({
  request: async ({ method, path, body }) =>
    fetch(`${import.meta.env.VITE_API_URL}${path}`, {
      method,
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
      },
      body: body !== undefined ? JSON.stringify(body) : undefined,
    }),
});

const open = ref(false);
</script>

<template>
  <IndiePaywall
    :api="api"
    :get-user-id="() => userId"
    :open="open"
    :overlay="true"
    :reason="CheckoutReason.UserInitiated"
    :theme="{ accent: '#ea580c' }"
    :get-benefits="(plan) => [`Plan ${plan.name}`]"
    @paid="refreshMe"
    @close="open = false"
  />
</template>

Built-in modal shell is always on. :overlay="true" (default) adds dim + blur; :overlay="false" keeps the modal without backdrop. Use :embedded="true" when you wrap the panel in your own modal.

Customize

| Level | How | |-------|-----| | Overlay | :overlay="true" (default dim/blur); :overlay="false" modal without backdrop | | Embedded | :embedded="true" panel only for your own modal/drawer | | Skeleton | :skeleton-benefit-count="2" to match your benefit lines (default 3) | | Theme | :theme="{ accent, surface, radius, font }" or CSS --ig-* on .ig-paywall | | Root class | pass rootClass to scope your CSS: .my-paywall .paywall-panel {...} | | Selection | v-model:selected-plan-key to preselect / control the catalog card | | Disabled plans | getPlanDisabled returns a reason string to disable a card | | Session | sessionStore from createCheckoutSessionStore('your.app.key') | | Slots | #header #plans #benefits #order-summary #network #payment #success | | Headless | useNativeCryptoCheckout + usePaywallConfig (+ step components) |

Product-specific UX (usage-limit copy, upgrade-block reasons) stays in your app via props/slots.