### Install @prosperstack/flow via npm

Source: https://docs.prosperstack.com/for-developers/embedding-the-flow

Use npm to install the ProsperStack flow package.

```shell
$ npm install @prosperstack/flow
```

--------------------------------

### Install @prosperstack/flow via yarn

Source: https://docs.prosperstack.com/for-developers/embedding-the-flow

Use yarn to install the ProsperStack flow package.

```shell
yarn add @prosperstack/flow
```

--------------------------------

### Klaviyo Webhook JSON body example

Source: https://docs.prosperstack.com/offers/offer-links

A concrete example of the JSON body configured with an offer ID, a Stripe subscription ID lookup, and a custom property name for the offer link.

```json
{
  "offer_id": "offr_XLqx2w5DigghX3qs1rhxox2a",
  "platform_subscription_id": "{{ person|lookup:'Stripe Subscription ID'|default:'' }}",
  "offer_link_property": "Offer Link URL"
}
```

--------------------------------

### Import @prosperstack/flow in JavaScript

Source: https://docs.prosperstack.com/for-developers/embedding-the-flow

Import the library into your application after installation.

```javascript
import flow from "@prosperstack/flow";
```

--------------------------------

### Using the custom integration

Source: https://docs.prosperstack.com/for-developers/embedding-the-flow

This example shows how to implement the flow for custom integrations where the application must manually process subscription changes based on the offer details returned by the flow.

```html
<button id="cancel">Cancel subscription</button>

<script>
  async function cancel() {
    const result = await flow({
      clientId: "acct_IrbFC8mvFtDAugC8k7uNlRn6",
      subscriber: {
        internalId: "31245",
        name: "Jane Smith",
        email: "jane@example.com",
        properties: {
          preferred_name: "Jane",
        },
      },
      subscription: {
        mrr: 99.0,
        trial: false,
        properties: {
          is_professional: true,
          num_contacts: 5800,
        },
      },
    });

    switch (result.status) {
      case "canceled":
        // Process the cancellation and whatever other logic your application
        // requires when a customer cancels.
        cancelSubscription();
        break;

      case "saved":
        // The customer accepted an offer and didn't cancel. Churn
        // prevented!

        // The details of the accepted offer will be present in the
        // response payload.
        const offerDetails = result.flowSession.offer_accepted.details;

        // Metadata stored on the ProsperStack offer is returned as
        // an object.
        const offerMetadata = result.flowSession.offer_accepted.metadata;

        // You can use the offer details to make the appropriate
        // changes to the customer's subscription.
        switch (offerDetails.type) {
          case "coupon":
            applyCoupon({
              amountOff: offerDetails.amount_off,
            });
            break;

          case "trial_extension":
            extendTrial({
              days: offerDetails.days,
            });
            break;

          case "change_plan":
            changePlan({
              newPlanId: offerDetails.platform_plan_id,
            });
            break;

          case "pause_subscription":
            pauseSubscription({
              length: offerDetails.interval_count,
            });
            break;

          case "custom":
            // Offer metadata can be used to pass custom data from
            // a ProsperStack offer to your application.
            const code = offerMetadata.code;
            processCustomOffer(code);
            break;
        }
        break;

      case "incomplete":
        // No action needed!
        break;
    }
  }

  document.getElementById("cancel").addEventListener("click", cancel);
</script>
```

--------------------------------

### Using a subscription platform integration

Source: https://docs.prosperstack.com/for-developers/embedding-the-flow

This example demonstrates how to trigger the cancellation flow when using a supported subscription platform. The flow handles the subscription state, and the application logic responds to the result status.

```html
<button id="cancel">Cancel subscription</button>

<script>
  async function cancel() {
    const result = await flow({
      clientId: "acct_IrbFC8mvFtDAugC8k7uNlRn6",
      subscription: {
        platformId: "sub_H6X0WYrAzq2iGk",
        properties: {
          is_professional: true,
          num_contacts: 5800,
        },
      },
      subscriber: {
        properties: {
          preferred_name: "Johnny",
        },
      },
    });

    switch (result.status) {
      case "canceled":
        // Process the cancellation and whatever other logic your application
        // requires when a customer cancels.
        break;

      case "saved":
        // The customer accepted an offer and didn't cancel. Churn prevented!
        // For most offers, no further action is needed.
        console.log(result.flowSession);

        // For custom offers, additional action is required.
        if (
          result.flowSession.offer_accepted.id ===
          "offr_9bxR7jLsMvnA6NsoRjGlk5sh"
        ) {
          // Whatever logic your application needs to process the custom offer.
        }
        break;

      case "incomplete":
        // No action needed!
        break;
    }
  }

  document.getElementById("cancel").addEventListener("click", cancel);
</script>
```

--------------------------------

### Initialize conversion with ProsperStack.convert.init()

Source: https://docs.prosperstack.com/conversion/embedding-conversion

Call window.ProsperStack.convert.init() after the DOM is loaded, providing the subscription platform ID. This initializes conversion campaigns and begins displaying offers unless the campaign is configured to trigger manually.

```javascript
document.addEventListener("DOMContentLoaded", () => {
  window.ProsperStack.convert.init({
    subscription: {
      platformId: "sub_H6X0WYrAzq2iGk",
    },
  });
});
```

--------------------------------

### Flow session started webhook payload

Source: https://docs.prosperstack.com/for-developers/webhooks

The JSON payload delivered when a new cancellation session is started, containing details about the subscriber, subscription, and the flow they were routed to.

```json
{
  "event": "flow_session_started",
  "event_id": "evt_1TwEZeOiaN9qTNHO2vuctd2j",
  "data": {
    "id": "sess_99aTIJuf30OWozAbvgu7Kje4",
    "status": "in_progress",
    "subscriber": {
      "id": "subr_dRiytWmkVtSBt9mOpRaC0ca0",
      "platform_id": "cus_Jax42BBWGOWuDp",
      "name": "Jane Doe",
      "email": "jane@example.com",
      "status": "saved",
      "properties": [
        {
          "property": {
            "id": "prop_jrtpyZs1httwFFIl7V80cHwf",
            "key": "number_of_contacts",
            "name": "Number of contacts",
            "entity": "subscriber",
            "type": "number",
            "format": "number"
          },
          "value": 5800,
          "formatted_value": "5,800"
        }
      ],
      "created_at": "2019-08-24T14:15:22Z",
      "updated_at": "2019-08-24T14:15:22Z"
    },
    "subscription": {
      "id": "subn_dp79dRR5wIy1kGW4PCO41wit",
      "platform_id": "sub_JE1trB8eUAnh0r",
      "subscriber_id": "subr_dRiytWmkVtSBt9mOpRaC0ca0",
      "mrr": "39.95",
      "status": "active",
      "properties": [
        {
          "property": {
            "id": "prop_S6A17y8S8wgKBBJbveQHpLW6",
            "key": "is_professional",
            "name": "Is professional",
            "entity": "subscription",
            "type": "boolean",
            "format": null
          },
          "value": true,
          "formatted_value": "True"
        }
      ],
      "created_at": "2019-08-24T14:15:22Z",
      "updated_at": "2019-08-24T14:15:22Z"
    },
    "flow": {
      "id": "flow_cMJ6T2tH56T2XngZdhBqpgtM",
      "name": "Default",
      "updated_at": "2021-11-04T15:22:13.449Z",
      "created_at": "2021-11-04T15:22:13.424Z"
    },
    "answers": [],
    "offers_presented": [],
    "offer_accepted": null,
    "cancel_reason": null,
    "created_at": "2021-11-04T15:41:58.238Z",
    "started_at": "2021-11-04T15:41:58.238Z",
    "updated_at": "2021-11-04T15:41:58.238Z",
    "completed_at": null
  }
}
```

--------------------------------

### Initialize flow via npm import

Source: https://docs.prosperstack.com/for-developers/embedding-the-flow

Call the flow method with your clientId and subscription details.

```javascript
flow({
  clientId: "acct_IrbFC8mvFtDAugC8k7uNlRn6",
  subscription: {
    platformId: "sub_H6X0WYrAzq2iGk",
  },
});
```