monetization-with-stripe

Monetization with Stripe Miro App

This app shows how to implement monetization using a paywall with Stripe to ask users to make a one time payment for a feature.

👨🏻‍💻 App Demo

monetization-with-stripe-demo.mp4

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Stripe Prerequisites
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro Web SDK
  • on(icon:click)
  • openPanel(options)

🛠️ Tools and Technologies

• React
• TypeScript
• Next.js
• Stripe CLI

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• You've installed the Stripe CLI
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.

📖 Associated Developer Tutorial

To view a more in depth developer tutorial of this app (including code explanations) see the Monetization with Miro and Stripe tutorial on Miro's Developer documentation.

✅ Stripe Prerequisites

1. Create a account or login on Stripe

2. Create a payment link. From the Payment links page, click on New in the top right corner. Next, under Product click on the text input field add a test product, as shown in the screenshot below.

   

Next, add in details such as the name of the product, a description, and the price of the product. When you are done, click on Add Product as shown in the screenshot below.

This is all test data, so you don't have to worry too much about the specifics.

3. Once you click on Add Product it will take you back to the Payment Links page, and you should have a new Link URL as shown in the screenshot below.

Copy that new link and update it in the Paywall Component file.

4. For development, in your terminal run the following commands (you will need the Stripe CLI installed):
   1. stripe login
   2. stripe listen --forward-to localhost:3000/api/payment-handler
   3. Copy the webhook signing secret from console output. You will need this to update your .env file.

🏃🏽‍♂️ Run the app locally

1. Rename the '.env.example' file to .env and then add your API keys. You will need to create a Miro app and then add in the client ID and client secret along with Stripe API keys.

2. Run npm install to install dependencies.

3. Run npm start to start developing.
   Your URL should be similar to this example:

   http://localhost:3000
   

4. Open the app manifest editor by clicking Edit in Manifest. \

   In the app manifest editor, configure the app as follows and click save:

# See https://developers.miro.com/docs/app-manifest on how to use this
appName: Monetization with Stripe
sdkVersion: SDK_V2
sdkUri: http://localhost:3000
redirectUris: http://localhost:3000/api/redirect/
scopes:
  - boards:read
  - boards:write

5. Go to Redirect URI for OAuth2.0, click Options. for the localhost path.
   From the drop-down menu select Use this URI for SDK authorization.

6. Go back to your app home page, and under the Permissions section, you will see a blue button that says Install app and get OAuth token. Click that button. Then click on Add as shown in the video below.

⚠️ We recommend to install your app on a developer team while you are developing or testing apps.⚠️

install-app.mov

7. Go to your developer team, and open your boards.
8. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say More apps.
9. Search for your app Monetization with Stripe or whatever you chose to name it. Click on your app to use it, as shown in the video below.

search-for-app.mov

🗂️ Folder structure

.
|  └── components
|     GenerallyAvailableFeature.tsx <-- React with features that you do not have to pay for.
|     PaidFeature.tsx <-- React file for the paid feature. It just places a sticky on the board.
|     PaywallNotice.tsx <-- React file for the frontend if the paywall. It has buttons to pay and bring you to Stripe.
│  └── pages
│      _app.tsx <-- Initializes React app.
│      _document.tsx <-- Initializes Next.js app.
│      index.tsx <-- Main logic for React app including authorization + app instructions.
│      └── api
│          └── payment-handler.ts <-- logic to store credentials of who has paid for a feature.
│          └── redirect.ts <-- logic to handle redirect URL + OAuth flow.
│  └── public
│      └── favicon.ico <-- Icon for the web app.
│  └── styles
│      └── globals.css <-- CSS styles for the app.
│  └── utils
│      └── storage.ts <-- Implementation of storage logic. Will create a file `store.json` with userID of who has paid.
└── initMiro.ts <-- This is where the Node Client is initialized.

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.