Headless SDK (Enrollment Web)

👍

SDK recomendado

Recomendamos o uso do Web Seamless SDK para uma experiência de integração tranquila. Essa opção oferece uma solução de pagamento flexível com componentes de IU pré-criados e opções de personalização.

O Headless SDK da Yuno permite que você se registre em métodos de pagamento e tokenize cartões, salvando-os para uso futuro.

As etapas a seguir descrevem a criação de um pagamento usando o Headless SDK da Yuno.

Requisitos

Para executar o processo de registro, você precisa fornecer os dados customer_session para iniciar o processo de registro em Etapa 3. Para adquirir o customer_session, você precisa:

1. Criar um cliente: É necessário que um cliente se registre em pagamentos. Use o botão Criar o cliente para criar novos clientes. Na resposta, você receberá o cliente idque você usa para criar a sessão do cliente.
2. Criar a sessão do cliente: Use o cliente id e o Criar sessão do cliente para receber o endpoint customer_session.

Etapa 1: Inclua a biblioteca em seu projeto

Antes de prosseguir com a implementação do Headless SDK , consulte a Visão geral da integração do SDK para obter instruções detalhadas sobre como integrar adequadamente o SDK ao seu projeto.

O guia de integração fornece três métodos flexíveis:

1. Inclusão direta de scripts HTML
2. Injeção dinâmica de JavaScript
3. Instalação do módulo NPM

Escolha o método de integração que melhor se adapte ao seu fluxo de trabalho de desenvolvimento e aos requisitos técnicos. Depois de concluir a integração do SDK, você pode prosseguir com as etapas a seguir para implementar a funcionalidade de registro sem cabeça.

📘

Biblioteca TypeScript

Se você estiver usando TypeScript, a Yuno fornece uma biblioteca que pode ser usada para ver todos os métodos disponíveis no Yuno Web SDK.

Etapa 2: Initialize Headless SDK com a chave pública

Em seu aplicativo JavaScript, crie uma instância do Yuno fornecendo uma classe PUBLIC_API_KEY.

const yuno = await YunoinitializePUBLIC_API_KEY);

📘

Credenciais

Consulte a página de credenciais para obter mais informações: https://docs.y.uno/reference/authentication

Etapa 3: Criar uma sessão de cliente

Para iniciar o processo de registro, você precisa fornecer os dados customer_session. Primeiro, você precisa criar um cliente. Você precisa de um cliente para registrar os pagamentos. Use o botão Criar o cliente para criar novos clientes. Na resposta, você receberá o cliente idque você usa para criar a sessão do cliente.

Depois de criar o cliente, você pode criar a sessão do cliente. Usar o cliente id e o Criar sessão do cliente endpoint. O customer_session será fornecido na resposta. Você precisa de um novo customer_session toda vez que você se inscrever em um novo método de pagamento.

Etapa 4: Crie um objeto de método de pagamento de registro

Você precisa de um objeto de método de pagamento de registro para definir a integração do Headless SDK para registro. Você pode criar um objeto usando o endpoint Enroll Payment Method (Registrar método de pagamento ). Ao criar o objeto de método de pagamento, você precisa definir em qual método de pagamento seu cliente pode se inscrever. Atualmente, somente CARD está disponível para o Headless SDK.

🚧

Verificar cartão

Se quiser verificar os cartões (autorização de valor zero) antes da inscrição, você precisará fornecer o verify ao criar o objeto de método de pagamento para a sessão do cliente.

Etapa 5: Inicie o processo de registro

Em seguida, você iniciará o processo de checkout usando o apiClientEnroll fornecendo os parâmetros de configuração necessários.

Parâmetros

Configure o registro com as seguintes opções:

const apiClientEnroll = yuno.apiClientEnroll({
  country_code: "CO",
  customer_session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3"
});

Etapa 6: Gerar um token de cofre

Depois de coletar todas as informações do usuário, você pode iniciar o registro. Primeiro, você precisa criar um vaulted_token usando a função apiClientEnroll.continueEnrollment. Como se trata de uma função assíncrona, você pode usar try/catch para garantir que você tratará corretamente os erros acionados. O exemplo a seguir mostra como criar um vaulted_token:

const vaultedTokenResponse = await apiClientEnroll.continueEnrollment({
  customer_session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3",
  payment_method: {
    type: "CARD",
    card: {
      detail: {
        expiration_month: 11,
        expiration_year: 25,
        number: "4111111111111111",
        security_code: "123",
        holder_name: "ANDREA B",
        type: "DEBIT"
      }
    },
    customer: {
    }
  }
});

Depois de registrar o novo cartão, você receberá o vaulted_tokenque você pode usar para fazer pagamentos no futuro sem solicitar as informações do cartão do cliente. O bloco de código a seguir mostra um exemplo de uma resposta da função apiClientEnroll.continueEnrollment função:

{
 vaulted_token: "9104911d-5df9-429e-8488-ad41abea1a4b",
 customer: {
   session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3"
 },
 status: "ENROLLED"
}

📘

Valores de status possíveis

O status pode ter um dos seguintes valores:

• CREATED
• EXPIRED
• REJECTED
• READY_TO_ENROLL
• ENROLL_IN_PROCESS
• UNENROLL_IN_PROCESS
• IN_PROCESS
• ENROLLED
• DECLINED
• CANCELED
• ERROR
• UNENROLLED

📘

Aplicativo de demonstração

Além dos exemplos de código fornecidos, você pode acessar o aplicativo de demonstração para obter uma implementação completa dos SDKs da Yuno.

Mantenha-se atualizado

Acesse o changelog para obter as atualizações mais recentes do SDK e o histórico de versões.