Demo App

To help you understand and check how the Yuno SDKs work, the Yuno team provides the Demo App. It provides implementation examples for all Yuno SDKs. Therefore, if you are having trouble running some SDK on your platform, you can check the working examples from the Demo App.

Step 1: Clone the repository

All files from the Demo App are available on a GitHub repository. To start using it, open your terminal, clone the repository, and change to the cloned directory:

> git clone https://github.com/yuno-payments/yuno-sdk-web.git
> cd yuno-sdk-web

Step 2: Update the environment variables

First, you need to provide some information to run the application properly. Create a .env file in the root folder and define the following variables with your information:

PORT=8080
YUNO_X_ACCOUNT_CODE=your_account_code
YUNO_PUBLIC_API_KEY=your_public_api_key
YUNO_PRIVATE_SECRET_KEY=your_private_secret_key
YUNO_API_URL=yuno-environment-url
YUNO_CUSTOMER_ID=the_customer_id

You can find account_code, public_apy_key, and private_secrete_key in Yuno Merchant Dashboard. Choose the Yuno_API_URL based on the current environment you are working on. You can choose between the sandbox and production URLs. Use the Create Customer endpoint to get the YUNO_CUSTOMER_ID.

Step 3: Start the Demo App

After defining the .env file, install all dependencies:

> npm install

Now you are ready to run the application using the following command:

> npm start

To access the running application, open your browser and go to:

http://localhost:YOUR-PORT

Replace the Your-Port by the value defined in the .env file. Additionally, you can change the country by adding a query parameter named country to the URL with one of the country codes CO, BR, CL, PE, EC, UR, MX. The following example defines the URL to access an application running on the 8080 port and with Colombia as the country selected:

http://localhost:8080?country=CO

You will find a panel, as presented below, with all Yuno SDKs available by accessing the URL. Select the desired SDK to check its appearance and how it works.