# Create Update Subscription Experience

The Update Subscription flow in Limio allows customers to change their current subscription — upgrading, downgrading, or adding/removing add-ons. While the [Switch](https://docs.limio.com/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-switch-upgrade-or-downgrade-experience) experience already allowed simple mid-term or end-of-term changes, it has more powerful capabilities for multi-product companies such as B2B SaaS, such as displaying proration calculations, supporting multi-product changes, hybrid pricing such as per unit recurring and usage pricing, and add-on purchases.

{% hint style="warning" %}
For simple, B2C changes, consider using the Switch experience: [how-to-create-a-personalised-switch-upgrade-or-downgrade-experience](https://docs.limio.com/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-switch-upgrade-or-downgrade-experience "mention").
{% endhint %}

This guide explains how to configure offers, add-ons, and pages to configure the Update Subscription experience.

## Step 1: Configure offers

This step assumes you have already created the offers and add-ons you want to use during the update subscription flow.

First, you will need to configure offer attributes related to the update subscription flow.

| Offer attribute      | What it controls                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | How to populate                                                                           |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Downgrade CTA        | Text shown on the [https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers](https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers "mention") button to users when this offer is defined as a downgrade compared to the offer the user currently owns                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Populate with text, typical examples are "Downgrade", "Downgrade plan", or "Change plan". |
| Upgrade CTA          | Text shown on the [https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers](https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers "mention") button to users when this offer is defined as an upgrade compared to the offer the user currently owns                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Populate with text, typical examples are "Upgrade", "Upgrade plan", or "Change plan".     |
| Update configuration | Determines the next page to send the user to when they select this offer to change to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Populate with a Limio page tag, such as /update-cart (step 2 below).                      |
| Downgrade offers     | Determines which offers are shown as downgrade options in the [https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers](https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers "mention") component when this offer is the current offer that the customer owns                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Populate with an offer label. Note that only published offers will be displayed.          |
| Upgrade offers       | Determines which offers are shown as upgrade options in the [https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers](https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers "mention") component when this offer is the current offer that the customer owns                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Populate with an offer label. Note that only published offers will be displayed.          |
| Cross-sell add-ons   | <p>Determines the cross-sells shown in both the <a data-mention href="https://docs.limio.com/components/component-library/cart-components/component-cross-sell"><https://docs.limio.com/components/component-library/cart-components/component-cross-sell></a> (used in acquisition) and the <a data-mention href="https://docs.limio.com/components/component-library/self-service-components/component-compatible-add-ons"><https://docs.limio.com/components/component-library/self-service-components/component-compatible-add-ons></a> (used in update subscription) when this offer is the current offer in the basket<br><br>Also determines whether an existing add-on will be removed during an upgrade or a downgrade. If an add-on is compatible with the new offer the user has selected, the add-on will be kept on the subscription. Otherwise, the add-on will be removed when the upgrade or downgrade happens.</p> | Populate with a cross-sell label. Note that only published add-ons will be displayed.     |

## Step 2: Configure pages

You will typically need 3 pages for the update subscription flow:

1. Subscription Details page - displays the customer’s current subscriptions and provides the starting point for initiating update actions such as upgrade, downgrade, or add add-ons
2. Update Offers page - presents available upgrade and downgrade options when the customer chooses to change their offer
3. Update Cart page - summarizes the pending update and allows the customer to review and submit the order

#### a. Subscription Details page

Use the Subscription Details component on this page.

#### b. Update Offers page

<figure><img src="https://2981049874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxxxhzz4ER0TH1oIFAttf%2Fuploads%2FWF8CTP44NqSC3yXcFpW6%2Fimage.png?alt=media&#x26;token=a91e7f05-adf0-417a-9321-86b06aa28f59" alt=""><figcaption></figcaption></figure>

This page uses the [https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers](https://docs.limio.com/components/component-library/self-service-components/component-update-subscription-offers "mention") component.

#### c. Update Cart page

<figure><img src="https://2981049874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxxxhzz4ER0TH1oIFAttf%2Fuploads%2FGHOdTW58z58Fe2bS4Mz8%2Fimage.png?alt=media&#x26;token=4daee5ae-fcd2-428f-8e0c-4cab1fd64d0d" alt=""><figcaption></figcaption></figure>

| Key | Component name                                                                                                                                                                                                                 | Notes                                                                                                                                       |
| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| A   | [https://docs.limio.com/components/component-library/self-service-components/component-update-cart-items](https://docs.limio.com/components/component-library/self-service-components/component-update-cart-items "mention")   | Displays the offers and add-ons in the customers update cart (not the offers or add-ons the customer currently owns)                        |
| B   | [https://docs.limio.com/components/component-library/self-service-components/component-compatible-add-ons](https://docs.limio.com/components/component-library/self-service-components/component-compatible-add-ons "mention") | Displays add-ons configured in the cross-sell add-ons attribute of the offer currently in the update cart                                   |
| C   | [https://docs.limio.com/components/component-library/standard-components/component-text](https://docs.limio.com/components/component-library/standard-components/component-text "mention")                                     | Generic text field                                                                                                                          |
| D   | [https://docs.limio.com/components/component-library/self-service-components/component-change-summary](https://docs.limio.com/components/component-library/self-service-components/component-change-summary "mention")         | Only displays when the customer is being credited an amount, so they understand the total owed                                              |
| E   | [https://docs.limio.com/components/component-library/cart-components/component-cart-summary](https://docs.limio.com/components/component-library/cart-components/component-cart-summary "mention")                             | Displays what the customer owes today. If the customer owes an amount in the future, the amount will be 0.00.                               |
| F   | [https://docs.limio.com/components/component-library/self-service-components/component-billing-schedule](https://docs.limio.com/components/component-library/self-service-components/component-billing-schedule "mention")     | Displays the customer's upcoming charges                                                                                                    |
| G   | [https://docs.limio.com/components/component-library/self-service-components](https://docs.limio.com/components/component-library/self-service-components "mention")                                                           | In an update subscription flow, is only used for the Submit button to submit the order, error display, and rerouting upon successful order. |

## Step 3: Testing end-to-end behaviour

Using this configuration, the following flows will be supported:

* Upgrade an offer (effective immediately)
* Upgrade an offer, and add add-ons (effective immediately)
* Downgrade an offer (effective at end of term)
* Downgrade an offer, and add add-ons (effective at end of term)
* Add add-ons (effective immediately)

During all of these flows, existing add-ons will be kept if they are a compatible add-on to the new offer. An add-on is compatible if it is in the offer's **Cross-sell add-ons** attribute. If an existing add-on is not compatible, it will be removed at the order effective date (see above).