[In the previous blog post](/blog/posts/stripe-integration-1) we covered getting started with Stripe, building out the pricing page, and giving users the ability to subscribe. Let’s round out the product by allowing users to

* View the pricing page while signed in and get more granular information & calls to action  
* Cancel their subscription  
* Upgrade or downgrade their subscription  
* Reactivate their subscription scheduled to cancel  
* Manage their billing information

Here are a few assumptions we’re going to make:

* Upgrading a subscription happens instantly for the user while maintaining the current subscription cycle dates, they are billed for the prorated amount  
* Downgrades & cancellations only happen at the end of the current subscription cycle  
* Upgrade & downgrades happen on the same payment method as the current subscription

### Products & Prices (signed in experience)

When a logged in user views the pricing page, ideally we want them to be able to also see

* What product tier they are currently subscribed to (with a disabled CTA)  
* What product tiers they can upgrade or downgrade to  
* The ability to cancel their subscription (and get back to the free tier if that’s part of the workflow)  
* If they have downgraded or canceled their subscription, see when the current subscription will end

![](/blog/media/stripe-integration-2-1.png)

In order to do this, we need to pass additional information through the products API

* Which product name & price ID are currently being used by the user  
* Is the user’s current subscription already scheduled to be changed (canceled or downgraded)  
* If the user’s current subscription is already scheduled to be changed, when does it end  
* If the user’s current subscription is already scheduled to be downgraded, what price ID will it change to in the future

In Stripe, future changes to a current subscription are managed via [subscription schedules](https://docs.stripe.com/billing/subscriptions/subscription-schedules). So in order to get the additional information, we’ll query two Stripe APIs in the backend - the [Subscriptions List API](https://docs.stripe.com/api/subscriptions/list) & the [Subscription Schedules List API](https://docs.stripe.com/api/subscription_schedules/list). The former will tell us which subscription the user is currently on, whether it is set to be changed and what date it changes on; while the latter will tell us which subscription the user will change to in the future if the current subscription is set to be changed.

```javascript
const subscriptions = await stripe.subscriptions.list({
  "customer": customerId
});

if (subscriptions.data.length) {
  // Assume user can have only one subscription at a time for now
  const subscription = subscriptions.data[0];

  const items = subscription.items;
  // Assume subscription can have only one price at a time for now
  const item = items.data[0];
  subscriptionProductId = item.price.product as string;
  subscriptionPriceId = item.price.id;

  subscriptionCanceled = subscription.cancel_at_period_end;
  subscriptionEndInSeconds = subscription.current_period_end;
}

const subscriptionSchedules = await stripe.subscriptionSchedules.list({
  "customer": customerId
});
for (const subscriptionSchedule of subscriptionSchedules.data) {
  if (subscriptionSchedule.status === "active") {
    // Assume user can change only one subscription at a time for now
    if (subscriptionSchedule.phases.length === 2) {
      // Assume subscription can have only one price at a time for now
      subscriptionChangePriceId = subscriptionSchedule.phases[1].items[0].price as string;
      break;
    }
  }
}

// Returns
// Current subscription product name
// Current subscription price ID
// Whether the current subscription is set to be changed (canceled or downgraded)
// If the current subscription is set to be changed, when
// If the current subscription is set to be changed, what price ID will it change to
return { subscriptionProductId, subscriptionPriceId, subscriptionCanceled, subscriptionEndInSeconds, subscriptionChangePriceId };
```

With this information you can now customize the pricing page to display different CTAs.

### Cancel Workflow

We’ll achieve the cancellation flow with a simple backend API, which we then call on the frontend. The Possible Studio utilizes a modal to have the user confirm that they’d like to cancel, before calling this API.

```javascript
const subscriptionSchedules = await stripe.subscriptionSchedules.list({
  "customer": customerId
});
// Cancel any future subscription changes planned by releasing them from the schedule
for (const subscriptionSchedule of subscriptionSchedules.data) {
  if (subscriptionSchedule.status === "active" || subscriptionSchedule.status === "not_started") {
    await stripe.subscriptionSchedules.release(subscriptionSchedule.id);
  }
}
// Get all subscriptions that are not canceled or returned
const subscriptions = await stripe.subscriptions.list({
  "customer": customerId
});
// Assume user can have only one subscription at a time for now
const subscription = subscriptions.data[0];
const subscriptionId = subscription.id;
// Cancel the current subscription at the end of its cycle
await stripe.subscriptions.update(subscriptionId, {
  "cancel_at_period_end": true
});
```

### Upgrade, Downgrade & Reactivate workflows

We’ll achieve these flows similarly, using a simple backend API that is called on the frontend. The Possible Studio utilized a modal to have the user confirm the upgrade or downgrade of their subscription, before calling this API.

Since upgrades are instant for the user, let’s cover that first.

```javascript
const subscriptions = await stripe.subscriptions.list({
  "customer": customerId
});
// Assume user can have only one subscription at a time for now
const subscription = subscriptions.data[0];
const subscriptionId = subscription.id;
const items = subscription.items;
// Assume subscription can have only one price at a time for now
const item = items.data[0];
const itemId = item.id;
// Update the current subscription with the new price ID and invoice for prorated amount
await stripe.subscriptions.update(subscriptionId, {
  "items": [{
    "id": itemId,
    // Make sure to pass the new priceId as a parameter to the API
    "price": priceId
  }],
  "proration_behavior": "always_invoice"
});
```

In case of downgrades, we want them to only happen at the end of the current subscription cycle, so we’ll create a [subscription schedule](https://docs.stripe.com/billing/subscriptions/subscription-schedules) instead of modifying the existing subscription.

```javascript
const subscriptions = await stripe.subscriptions.list({
  "customer": customerId
});
// Assume user can have only one subscription at a time for now
const subscription = subscriptions.data[0];
const subscriptionId = subscription.id;
const items = subscription.items;
// Assume subscription can have only one price at a time for now
const item = items.data[0];
const currentPriceId = item.price.id;
// Turn the current subscription into a subscription schedule
const subscriptionSchedule = await stripe.subscriptionSchedules.create({
  "from_subscription": subscriptionId
});
// Modify the subscription schedule to switch to a new priceId at cycle end
await stripe.subscriptionSchedules.update(subscriptionSchedule.id, {
  "end_behavior": "release",
  "phases": [{
    "start_date": subscription.current_period_start,
    "end_date": subscription.current_period_end,
    "items": [{
      "price": currentPriceId
    }]
  }, {
    "start_date": subscription.current_period_end,
    "items": [{
      // Make sure to pass the new priceId as a parameter to the API
      "price": priceId
    }]
  }]
});
```

Finally, reactivating a current subscription that is scheduled to be changed can also be done via a simple backend API.

```javascript
const subscriptions = await stripe.subscriptions.list({
  "customer": customerId
});
// Assume user can have only one subscription at a time for now
const subscription = subscriptions.data[0];
const subscriptionId = subscription.id;
// "Un-cancel" the current subscription immediately
await stripe.subscriptions.update(subscriptionId, {
  "cancel_at_period_end": false
});
```

### Billing management

The final step is to allow users to manage their billing information such as payment on file & getting invoices. Stripe provides a [customer billing portal](https://dashboard.stripe.com/settings/billing/portal) for this, make sure to activate it and customize it as needed. For our use case it makes the most sense to disable cancellations and subscription updates from the portal, since we’ve built our own in-app version.

Provide the user with a button (or any other action) to go to the billing portal, then in the backend implement this API to create a billing portal session.

```javascript
const billingPortalSession = await stripe.billingPortal.sessions.create({
  "customer": customerId,
  // Give it a return URL to show the user on the billing portal page
  "return_url": returnUrl
});
return billingPortalSession.url;
```

And that’s it, you’re done! You now have a fully functioning premium tier system integrated into your product using Stripe.
