Temporary token example app

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 repository to see the code.

Dependencies

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

• npm
• git

Set up the app

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

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

$
cd examples/temp-token

$
npm install

$
cp .env.template .env

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

$
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).