This guide covers setting up a demo app that uses the EmbeddedMethod UI and custom API calls to drive the temporary token flow. The demo app walks the user through a checkout experience with an interactive guide that updates while the transaction processes.

Visit the repo to see the code.

Temp Token Demo App

Dependencies

Before you begin, make sure you have the following installed on your machine:

Set up the app

Run these commands in your terminal to configure the demo app on your local machine:

1

Clone the repo

git clone https://github.com/payabli/examples
2

Navigate to the app directory

cd examples/temp-token
3

Install the dependencies

npm install
4

Copy the environment template

cp .env.template .env
5

Fill in your environment variables

Open the .env file in your code editor. Set PAYABLI_API_TOKEN to your Payabli API token and PAYABLI_API_PAYPOINT to your Payabli API paypoint:

# your Payabli API token
PAYABLI_API_TOKEN="123...XYZ"
# your Payabli API paypoint
PAYABLI_API_PAYPOINT="123...XYZ"
6

Start the development server

npm run dev

Use the app

The app is a single-page application with a sidebar that contains an interactive guide. When you click the “Confirm order” button to complete the checkout, the state of the transaction will update the sidebar guide. Inside of the guide, there are example code snippets that you can copy and paste to help you get started using the temporary token flow in your own applications.

The app has two ways to toggle the sidebar:

  • Click the button on the bottom-left (desktop) or bottom-right (mobile) of the screen with a book icon.
  • Press the Ctrl + K key combination on your keyboard (desktop only).

Was this page helpful?