Component: Switch Subscription

Purpose: Use this component to create a Page that confirms a change to a subscription (e.g. cancel/save offer accepted, or change offer).

The component includes 2 steps:

1. Offer selection
2. Modal to confirm the changes

The component includes the following abilities:

• Group: Ability to group Offers based on the Offer group attribute.
• Display:
  • Show the data of the offers attributes, such as Display Price, Offer Features, and CTA.
  • Hide offers that are of the same term (e.g. hide Monthly offer if the customer is already on a Monthly offer).
• Sort: Modifying the order of the Offers being displayed.
• Payment: Display the Payment Method which will be used for the update Subscription.
• Delivery: If the switch is to a product that includes Has Delivery = true, then the customer will be prompted to confirm the delivery address.
• Block: Block switch to other products if those are not allowed online.

You should also create a separate page to confirm success of the changes, using the Order Change Success component.

Configuring the component will require configuration also of the Switch Offer. Switch Offers are very similar to other offers, but you must configure a Switch Date (the effective date of the switch). Learn more at How to create a personalised switch experience with Switch Offers.

Considerations for this component:

• Note: If reCAPTCHA is enabled on your site, it will perform checks on pages which use this component. Read more: How to keep bots out of your checkout

1. Offer selection

Card layout

Radio button layout

2. Confirmation of changes

⚠️ Known limitation: If you are using Initial Price on Limio Offers and want to process an immediate switch, the Payment Amount will not show any credit/proration. It will show the full charge of the new Limio Offer selected.

This limitation does not apply if you are using External Pricing. However we do not recommend you use external price on a Switch Offer if the initial Offer is on Initial Pricing. Learn more about Initial/External Pricing here.

Props

Key properties to configure are highlighted in Bold.

id	label	type	default	options/infos
splitByGroups	Split offers by groups?	boolean	FALSE	Display of offers by groups, if groups are setup on the Offer
layout	Layout	picklist	cards	Display of offers in either Card or Radio Button layout
preselectFirstOfferInGroup	Preselect first offer in each group	boolean	FALSE	If true, first offer in each group will be preselected.
heading	Heading	string	Alternative subscriptions
subheading	Subheading	string
contactNumber	Contact Number	string
defaultImageUrl	Default Image Url	string
shadow	Shadow?	boolean	FALSE	Design settings
roundedCorners	Rounded Corners?	boolean	FALSE	Design settings
imagePosition	Image Position	picklist	middle	Defines the position of the image, if there is an attachment on the Offer
redirectUrl	Redirect Url	string	/mma	Redirect URL if the switch is processed successfully, for example /mma or a /switch-success page using the Component: Order Change Success.
confirmHeading	Confirm Heading	string	Are you sure you want change your subscription?	If the confirmation modal is configured, this heading text will show.
confirmSubheading	Confirm Sub Heading	string	You will be switched over to this offer, starting your next billing date:	If the confirmation modal is configured, this subheading text will show.
confirmationOk	Confirmation Ok label	string	OK
confirmationCancel	Confirmation Cancel label	string	Cancel
confirmationReturn	Confirmation Return label	string	Return to my account
filterSameTerm	Filter same term offers?	boolean	FALSE	If true, hide switch offers that are within the same group and term than the offer of the current subscription For example, hide montly print offers if the subscriber already has a monthly print offer. This feature uses the Limio Offer Term and Group attributes, which must match between the acquisition and switch offer.
blockProductSwitch	Block switch to offers with different products?	boolean	FALSE	Block switch attempt to a product that is different from the original product. This will display a message to contact customer service and will not allow to process a switch.
showDescription	Show description?	boolean	FALSE	Show a product description
confirmAddressLabel	Address confirmation label	string	Use this address:
deliveryCompanyLabel	Delivery company label	string	Company
deliveryAddress1Label	Delivery address line 1 label	string	Address line 1
deliveryAddress2Label	Delivery address line 2 label	string	Address line 2
deliveryCityLabel	Delivery city label	string	City
deliveryStateLabel	Delivery state label	string	{{state_name_type}}	Use this pattern to be able to have a regionally accurate label i.e. State for US, Country for GB etc.
deliveryPostalCodeLabel	Delivery postal code/ZIP code label	string	{{zip_name_type}}	Use this pattern to be able to have a regionally accurate label i.e. Zip Code for US, Postal Code for GB etc.
deliveryCountryLabel	Delivery country label	string	Country
invalid DeliveryCountryMessage	Invalid delivery country message	string	Please choose a different country	Displayed if validation fails for this field
invalidAddressMessage	Invalid address message	string	Address is required	Displayed if validation fails for this field
invalidCityMessage	Invalid city message	string	City is required	Displayed if validation fails for this field
invalidStateMessage	Invalid state/county message	string	{{state_name_type}} is required	Displayed if validation fails for this field Use this pattern to be able to have a regionally accurate label i.e. State for US, Country for GB etc.
invalid PostalCodeMessage	Invalid zip/postal code message	string	{{zip_name_type}} is required	Displayed if validation fails for this field Use this pattern to be able to have a regionally accurate label i.e. Zip Code for US, Postal Code for GB etc.e
invalidCountryMessage	Invalid city message	string	Country is required	Displayed if validation fails for this field
showPaymentMethod	Show payment method?	boolean	FALSE	If enabled, payment method which will be used on the new subscription will be displayed on the confirmation dialog.
paymentMethodHeading	Payment method heading	string	Payment Method	Will only be displayed if "Show payment method?" is enabled
paymentFrequencyLabel	Payment frequency label	string	Payment Frequency	Will only be displayed if "Show payment method?" is enabled
paymentAmountLabel	Payment amount label	string	Payment Amount	Will only be displayed if "Show payment method?" is enabled
paymentDateLabel	Payment date label	string	Payment Date	Will only be displayed if "Show payment method?" is enabled
showOfferFeatures	Show offer features?	boolean	FALSE	If enabled, the offer features will be displayed on the confirmation modal
allowAddressChange	Display address information?	boolean	TRUE	If enabled, the customer can change their address while switching their subscription
confirmationText	Confirmation Text	richtext		If present, this Confirmation Text will be displayed on the confirmation modal
contactText	Contact Text	richtext		This rich text field allows users to add links to the confirmation modal, which can be helpful to redirect customers to contact methods.
processErrorMessage	Switch process error message	string	Something went wrong and we weren't able to process your switch. Please contact our support team.	If a switch is not processed successfully, this message will alert the customer.
componentId	Component Id	string	switch-offers-limio