Manage Subscriptions Page
Bold Subscriptions customers using the Advanced plan or higher can create custom manage subscription experiences for their shoppers. Contact Bold Commerce for more information and to gain access.
This project includes boilerplate functions and advanced logic to manage subscriptions. To start creating a custom experience, we recommend forking this project as a base.
To run this application you will need the following software installed:
Clone the repository
Install the node dependencies for the project.
$ yarn install
Run a local webpack dev server to develop on.
$ yarn start
Develop and test
https://localhost:8080/app.bundle.js unless the port was already taken.
Proxy page URL
Previewing the local bundle
To start previewing your custom MSP, open Bold Subscriptions through your eCommerce platform and navigate to Settings > Manage Subscriptions. In the "Custom Manage Subscriptions Page" section, fill in the local bundle URL (which is usually
https://localhost:8080/app.bundle.js) and press Save.
After saving, click "Preview Custom Page". You'll be taken to a proxy page with your custom app loaded and ready to test. Make sure to sign in as a customer with an active subscription before visiting this page.
To build the production bundle into the
dist folder of the project, run the following:
$ yarn build
Upload this file to your server or Shopify account, and paste the direct link to the bundle into the App URL field on the Settings -> Manage Subscriptions Page.
When you're ready to release this page to the world, press Activate Custom Manage Subscriptions Page to send customers to your newly-created experience.
Proxy page content is blank
This is a fairly common issue when developing locally, and usually happens when the local bundle has a secure protocol (https) attached to it without a valid, associated SSL certificate. To work on a Shopify proxy page, you need to load a secure asset. You can resolve/hack around this in two ways:
In Chrome, disable the "Your connection is not private" error when loading local resources. This is generally safe, since the resources you're loading belong to your machine. You can navigate to
chrome://flags/#allow-insecure-localhostand enable the highlighted feature flag ("Allow invalid certificates for resources loaded from localhost"). The privacy error will no longer come up and you won't need to get around it ever again.
Your custom page should load correctly following one of these steps.
This project is read only. Please contact Bold Commerce with any changes or additions you would suggest.
This project is licensed under the MIT License - see the LICENSE.md file for details.