Seamless SDK (Pago Web)

Siga esta guía paso a paso para implementar y habilitar la funcionalidad de pago Seamless Web SDK de Yuno en su aplicación.

👍

SDK recomendado

Recomendamos utilizar el Web Seamless SDK 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.

📘

¿Debería utilizar el Seamless SDK Lite o Full?

Utilice el Full SDK y sin interrupciones para la lista automática de métodos de pago y la visualización independiente de los botones de pago (como PayPal). El Lite SDK y sin interrupciones le ofrece mayor control sobre cómo se muestran y organizan los métodos de pago.

Paso 1: Incluya la biblioteca 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 requisitos técnicos. Tras completar la integración del SDK, puede continuar con los siguientes pasos para implementar la funcionalidad Seamless.

📘

Biblioteca de TypeScript

Si estás usando TypeScript, Yuno ofrece una librería que proporciona acceso a todos los métodos disponibles en Yuno Web SDK.

Paso 2: Initialize el SDK con la clave pública

Inicialice el SDK de Yuno en su aplicación JavaScript proporcionando un código válido 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 pago

📘

Si tu flujo de trabajo requiere enviar el additional_data objeto, se puede enviar como parte de la sesión de pago.

Para inicializar el flujo de pago, cree un nuevo checkout_session utilizando la función del endpoint Crear sesión de pago endpoint.

• En primer lugar, cree un cliente o recupere un ID de cliente existente
• Inclúyelo al crear el checkout_session

💳

Para controlar la autorización y la captura con tarjetas, incluye payment_method.detail.card.capture En la sesión de pago: establecer false autorizar únicamente, true capturar inmediatamente.

Parámetros clave

📘

onPaymentMethodSelect Evento

Para todas las APM, incluidas Google Pay, Apple Pay y PayPal, onPaymentMethodSelected se activa en cuanto el cliente elige el método de pago (antes de que comience el flujo de pago). Definir onPaymentMethodSelected en el startSeamlessCheckout antes mountSeamlessCheckout.

📘

Pantalla de Google Pay y Apple Pay

A partir de la versión 1.5 del SDK, Google Pay y Apple Pay aparecen como botones directos en lugar de botones de opción en la lista de métodos de pago . Se muestran por separado de otros métodos de pago .

Paso 4: Iniciar el proceso de pago

Utiliza la siguiente configuración para ofrecer a sus clientes una experiencia de pago fluida y fácil de usar:

yuno.startSeamlessCheckout({
  checkoutSession: "438413b7-4921-41e4-b8f3-28a5a0141638",
  elementSelector: "#root",
  countryCode: "US",
  language: "en-US",
  showLoading: true,
  issuersFormEnable: true,
  showPaymentStatus: true,
  onLoading: (args) => console.log(args),
  renderMode: {
    type: "modal",
    elementSelector: {
      apmForm: "#form-element",
      actionForm: "#action-form-element",
    },
  },
  card: {
    type: "extends",
    styles: "",
    cardSaveEnable: false,
    texts: {},
    cardNumberPlaceholder: "Enter card number", // Optional: Custom placeholder text
    hideCardholderName: false, // Optional: Set to true to hide cardholder name field
  },
  texts: {},
  async yunoCreatePayment(oneTimeToken, tokenWithInformation) {
    await createPayment({ 
      oneTimeToken, 
      checkoutSession,
      vault_on_success: true 
    });
    yuno.continuePayment({ showPaymentStatus: true });
  },
  yunoPaymentMethodSelected(data) {
    console.log("Payment method selected:", data);
  },
  yunoPaymentResult(data) {
    console.log("Payment result:", data);
    yuno.hideLoader();
  },
  yunoError(error, data) {
    console.error("An error occurred:", error);
    yuno.hideLoader();
  },
});

Al utilizar startSeamlessCheckoutespecifique los callbacks para gestionar los pagos. También puede personalizar la interfaz de pago mediante la opción texts objetos.

Parámetros

Configura el pago sin fisuras con las siguientes opciones:

📘

Transacciones iniciadas por clientes y comerciantes

Los pagos pueden ser iniciados por el cliente (CIT) o por el comerciante (MIT). Encontrará más información sobre sus características en Credenciales almacenadas.

El paso a paso de esta página se refiere a una transacción iniciada por el cliente sin la opción de recurrencia. Normalmente, se utiliza en compras únicas por Internet, compras en tiendas, retiradas en cajeros automáticos, etc.

Paso 5: Montar el SDK

Para presentar el proceso de pago según el método de pago seleccionado, utiliza la función yuno.mountSeamlessCheckout() . Este paso garantiza que el SDK esté montado correctamente en el elemento HTML elegido.

yuno.mountSeamlessCheckout({
  paymentMethodType: PAYMENT_METHOD_TYPE,
  vaultedToken: VAULTED_TOKEN,
});

Consulte la página de tipos de pago para ver la lista completa de tipos de métodos de pago que puede utilizar al montar el SDK.

El objeto vaultedToken es opcional. Representa un método de pago previamente inscrito. Si proporciona el vaultedToken, el usuario no estará obligado a proporcionar nuevamente la información de pago ya que la misma fue proporcionada en una transacción anterior.

Después del montaje, debe iniciar el flujo de pago llamando a yuno.startPayment(). Si omite esta llamada, el formulario de pago no se abrirá.

Paso 6: Iniciar el flujo de pago (Obligatorio)

Llamar yuno.startPayment() inmediatamente después yuno.mountSeamlessCheckout() para abrir la interfaz de usuario del método de pago seleccionado:

yuno.mountSeamlessCheckout({
  paymentMethodType: PAYMENT_METHOD_TYPE,
  vaultedToken: VAULTED_TOKEN,
});

yuno.startPayment();

Alternativamente, puede activar el inicio a partir de una acción del usuario, como un clic en un botón:

const payButton = document.querySelector('#button-pay');
payButton.addEventListener('click', () => {
  yuno.startPayment();
});

📘

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. La demo app incluye ejemplos de trabajo de todos los SDK de Yuno y puede ser clonada desde el repositorio de GitHub.

Montar botones externos

Puedes utilizar la mountExternalButtons para mostrar los botones de Google Pay y Apple Pay en ubicaciones personalizadas dentro de tu interfaz de usuario. Esto te permite controlar dónde se muestran estos botones.

await yuno.mountExternalButtons([
  {
    paymentMethodType: 'APPLE_PAY',
    elementSelector: '#apple-pay',
  },
  {
    paymentMethodType: 'GOOGLE_PAY',
    elementSelector: '#google-pay',
  },
]);

Parámetros

Botones de desmontaje

Puedes desmontar un solo botón externo mediante el tipo de método de pago :

yuno.desmontarBotónExterno('APPLE_PAY');

O desmonta todos los botones externos a la vez:

yuno.unmountAllExternalButtons();

Inscribir pago en un flujo continuo

Puedes registrar pago (tarjetas de tienda para uso futuro) directamente durante el pago sin interrupciones configurando payment_method.vault_on_success = true en el Creación de sesión de pago.

En vault_on_success está configurado para true:

• pago se inscribirá automáticamente si el pago es SUCCEEDED
• Si el pago no pago realiza correctamente, no se producirá ningún salto.
• pago incluirá un vaulted_token que puedes utilizar para futuras transacciones

Ejemplo:

{
    "account_id": "...",
    ...
    "payment_method": {
        "vault_on_success": true
    }
}

📘

Requisitos para el salto

Para generar y recibir un vaulted_token cuando vault_on_success = true, el pago hacer referencia a un cliente existente de Yuno a través de customer_payer.id en la sesión de pago. Crear o enviar los datos del cliente en línea dentro del pago pedido al cliente en nuestro lado, por lo que no se producirá ningún almacenamiento.

Para obtener más información sobre cómo registrar pago , consulta Registrar pago .

Mantente al día

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