Salable Web Components : Next.js App Router Demo

Looking for how to setup Salable Web Components in a Next.js Pages Router project? See our Pages Router example.

Salable is a subscription licensing platform that allows users to have more control over their customers and how they interact with their applications/products.

This demo repository shows how you can implement Salable Web Components into a Next.js project to do things such as:

• Show pricing tables to allow users to subscribe to plans and create licenses
• Show/Download all of the invoices associated with a subscription
• Allow users to subscribe to a plan via an in-line checkout

Running the demo

To run this demo locally with your own Salable account, follow the steps below.

1. Clone this repository (git clone https://github.com/Salable/Salable-React-Web-Components-Nextjs-Demo.git)
2. Install the demo's dependencies (npm install)
3. Create a Salable account (if you don't already have one)
4. Create the required data for your chosen web component (See requirements for each component here)
5. Create a new session token for your chosen component using the Salable API
6. Pass the required data to your component

See examples of each component being used

Next steps / Learn more

To learn more about Salable, our web components and Next.js, check out the links below.

• Salable Documentation
• Salable Web Components Documentation
• Next.js Documentation

Want to give feedback? Or, found an issue?

If you have found an issue or have feedback regarding this repo, please join our Discord and send us a message.

Found an issue and want to fix it? Feel free to create a pull request with the solution.

Want to get in contact with us?

You can ask questions, and meet other Salable users in our Discord.

Or, if you would prefer, you can email us.