Elementos y almacén de tarjetas para la web

initElements abre una experiencia de credenciales enfocada sin necesidad del Widget de Pago. Úselo para almacenar una tarjeta, iniciar Click to Pay o lanzar una billetera nativa configurada.

Seleccione un tipo de ElementosPreguntar a Athia sobre esto#

Almacene una tarjetaPreguntar a Athia sobre esto#

await DeunaSDK.initElements({
  orderToken,
  userInfo: {
    firstName: 'Ada',
    lastName: 'Lovelace',
    email: 'ada@example.com',
  },
  types: [{name: 'vault'}],
  callbacks: {
    onSuccess: (credential) => useCredentialResult(credential),
    onError: ({type, metadata}) => showRecovery(type, metadata.code),
    onClosed: () => restorePaymentMethods(),
    onCardBinDetected: ({cardBin, cardBrand}) => updateCardOffers(cardBin, cardBrand),
    onInstallmentSelected: ({installmentPlanOptionId}) => rememberPlan(installmentPlanOptionId),
  },
});

Flujo de experienciaPreguntar a Athia sobre esto#

Pre-cargue de ElementosPreguntar a Athia sobre esto#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
  preloadWidgets: [
    {
      widget: 'elements',
      params: {
        types: [{name: 'vault'}],
        language: 'en',
        callbacks,
      },
    },
  ],
});

// Add the order or user context and reveal the prepared experience.
await DeunaSDK.initElements({orderToken, userToken});

Los parámetros de inicialización y la llamada posterior se combinan mediante el SDK. Coloque la configuración estable en la entrada de pre-carga y los tokens más recientes en initElements.

ParámetrosPreguntar a Athia sobre esto#

Tokenización o compra.Preguntar a Athia sobre esto#

El comportamiento de la tarjeta de crédito Elements es compatible con tokenize o purchase:

behavior: {
  paymentMethods: {
    creditCard: {
      flow: 'tokenize',
    },
  },
}

Uso tokenize cuando el flujo del comerciante solo necesita un dato de autenticación reutilizable, utilice purchase Solo con la configuración y los parámetros necesarios para el comerciante. El backend será el responsable de determinar cómo se utilizarán las credenciales.

Carteras nativasPreguntar a Athia sobre esto#

Verifique la disponibilidad antes de mostrar el botón, y luego inicie el tipo correspondiente directamente a partir de la acción del cliente:

const wallets = await DeunaSDK.getWalletsAvailable({orderToken, userInfo});
applePayButton.hidden = !wallets.includes('APPLE_PAY');

applePayButton.addEventListener('click', () => {
  DeunaSDK.initElements({
    orderToken,
    userInfo,
    types: [{name: 'APPLE_PAY'}],
    callbacks,
  });
});

Ver Disponibilidad de billetera para valores de plataforma, almacenamiento en caché y resolución de problemas.

Modos integrado y controladoPreguntar a Athia sobre esto#

Uso mode: 'target', targety onResize para una experiencia integrada. Cuando su página es la responsable de la acción principal, configure hidePayButton: true, llamar isValid(), luego espera submit(). Deshabilitar el botón principal mientras la operación está en curso.

await DeunaSDK.initElements({
  orderToken,
  types: [{name: 'vault'}],
  mode: 'target',
  target: '#credential-entry',
  hidePayButton: true,
  callbacks: {
    onResize: ({height}) => {
      document.querySelector('#credential-entry').style.height = `${height}px`;
    },
    onSuccess: useCredentialResult,
    onError: showRecovery,
  },
});

Migrar campos seguros heredadosPreguntar a Athia sobre esto#

La documentación anterior describía modularPaymentCredentialsStorage, mountPaymentCredentialStorage, y una sdk.deuna.io Paquete de campos seguros. Estos nombres no están presentes en los tipos públicos o en la implementación actual del Web SDK auditado. No copie los fragmentos de inicialización o montaje de campos heredados en una nueva integración.

La superficie de credenciales mantenida se aloja a través de Elements. DeunaSDK.initElements:

Los elementos alojados son responsables de la interfaz de usuario para la información sensible. El SDK público actual no expone una API de uno a uno para montar cada campo de tarjeta en nodos DOM independientes del comerciante. Si su alcance PCI o diseño de producto aprobado requiere la propiedad independiente de los campos, detenga la migración y confirme una arquitectura compatible con DEUNA antes de la implementación.

Al migrar, ejecute la experiencia antigua y nueva únicamente en cohortes de prueba controladas separadas. Nunca inicie ambas contra la misma acción del cliente o intente copiar valores de los marcos seguros heredados en los elementos.

Seguridad y operacionesPreguntar a Athia sobre esto#

• No leer, reflejar ni registrar los datos de las tarjetas mostrados por Elements.
• Enviar el resultado únicamente a la operación de backend del comerciante que lo necesite.
• Cerrar las sesiones del comerciante y el estado del SDK cuando el cliente cierra sesión.
• Reconciliar un pedido después de una interrupción en el flujo de compra.
• Trate onSuccess Como resultado para el cliente, no se permite el uso de credenciales fuera del consentimiento del cliente y del contrato con el comerciante.

Referencias relacionadasPreguntar a Athia sobre esto#