# Component: Cancel Save Offer

**Purpose:** Use this component to display Cancel/Save offer(s) that have been configured on the Campaign as Discount Offers. Learn more about:

* [How to create a Discount offer](https://docs.limio.com/integrations/zuora-integration/manage-your-pricing/how-to-create-a-discount-offer-for-cancelsave)
* [How to create a personalised cancel/save 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-cancelsave-experience)

The Cancel Save Offer will calculate the anticipated cost to the customer:

{% embed url="<https://69c2cf3a42a094f3cd354b8d-rfnbnfqzuj.chromatic.com/?path=/story/shop-components-cancellation-cancel-save-offer--default&full=1&shortcuts=false&singleStory=true&embed=true>" %}

The button to accept the discount will display a confirmation modal:

| Prop Name                                                     | Type     | Default Value                                                               | Description                                                                                                         |
| ------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| Heading                                                       | string   | Your cancel/save offer                                                      |                                                                                                                     |
| Subheading                                                    | richtext | Stay with us                                                                |                                                                                                                     |
| Detailed Subheading                                           | string   | We won't charge you until your subscription renews.                         |                                                                                                                     |
| Provide more information about any discounts                  | string   | Get {{discountRate}} off for the next {{discountPeriod}}.                   |                                                                                                                     |
| Provide more information about next payment                   | richtext | Next Payment {{currentPrice}}{{nextPriceWithDiscount}}                      |                                                                                                                     |
| Image Url                                                     | string   |                                                                             | Display an image next to the cancel/save offer                                                                      |
| Image Position                                                | picklist | top                                                                         |                                                                                                                     |
| Change Subscription Confirmation Button Label                 | string   | I'd like to change my subscription                                          | CTA button to accept the cancel/save offer                                                                          |
| Text to emphasise offer                                       | string   | Get this offer                                                              | Text in the Cancel/save offer highlight                                                                             |
| Change Subscription On This Page or Redirect For Confirmation | picklist | onPage                                                                      |                                                                                                                     |
| Redirect Url to subscription change confirmation page         | string   | amend/change                                                                | If the cancel/save offer is successful, the customer will go to this link.                                          |
| Confirm change modal heading                                  | string   | Are you sure you want to update your subscription?                          | If the confirmation modal is configured, this heading text will show.                                               |
| Confirm change modal subheading                               | string   | You will be switched over to this offer, starting on your next billing date | If the confirmation modal is configured, this subheading text will show.                                            |
| Confirm change modal process button local                     | string   | I want to change my subscription                                            | If the confirmation modal is configured, this text will show in the button that processes the cancel/save.          |
| Confirm cancel modal go back button label                     | string   | Go back                                                                     | If the confirmation modal is configured, this text will show in the button that closes the modal.                   |
| showPaymentMethod                                             | boolean  | FALSE                                                                       | If enabled, payment method which will be used on the new subscription will be displayed on the confirmation dialog. |
| paymentMethodHeading                                          | string   | Payment Method                                                              | Will only be displayed if "Show payment method?" is enabled                                                         |
| paymentFrequencyLabel                                         | string   | Payment Frequency                                                           | Will only be displayed if "Show payment method?" is enabled                                                         |
| paymentAmountLabel                                            | string   | Payment Amount                                                              | Will only be displayed if "Show payment method?" is enabled                                                         |
| paymentDateLabel                                              | string   | Payment Date                                                                | Will only be displayed if "Show payment method?" is enabled                                                         |
| showAdditionalButtons                                         | boolean  | Show additional buttons?                                                    | Will only show additional buttons if set to true                                                                    |
| additionalButtons                                             | list     | Additional Buttons                                                          | Will show buttons label and button url                                                                              |
| Redirect Url On Change Subscription Confirmation              | string   | cancel/save-confirm                                                         |                                                                                                                     |
| Component Id                                                  | string   | cancel-save-offer-limio                                                     |                                                                                                                     |

## Component FAQ

**Can I ensure a user who already has a discount applied to their subscription cannot access this flow?**\
Yes! You can use the [Block Discount Dialog](https://docs.limio.com/components/component-library/standard-components/component-block-discount-dialog) to ensure that any customer who already has a discount on their subscription will not be able to proceed to checkout.