Create Your First Payment With SDK

Welcome to the step-by-step guide to create your first payment using the Yuno SDK. In this section, we'll provide detailed instructions on how to set up and run the example project, as well as make your first test payment.

With the Yuno SDK, you'll be able to easily integrate payment methods into your web application and start processing payments quickly and securely. Follow each step carefully, and in less than 5 minutes, you'll be ready to make your first payment.

Step 1: Make sure you have Git and Node installed

Before you can download the Yuno project, make sure you have Git and Node installed on your computer.

Refer to the Getting Started - Installing Git guide if you have never worked with Git before. Also, check 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 the Github repository. This project includes Yuno's web full-SDK and a simple implementation of the frontend.

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

Step 3: Set up 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, set up the ACCOUNT_CODE, PUBLIC_API_KEY and PRIVATE_SECRET_KEY with the information you obtained from the dashboard in the Set Up Your Account section and 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 with 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

Once you have accessed 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 creating 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 to the right of the entry to access the payment details.

Now you have completed your first payment with Yuno. Continue with the provided resources to complete your integration and add more features.