Headless SDK (Inscripción Web)

👍

SDK recomendado

Recomendamos utilizar el Seamless SDK Web para una integración sin problemas. Esta opción ofrece una solución de pago flexible con componentes de interfaz de usuario predefinidos y opciones de personalización.

El Headless SDK de Yuno te permite inscribirte en métodos de pago y tokenizar tarjetas, guardándolas para su uso futuro.

Los siguientes pasos describen la creación de un pago usando el Headless SDK de Yuno.

Requisitos

Para ejecutar el proceso de inscripción es necesario proporcionar la customer_session para iniciar el proceso de inscripción en Paso 3. Para adquirir el customer_session, necesitas:

1. Crear un Cliente: Se requiere que un cliente se inscriba en los pagos. Utiliza la función Crear Cliente endpoint para crear nuevos clientes. En la respuesta recibirás el cliente id, que utiliza para crear la sesión del cliente.
2. Crear la sesión del cliente: Utilizar al cliente id y el Crear Sesión de Cliente para recibir el customer_session.

Paso 1: Incluya la biblioteca en tu proyecto

Antes de proceder a la implementación Headless SDK , consulta la Visión general de la integración del SDK para obtener instrucciones detalladas sobre cómo integrar correctamente el SDK en tu proyecto.

La guía de integración ofrece tres métodos flexibles:

1. Inclusión directa de secuencias de comandos HTML
2. Inyección dinámica de JavaScript
3. Instalación del módulo NPM

Elija el método de integración que mejor se adapte a su flujo de trabajo de desarrollo y a sus requisitos técnicos. Una vez completada la integración del SDK, puede continuar con los siguientes pasos para implementar la funcionalidad de inscripción Headless.

📘

Biblioteca de TypeScript

Si estás usando TypeScript, Yuno proporciona una librería que puedes usar para ver todos los métodos disponibles en Yuno Web SDK.

Paso 2: Inicialice el SDK Headless con la clave pública

En su aplicación JavaScript, cree una instancia del archivo Yuno proporcionando un PUBLIC_API_KEY.

const yuno = await YunoinitializePUBLIC_API_KEY);

📘

Credenciales

Para más información, consulte la página de credenciales: https://docs.y.uno/reference/authentication

Paso 3: crear una sesión de cliente

Para iniciar el proceso de inscripción es necesario proporcionar el customer_session. En primer lugar, debe crear un cliente. Necesita un cliente con el que inscribir los pagos. Utiliza la función Crear Cliente endpoint para crear nuevos clientes. En la respuesta recibirás el cliente id, que utiliza para crear la sesión del cliente.

Después de crear el cliente, puede crear la sesión de cliente. Utilizar el cliente id y el Crear Sesión de Cliente endpoint. La dirección customer_session se proporcionará en la respuesta. Necesita un nuevo customer_session cada vez que te inscribes en un nuevo método de pago.

Paso 4: Crear un objeto de método de pago inscripción

Necesita un objeto de método de pago de inscripción para establecer la integración de Headless SDK para la inscripción. Puede crear uno utilizando el endpoint Método de pago de inscripción. Al crear el objeto de método de pago, debe definir en qué método de pago puede inscribirse su cliente. Actualmente, sólo CARD está disponible para Headless SDK.

🚧

Verificar tarjeta

Si desea verificar las tarjetas (autorización de valor cero) antes de la inscripción, debe proporcionar la información siguiente verify al crear el objeto de método de pago para la sesión del cliente.

Paso 5: Iniciar el proceso de inscripción

A continuación, iniciará el proceso de pago utilizando la función apiClientEnroll proporcionando los parámetros de configuración necesarios.

Parámetros

Configura la inscripción con las siguientes opciones:

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

Paso 6: Generar un token bóveda

Una vez recopilada toda la información del usuario, puede iniciar la inscripción. En primer lugar, debe crear un vaulted_token utilizando la función apiClientEnroll.continueEnrollment. Como es una función asincrónica, puedes usar try/catch para asegurarse de que gestionará correctamente los errores desencadenados. El siguiente ejemplo muestra cómo crear un 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: {
    }
  }
});

Después de inscribir la nueva tarjeta, recibirá el vaulted_tokenque puede utilizar para realizar pagos en el futuro sin solicitar los datos de la tarjeta de tu cliente. El siguiente bloque de código muestra un ejemplo de respuesta de la aplicación apiClientEnroll.continueEnrollment función:

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

📘

Posibles valores de estado

El objeto status puede tener uno de los siguientes valores:

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

📘

App Demo

Además de los ejemplos de código proporcionados, puedes acceder a la Demo App para una implementación completa de los SDK de Yuno.

Mantente al día

Visita el registro de cambios para ver las últimas actualizaciones del SDK y el historial de versiones.