Crie seu primeiro Payment com o SDK

Este guia mostra como criar seu primeiro pagamento usando o Yuno SDK. Você aprenderá a:

Configure e execute o projeto de exemplo
Faça um pagamento de teste usando o SDK

O Yuno SDK permite integrar métodos de pagamento em seu aplicativo da Web e processar pagamentos com segurança. Seguindo este guia, você terá seu primeiro pagamento pronto e funcionando em menos de 5 minutos.

Etapa 1: Instalar os pré-requisitos

Antes de começar, verifique se você tem os seguintes itens instalados em seu sistema:

Git - Necessário para fazer o download do projeto. Se você não tiver usado o Git antes, siga o guia de instalação do Git
Node.js - Necessário para executar o projeto. Se você nunca usou Node.js antes, faça o download no site oficial do Node.js

Etapa 2: Faça o download do projeto

Faça o download do projeto de exemplo ou clone o repositório do GitHub. O projeto contém o Web SDK da Yuno e um exemplo de implementação de front-end.

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

📘
Exemplo de integração de SDK
A Yuno fornece um aplicativo pronto para uso criado com o Web SDK. Explore este projeto para ver como é rápido e fácil fazer a integração com o Yuno.

Etapa 3: Configurar variáveis de ambiente

Para autenticar com a API do Yuno, você precisa configurar suas credenciais no projeto. Siga estas etapas:

Abra o .env na pasta raiz
Adicione as seguintes variáveis de ambiente com suas credenciais da seção Developers do painel:
- ACCOUNT_CODE(será exibido como account_id no painel)
- PUBLIC_API_KEY
- PRIVATE_SECRET_KEY
Salvar o arquivo

ACCOUNT_CODE
PUBLIC_API_KEY
PRIVATE_SECRET_KEY

Etapa 4: Executar o projeto

Navegue até a pasta do projeto e instale as dependências necessárias Node.js executando:

> npm install

Em seguida, execute o projeto com o seguinte comando:

> npm start

Para acessar o aplicativo em execução, abra o navegador e acesse:

http://localhost:8080

(Observação: este é um URL de desenvolvimento local que só funcionará ao executar o aplicativo de demonstração localmente)

Etapa 5: Faça seu primeiro pagamento

Depois de acessar o projeto em execução no seu navegador, você verá uma página básica de checkout exibindo o método de pagamento com cartão configurado em Set Up Your Account. Para criar seu primeiro pagamento bem-sucedido:

Selecione a opção de pagamento com cartão
Insira as informações do cartão de teste fornecidas abaixo

Nome do titular do cartão: Harry Potter
Número do cartão: 4242 4242 4242 4242 4242
Data de expiração: 29/09
CVV: 123

Etapa 6: Visualize os detalhes do pagamento no Dashboard

Após enviar o pagamento, aguarde alguns segundos para que ele seja processado
Vá para a seção Payments (Pagamentos ) em seu painel
Encontre seu pagamento de teste na lista
Clique no ícone do olho para ver os detalhes completos do pagamento

Parabéns! Você criou com sucesso seu primeiro pagamento com o Yuno. Confira nossos outros guias para saber mais sobre a integração de recursos adicionais.