Example Plain Customer Cards

This repo is for a dummy backend which enables the building, testing and demoing of Plain Customer Cards.

The cards are generally static with only a few parts changing (such as timestamps).

Example cards

Each card has a card key that can be used when creating a Customer Card Config in your settings.

customer-details

Full URL: https://example-customer-cards.plain.com/?cardKey=customer-details

last-order

Full URL: https://example-customer-cards.plain.com/?cardKey=last-order

latest-invoice

Full URL: https://example-customer-cards.plain.com/?cardKey=latest-invoice

sentry

Full URL: https://example-customer-cards.plain.com/?cardKey=sentry

subscription-status

Full URL: https://example-customer-cards.plain.com/?cardKey=subscription-status

usage

Full URL: https://example-customer-cards.plain.com/?cardKey=usage

Trying the example cards

Go to Plain, log in and go to your workspace Settings → Customer Cards. Then create a new customer card with the following values:

• Title: you can enter whatever you'd like, this will be shown in the Customer Panel
• Card key: One of the card keys from above, or you can find in src/example-cards/. Not sure what to pick? Try subscription-status or last-order.
• Default TTL: you can enter whatever you like (for example 15 seconds for a short TTL)
• URL: https://example-customer-cards.plain.com/?cardKey={{CARD_KEY}} replacing {{CARD_KEY}} with the key you chose above.

Building your own Plain Customer Cards

Read our documentation on the topic:

• Building a Customer Card API: detailed documentation on how to implement an API
• Plain UI Components: detailed documentation about each component

Development

Adding a new example card

To add a new card:

1. Add it to ./src/example-cards folder
2. Import it in the index file
3. Open a PR and use the preview URL to test

Running locally

Run the following command to run the server:

npm run start

This will start up the API on http://localhost:3000

Then you'll need to use something like ngrok or localtunnel to get a public URL which Plain can call.

Ngrok:

ngrok http 3000

localtunnel:

lt --port 3000