This Miro app demonstrates using usage-based billing with Salable.

Configure Salable

1. Sign up for Salable or login if you already have an account.
2. Ensure you have Test Mode enabled.

Create Product

1. Go to the Products page and click the Create Product button.
2. Give your product any name.
3. Tick the Paid Product checkbox.
4. Select the test payment integration that is created for you on sign up. If you already have created a payment integration this can be used instead.
5. Select GBP as your currency.

Create Plan

1. Go to the Plans tab on the sidebar and select Create Plan
2. Set the plan name as Shapes User and optionally provide a description. This plan will be a 'user' plan giving access to the product for a user on all boards but no other users on the team will be able to use it.
3. Select Usage for pricing model.
4. Select Month for subscription cycle.
5. Select Paid to make it a paid plan.
6. Currencies will then appear, input the cost as 0.50 which will bill a customer £0.50 for every credit they consume every month.
7. Click Next to proceed to Features.
8. This section is for creating features and assigning values to plans.
9. Click Create Feature.
10. Create a boolean features called circle, rectangle and triangle. These will be used to lock features behind the entitlement check in the demo app.
11. Create Plan.
12. Repeat the above steps for a Shapes Board plan but with the changes in the next steps. This plan will be a 'board' plan allowing all users on a single board access to the product. All users on the board will contribute to the board's subscription consumption. If a user has their own subscription but is using the app on a board that is also subscribed the board usage will take priority.
13. Set the monthly cost as 0.50 plan which will bill the customer £0.50 per credit consumed per month.
14. Select the existing features circle, triangle and rectangle.

Update Environment Variables

1. Copy the Product ID from the General Settings tab and assign to NEXT_PUBLIC_PRODUCT_UUID in the .env file.
2. Go to Plans. Assign the Shapes User ID to NEXT_PUBLIC_SALABLE_USER_UUID and Shapes Board ID to NEXT_PUBLIC_SALABLE_BOARD_PLAN_UUID.
3. Go to API Keys.
4. Copy the API Key that was generated on sign up and assign to SALABLE_API_KEY.
5. Run npm run dev

Create a Miro app

How to start locally

1. Sign in to Miro, and then create a Developer team under your user account.

2. Create an app in Miro.

• Click the Create new app button.
• On the Create new app modal, give your app a name, assign it to your Developer team, and then click Create.

3. Configure the app:

• In your account profile, go to Your apps, and then select the app you just created to access its configuration page.
• On the app configuration page, go to App Credentials, and copy the app Client ID and Client secret values: you'll need to enter these values in step 4 below.
• Go to App URL and enter the following URL: http://localhost:3000
• Lastly, go to Permissions, and select the following permissions:
  • board:read
  • board:write
  • identity:read

4. Open the .env file, and enter the app client ID and client secret values that you saved at the beginning of step 3 above.
5. Run npm run start to start developing.

When your server is up and running:

• Go to Miro.com.
• Make sure you're in your developer team and open a board.
• To start your app, click the app icon in the app toolbar on the left.