My Subscriptions Widget - Configuration (v2) Reference


The My Subscriptions Widget supports extensive configuration options. Below is a complete reference to all the supported options.

You might also want to take a look at a complete default configuration.

Core Configuration Options

These options allow you to configure the Subscribe Pro API connection, credentials and options which affect the entire My Subscriptions Widget.

PropertyDetails
version int
Default: 2
Which version of the widget config to use? 1 or 2
apiBaseUrl
Default: 'https://api.subscribepro.com'
Base URL for the Subscribe Pro API.
apiAccessToken (required)
A 'customer' scoped access token must be fetched server-side and passed in to the client-side config.
apiFetchMaxSubscriptionsCount int
Default: 50
Page size used when widget makes API requests to fetch subscriptions. Multiple pages will be fetched if necessary. Should be an integer between 1 and 999
vaultEnvironmentKey
When using the Subscribe Pro payment vault, you must supply this key to the widget. Otherwise you may pass null. This key should have been returned by the Subscribe Pro token endpoint when fetching the access token.
customerId (required)
Default: '0'
My Subscriptions widget is shown for a specific customer. This value identified which customer's data to display
themeName
Default: 'base'
Theme can be 'base', 'blank' or the name of your custom theme provided by Subscribe Pro support.

UI Section Configuration

There are many configuration options available for each section of the main user interface (UI) for the My Subscriptions Widget.

Summary Section

Widget Config Summary Section

PropertyDetails
sections.summary.show bool
Default: true
Display/hide summary text at top of widget
sections.summary.line1Text
Default: 'You have N active subscriptions.'
First line of summary text. 'N' is replaced by the number of active subscription items displayed.
sections.summary.line2Text
Default: 'We'll automatically send you recurring shipments.'
Second line of summary text
sections.summary.subscriptionErrorText
Default: 'There was an error displaying one or more of your items! You may be subscribed to more items than show here. Please contact customer support to make changes.'
Text to display at top in case there was an error displaying 1 or individual subscription items

The following configuration is applied when the customer has no active subscriptions to display.

PropertyDetails
sections.noSubscriptions.text
Default: 'You are not currently subscribed to any items.'
No subscriptions text

Subscription Status Section

Widget Config Subscription Status Section

PropertyDetails
sections.status.pausedText
Default: 'This item is Paused. To start receiving this item again, click Restart.'
Text shown when the item is paused
sections.status.errorText
Default: 'There was a problem with your last order.'
Text shown when the item order fails

Subscription Product Information Section

Widget Config Product Information Section

PropertyDetails
sections.productInfo.price
Subscription Price Configuration
Configure options for the product price.
sections.productInfo.price.currency
Default: 'USD'
Currency type
sections.productInfo.price.fractionDigits int
Default: 0
How many digits should appear after the decimal in the price

Subscription Quantity Section

Widget Config Subscription Quantity Section

PropertyDetails
sections.quantity.show
Default: ''
Controls whether or not the product quantity will be displayed
sections.quantity.allowEdit
Default: ''
Controls whether or not the quantity can be edited by the customer
sections.quantity.labelText
Default: 'Qty'
How quantity is labeled in the widget

Subscription Next Order Section

Widget Config Subscription Next Order Section

PropertyDetails
sections.nextDate.show bool
Default: true
Controls whether or not the next delivery date will be displayed
sections.nextDate.allowEdit bool
Default: true
Controls whether or not the next delivery date can be edited by the customer
sections.nextDate.labelText
Default: 'Next Delivery'
How the next delivery date is labeled in the widget
sections.nextDate.onBeforeUpdate
Function is passed a date object and must return a date object. Function receives the date entered by customer on the date picker. The date returned by the function is passed to the Subscribe Pro API to update the subscription.
sections.nextDate.onBeforeDisplay
Allows modifying the date object before it gets displayed. It receives the date object as a parameter and expects a date object in return
sections.nextDate.readOnlyDateOptions
Read-only Date Configuration
Locale and format for date when `allowEdit`=false
sections.nextDate.readOnlyDateOptions.locale
Default: 'en'
ISO language code and tag. For example: 'en', 'en-GB', 'ru', etc.

NOTE: You must contact Subscribe Pro support to ensure your selected language is available.

sections.nextDate.readOnlyDateOptions.dateFormat
Default: 'LLL d, yyyy'
sections.nextDate.datepickerOptions
Date Picker Configuration
sections.nextDate.datepickerOptions.locale
Default: 'en'
ISO language code and tag. For example: 'en', 'en-GB', 'ru', etc.

NOTE: You must contact Subscribe Pro support to ensure your selected language is available.

sections.nextDate.datepickerOptions.dateFormat
Default: 'LLL d, yyyy'

Subscription Frequency Section

Widget Config Subscription Frequency Section

PropertyDetails
sections.frequency.show bool
Default: true
Controls whether or not the subscription frequency will be displayed
sections.frequency.allowEdit bool
Default: true
Controls whether or not the subscription frequency can be edited by the customer
sections.frequency.labelText
Default: 'Send Every'
How the frequency is labeled in the widget

Subscription Actions Section

Widget Config Subscription Actions Section

PropertyDetails
sections.actions.showActions
Default: 'skiprestartcancel'
List of actions which may be shown (depending on context & status of the subscription item).
sections.actions.showActionsPhone
Default: 'skiprestartcancel'
List of actions which may be shown (depending on context & status of the subscription item).
sections.actions.actions
Config for Each Action Type
Configure options for the actions a customer can perform on a subscription
sections.actions.actions.skip
Skip Action
Option for a customer to skip the next delivery date.
sections.actions.actions.skip.type
Default: 'button'
The type of element for the skip action
sections.actions.actions.skip.typePhone
Default: 'button'
The type of element for the skip action on mobile
sections.actions.actions.skip.label
Default: 'Skip'
Label of the skip element that displays on the widget
sections.actions.actions.skip.labelPhone
Default: 'Skip Next Delivery'
Label of the skip element for the mobile view
sections.actions.actions.pause
Pause Action
Option for a customer to pause the subscription.
sections.actions.actions.pause.type
Default: 'button'
The type of element for the pause action
sections.actions.actions.pause.typePhone
Default: 'button'
The type of element for the pause action on mobile
sections.actions.actions.pause.label
Default: 'Pause'
Label of the pause element that displays on the widget
sections.actions.actions.pause.labelPhone
Default: 'Pause Delivery'
Label of the pause element for the mobile view
sections.actions.actions.cancel
Cancel Action
Option for the customer to cancel the subscription.
sections.actions.actions.cancel.type
Default: 'link'
The type of element for the cancel action
sections.actions.actions.cancel.typePhone
Default: 'link'
The type of element for the cancel action on mobile
sections.actions.actions.cancel.label
Default: 'Stop'
Label of the cancel element that displays on the widget
sections.actions.actions.cancel.labelPhone
Default: 'Stop Delivery'
Label of the cancel element for the mobile view
sections.actions.actions.restart
Restart Action
Option for the customer to restart a non-active subscription.
sections.actions.actions.restart.type
Default: 'button'
The type of element for the restart action
sections.actions.actions.restart.typePhone
Default: 'button'
The type of element for the restart action on mobile
sections.actions.actions.restart.label
Default: 'Restart'
Label of the restart element that displays on the widget
sections.actions.actions.restart.labelPhone
Default: 'Restart'
Label of the restart element for the mobile view

Subscription Coupon Section

Widget Config Subscription Coupon Section

PropertyDetails
sections.coupon.show bool
Default: true
Controls whether or not the coupon section is displayed
sections.coupon.labelText
Default: 'Coupon Code'
The text of the coupon link in the widget when a code is entered
sections.coupon.labelTextNoCode
Default: 'Got a Coupon Code?'
The label for the coupon link without a code entered

Subscription Shipping Address Section

Widget Config Subscription Shipping Section

PropertyDetails
sections.shipping.show bool
Default: true
Controls whether or not the shipping address section is displayed
sections.shipping.labelText
Default: 'Shipping Address'
The text label for the shipping address section in the widget
sections.shipping.allowEdit bool
Default: true
Controls whether or not the shipping address can be changed by the customer
sections.shipping.editLinkText
Default: 'Change'
Modifies the text of the edit shipping address link
sections.shipping.selectLinkText
Default: 'Select Address'
Modifies the text of the select shipping address link which appears when the subscription item has no current shipping address.

Subscription Billing Address Section

Widget Config Subscription Billing Section

PropertyDetails
sections.billing.show bool
Default: false
Controls whether or not the billing address is displayed
sections.billing.labelText
Default: 'Billing Address'
The text label for the billing address section in the widget
sections.billing.allowEdit bool
Default: true
Controls whether or not the billing address can be changed by the customer
sections.billing.editLinkText
Default: 'Change'
Modifies the text of the edit billing address link
sections.billing.selectLinkText
Default: 'Select Address'
Modifies the text of the select billing address link which appears when the subscription item has no current billing address.

Subscription Payment Methods Section

Widget Config Subscription Payment Methods Section

PropertyDetails
sections.payment.show bool
Default: true
Controls whether or not the payment method section is displayed
sections.payment.labelText
Default: 'Payment Method'
The text label for the payment method section in the widget
sections.payment.allowEdit bool
Default: true
Controls whether or not the payment method can be changed by the customer
sections.payment.editLinkText
Default: 'Change'
Modifies the text of the edit payment method link

Subscription Expander Section

Widget Config Subscription Expander Closed

Widget Config Subscription Expander Open

PropertyDetails
sections.expander.collapsedText
Default: 'Payment & Shipping'
The label for the expander that displays when the expander is collapsed
sections.expander.collapsedTextPhone
Default: 'Show Details'
The label for the expander that displays when the expander is collapsed on mobile
sections.expander.expandedText
Default: 'Hide Details'
The label for the expander that displays while the expander is expanded
sections.expander.expandedTextPhone
Default: 'Hide Details'
The label for the expander that displays while the expander is expanded on mobile

Subscription Fixed Price Section

Widget Config Subscription Fixed Price Section

The Subscribe Pro platform offers a Fixed Price feature. When using this feature in conjunction with the platform, the My Subscriptions Widget can be configured to allow customers to view and edit the fixed price for each subscription item.

PropertyDetails
sections.fixedPrice.show bool
Default: false
Controls whether or not the link displays in the product info section
sections.fixedPrice.allowEdit bool
Default: true
Controls whether or not the customer can make edits
sections.fixedPrice.editLinkText
Default: 'Change'
Modify the text of the link

Modals Configuration

The My Subscriptions Widget uses numerous modals to communicate status and collect input from customers.

Choose Address Modal

Widget Config Subscription Choose Address Modal

PropertyDetails
modals.chooseAddress.titleText
Default: 'My Addresses'
The title that displays at the top of the Choose Address Modal
modals.chooseAddress.middleContent
HTML Content - displayed between apply type selector and address choices
modals.chooseAddress.enableAdd bool
Default: true
Controls whether or not addresses can be added
modals.chooseAddress.enableEdit bool
Default: true
Controls whether or not saved addresses can be edited
modals.chooseAddress.addLinkText
Default: 'Add New Address'
The text label for the link to add a new address
modals.chooseAddress.itemGroupText
Default: 'Use the selected address for upcoming orders of N items using the previous address'
The text label for the option to change the address of all items that are currently using the same address
modals.chooseAddress.thisItemText
Default: 'Use the selected address for upcoming orders of this item only'
The text label for the option to change the address for the selected item only
modals.chooseAddress.allItemsText
Default: 'Use the selected address for orders of all N items you receive regularly'
The text label for the option to change the address for all subscription items
modals.chooseAddress.nItemsSplitText
Default: 'N items'
The text label used for the number of items using the same address and for the number of all items
modals.chooseAddress.thisItemSplitText
Default: 'this item'
The text label used to describe the current item while adding/editing addresses
modals.chooseAddress.disableThisItem bool
Default: false
Disable the "this item" radio option (top option)
modals.chooseAddress.disableItemGroup bool
Default: false
Disable the "item group" radio option (middle option)
modals.chooseAddress.disableAllItems bool
Default: false
Disable the "all items" radio option (bottom option)
modals.chooseAddress.showLink bool
Default: true
Show/hide the link to show item thumbnails
modals.chooseAddress.showItemName bool
Default: false
Controls whether or not the item name displays next to thumbnails in the address modals
modals.chooseAddress.buttonText
Default: 'Done'
Modifies the text for the confirmation button at the bottom of the modal

New Address Modal

Widget Config Subscription New Address Modal

PropertyDetails
modals.newAddress.titleText
Default: 'New Address'
The title that displays at the top of the new address modal
modals.newAddress.contentText
Default: 'This address will be used for upcoming orders on N items'
Copy used below the title in the new address modal. N will be replaced by actual number of items.
modals.newAddress.confirmButtonText
Default: 'Use this Address'
Modifies the text of the button that confirms
modals.newAddress.cancelButtonText
Default: 'Cancel'
Modifies the text of the button that cancels
modals.newAddress.labelText
Field Label Text
modals.newAddress.labelText.firstName
Default: 'First Name'
modals.newAddress.labelText.lastName
Default: 'Last Name'
modals.newAddress.labelText.street1
Default: 'Street Address'
modals.newAddress.labelText.street2
Default: 'Apt, suite, etc. (optional)'
modals.newAddress.labelText.city
Default: 'City'
modals.newAddress.labelText.region
Default: 'State'
modals.newAddress.labelText.postcode
Default: 'Zip Code'
modals.newAddress.labelText.country
Default: 'Country'

Edit Address Modal

Widget Config Subscription Edit Address Modal

PropertyDetails
modals.editAddress.titleText
Default: 'Edit Address'
The title that displays at the top of the edit address modal
modals.editAddress.contentText
Default: 'This address will be used for upcoming orders on N items'
Copy used below the title in the edit address modal. N will be replaced by actual number of items.
modals.editAddress.confirmButtonText
Default: 'Use this Address'
Modifies the text of the button that confirms
modals.editAddress.cancelButtonText
Default: 'Cancel'
Modifies the text of the button that cancels
modals.editAddress.labelText
Field Label Text
modals.editAddress.labelText.firstName
Default: 'First Name'
modals.editAddress.labelText.lastName
Default: 'Last Name'
modals.editAddress.labelText.street1
Default: 'Street Address'
modals.editAddress.labelText.street2
Default: 'Apt, suite, etc. (optional)'
modals.editAddress.labelText.city
Default: 'City'
modals.editAddress.labelText.region
Default: 'State'
modals.editAddress.labelText.postcode
Default: 'Zip Code'
modals.editAddress.labelText.country
Default: 'Country'

Choose Payment Method Modal

Widget Config Subscription Choose Payment Method Modal

PropertyDetails
modals.choosePaymentMethod.titleText
Default: 'My Payment Methods'
The title that displays at the top of the Choose Payment Method modal
modals.choosePaymentMethod.middleContent
HTML Content - displayed between apply type selector and payment method choices
modals.choosePaymentMethod.enableAddLink bool
Default: false
Controls whether or not a payment method can be added from the widget
modals.choosePaymentMethod.addLink
Default: '#'
Controls destination of link to add new payment method
modals.choosePaymentMethod.addLinkText
Default: 'Add New Payment Method'
The text label for the link to add new payment method
modals.choosePaymentMethod.itemGroupText
Default: 'Use the selected payment method for upcoming orders of N items using the previous payment method'
The text label for the option to change the payment method of all items that are currently using the same payment method
modals.choosePaymentMethod.thisItemText
Default: 'Use the selected payment method for upcoming orders of this item only'
The text label for the option to change the payment method for the selected item only
modals.choosePaymentMethod.allItemsText
Default: 'Use the selected payment method for orders of all N items you receive regularly'
The text label for the option to change the payment method for all subscription items
modals.choosePaymentMethod.nItemsSplitText
Default: 'N items'
The text label used for the number of items using the same payment method and for the number of all items
modals.choosePaymentMethod.thisItemSplitText
Default: 'this item'
The text label used to describe the current item while adding/editing payment methods
modals.choosePaymentMethod.disableThisItem bool
Default: false
Disable the "this item" radio option (top option)
modals.choosePaymentMethod.disableItemGroup bool
Default: false
Disable the "item group" radio option (middle option)
modals.choosePaymentMethod.disableAllItems bool
Default: false
Disable the "all items" radio option (bottom option)
modals.choosePaymentMethod.showLink bool
Default: true
Show/hide the link to show item thumbnails
modals.choosePaymentMethod.showItemName bool
Default: false
Controls whether or not the item name displays next to thumbnails in the payment method modals
modals.choosePaymentMethod.expiresText
Default: 'Expires -M/Y'
Expiration date text. M is replaced with numeric month. Y is replaces with 2 digit year.
modals.choosePaymentMethod.buttonText
Default: 'Done'
Modifies the text for the confirmation button at the bottom of the modal

Cancel Modal

Widget Config Subscription Cancel Modal

PropertyDetails
modals.cancel.titleText
Default: 'Stop your subscription?'
The title at the top of the cancel modal
modals.cancel.descText
Default: 'Pause a subscription if you intend to use it again in the future, or you can remove it completely.'
The description of the cancel action that displays in the cancel modal
modals.cancel.finePrintText
Default: 'Depending on the next delivery date, you may still receive your next shipment once paused or canceled.'
The smaller text at the bottom of the cancel modal
modals.cancel.showPause bool
Default: true
Controls whether or not the pause option should also be displayed in the cancel modal
modals.cancel.showSkip bool
Default: false
Controls whether or not the skip option should also be displayed in the cancel modal
modals.cancel.pauseText
Default: 'Pause Subscription'
Text label for the pause option if showPause is set to true
modals.cancel.skipText
Default: 'Skip Subscription'
Text label for the skip option if showSkip is set to true
modals.cancel.cancelText
Default: 'Cancel Subscription'
Text label for cancel option within the modal

Skip (Next Order) Modal

Widget Config Subscription Skip Modal

PropertyDetails
modals.skip.titleText
Default: 'Skip next delivery?'
Title at the top of the skip modal
modals.skip.contentText
Default: 'After your PRODUCT item is skipped, it will ship again on the following rotation.'
Text for the main content area of the modal. 'PRODUCT' is replaced with the product name for the product associated with this subscription item.
modals.skip.skipDateText
Default: 'Skip X'
The text that displays which order date will be skipped. 'X' is replaced with date text.
modals.skip.nextDeliveryLabelText
Default: 'New next shipment for this item'
Text that describes what the new date will be if the customer confirms the skip
modals.skip.confirmButtonText
Default: 'Confirm Skip'
Modifies the text of the button that confirms the skip
modals.skip.cancelButtonText
Default: 'Cancel'
Modifies the text of the button that cancels the skip

Edit Coupon Code Modal

Widget Config Edit Coupon Code Modal

PropertyDetails
modals.editCoupon.titleText
Default: 'Enter Coupon Code'
The title that displays at the top of the Enter Coupon Code Modal
modals.editCoupon.labelText
Field Label Text
modals.editCoupon.labelText.couponCode
Default: 'Coupon Code'
modals.editCoupon.buttonText
Default: 'Submit Coupon'
Modifies the text for the confirmation button at the bottom of the modal

Edit Fixed Price Modal

PropertyDetails
modals.editFixedPrice.titleText
Default: 'Enter Amount'
Title at the top of the Edit Fixed Price modal
modals.editFixedPrice.buttonText
Default: 'Submit Amount'
Text label for the submit button
modals.editFixedPrice.placeholderText
Default: 'Amount'
Placeholder text for the text field
modals.editFixedPrice.errorText
Default: 'Please enter a valid amount!'
Error message text for the Edit Fixed Price modal