@stigg/vue-sdk

@stigg/vue-sdk

Stigg SDK for Vue 3 applications.

Table of contents

• Installation
• Paywall
• Customization

Installation

Using npm

npm install @stigg/vue-sdk

Using yarn

yarn add @stigg/vue-sdk

Getting Started

Configure the SDK by wrapping your application in StiggProvider:

<script setup lang="ts">
import { StiggProvider, StiggProviderProps } from '@stigg/vue-sdk';

const stiggProvider: StiggProviderProps = {
   apiKey: "<STIGG_CLIENT_API_KEY>",
};

</script>

<template>
   <StiggProvider v-bind="stiggProvider">
      <NestedComponents />
   </StiggProvider>
</template>

Or in a context of a specific customer:

<script setup lang="ts">
import { StiggProvider, StiggProviderProps } from '@stigg/vue-sdk';

const stiggProvider: StiggProviderProps = {
  apiKey: "<STIGG_CLIENT_API_KEY>",
  customerId: "<CUSTOMER_ID>",
};

</script>

<template>
   <StiggProvider v-bind="stiggProvider">
      <NestedComponents />
   </StiggProvider>
</template>

Paywall

Use Paywall component to render the public pricing page or customer paywall:

<script setup lang="ts">
import { Paywall, PaywallProps } from '@stigg/vue-sdk';

const paywall: PaywallProps = {
   onPlanSelected: ({plan}) => {
      console.log(`Selected plan: ${plan.displayName}`);
   }
};

</script>

<template>
  <Paywall v-bind="paywall" />
</template>

Customer Portal

Use the Customer Portal component to provide customers with visibility to their current subscription details:

<script setup lang="ts">
import { CustomerPortal, CustomerPortalProps, Paywall, PaywallProps } from '@stigg/vue-sdk';

const customerPortal: CustomerPortalProps = {
   onManageSubscription: () => {
     console.log('Manage subscription');
   }
};

const paywall: PaywallProps = {
  onPlanSelected: ({plan}) => {
    console.log(`Selected plan: ${plan.displayName}`);
  }
};

</script>

<template>
  <CustomerPortal v-bind="customerPortal">
    <template v-slot:paywall-component>
      <Paywall v-bind="paywall" />
    </template>
  </CustomerPortal>
</template>