@stigg/vue-2-sdk

@stigg/vue-2-sdk

Stigg SDK for Vue 2 applications.

Table of contents

• Installation
• Paywall
• Customization

Installation

Using npm

npm install @stigg/vue-2-sdk

Using yarn

yarn add @stigg/vue-2-sdk

Getting Started

Configure the SDK by wrapping your application in StiggProvider:

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

const apiKey = "<STIGG_CLIENT_API_KEY>";
</script>

<template>
   <StiggProvider :apiKey="apiKey">
      <NestedComponents />
   </StiggProvider>
</template>

Paywall

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

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

const apiKey = "<STIGG_CLIENT_API_KEY>";

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

<template>
   <StiggProvider :apiKey="apiKey">
      <Paywall v-bind="paywall" />
   </StiggProvider>
</template>

Customer Portal

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

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

const apiKey = "<STIGG_CLIENT_API_KEY>";

const customerId = "<CUSTOMER-ID>";

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

<template>
   <StiggProvider :apiKey="apiKey" :customer-id="customerId">
      <CustomerPortal v-bind="customerPortal"/>
   </StiggProvider>
</template>