Create Your First Payment

In this section, you will create your first payment in less than 5 minutes. We will guide you on:

Downloading the example project
Installing the requirements for the project
Setting the environment variables
Running the project in your local host
Making the payment
Checking the dashboard for the payment response

After completing the steps in this guide, you will be ready to start building your full integration.

Step 1: Make sure you have Git and Node installed

Before you can download our project, you need to make sure you have previously installed Git and Node on your computer.

Please refer to the git Getting Started - Installing Git guide if you have never worked with Git before.

Please refer to the Node download guide if you have never worked with Node before.

Step 2: Download the project

Now you need to download the project or clone our Github repository. This project includes Yuno's web full-SDK and a simple implementation of the front end.

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

Step 3: Set environment variables

Once you have downloaded the project, you need to set up your credentials to authenticate with our API. Edit the file .env in the root folder and set the ACCOUNT_CODE, PUBLIC_API_KEY, and PRIVATE_SECRET_KEY with the information you got in the dashboard in the Set Up Your Account section. Save the file.

ACCOUNT_CODE=your_account_code
PUBLIC_API_KEY=your_public_api_key
PRIVATE_SECRET_KEY=your_private_secret_key

Step 4: Run the project

Go to the project folder and install Node modules using the following command:

> npm install

Then, run the project using the following command:

> npm start

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

http://localhost:8080

Step 5: Make your first payment

After accessing the running project on the browser, you will see a basic checkout with the Card payment method you set up on the Set Up Your Account guide. Select the Card option, and use the following test card information to create your first successful payment.

Cardholder name: Harry Potter
Card Number: 4242 4242 4242 4242
Expiration Date: 09/29
CVV: 123

Step 6: Check the response in the dashboard

After you create the payment, it will be automatically processed. You can check the payment information by accessing the Payments section on the left sidebar of the dashboard. Look for the payment you created in the previous step and click on the eye icon at the right of the register. You will have access to the payment details.

Congratulations!

Now you have made your first payment using Yuno. Please continue with the resources below to complete your integration and add more features.