# @stigg/vue-sdk

Stigg SDK for Vue 3 applications.

## Table of contents

- [Installation](#installation)
- [Paywall](#Paywall)
- [Customization](#Customization)

## Installation

Using [npm](https://npmjs.org/)

```bash
npm install @stigg/vue-sdk
```

Using [yarn](https://yarnpkg.com/)

```bash
yarn add @stigg/vue-sdk
```

## Getting Started

Configure the SDK by wrapping your application in `StiggProvider`:

```vue
<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:

```vue
<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:

```vue
<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:

```vue
<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>
```

