Mostrar detalles de la tarjeta

Resumen

Esta guía explica cómo mostrar de forma segura los detalles completos de la tarjeta (PAN, fecha de caducidad, nombre del titular y CVV2/dCVV2) con el SDK D1.

Tienes dos enfoques:

Obtener los detalles de la tarjeta y representarlos tú mismo en la interfaz de la aplicación del emisor.
Delegar la representación al SDK D1 para minimizar la exposición de datos.

Evita registros, análisis o informes de fallos que puedan capturar PAN, fecha de caducidad, nombre del titular o CVV2/dCVV2. Siempre borra los datos sensibles de la memoria tan pronto como ya no sean necesarios.

Experiencia de usuario

Opción 1: obtener los detalles de la tarjeta

En este enfoque, la aplicación del emisor llama a getCardDetails() para recuperar la información completa de la tarjeta y es responsable de renderizarla.

Para proteger la confidencialidad, el SDK D1 devuelve valores como matrices de bytes en lugar de cadenas de texto sin formato. Puedes recuperar:

PAN
Fecha de caducidad
Nombre del titular de la tarjeta (usuario final) — opcional
CVV2 o dCVV2

Diagrama de secuencia

Requisitos previos:

El usuario final y las tarjetas están registrados en D1.
El SDK D1 está correctamente inicializado.
La aplicación del emisor llamó a la API de inicio de sesión del SDK D1.

Integración del SDK D1

String cardID = ""; // id de tarjeta recibido desde el backend
D1Task.Callback<CardDetails> callback = new D1Task.Callback<CardDetails>() {
    @Override
    public void onSuccess(CardDetails cardDetails) {
        // manejar el objeto cardDetails del servidor, convertir el tipo de matriz de bytes a cadena
        String cardHolderName = null;
        String pan = new String(cardDetails.getPan(), StandardCharsets.UTF_8);
        String expiryDate = new String(cardDetails.getExpiryDate(), StandardCharsets.UTF_8);
        String cvv = new String(cardDetails.getCvv(), StandardCharsets.UTF_8);
        if (cardDetails.getCardHolderName() != null) {
            cardHolderName = new String(cardDetails.getCardHolderName(), StandardCharsets.UTF_8);
        }
        
        // borrar las variables de matriz de bytes del objeto cardDetails
        cardDetails.wipe();
    }
 
    @Override
    public void onError(D1Exception exception) {
        // Consulte la sección Integración del SDK D1 – Gestión de errores
    }
};

d1Task.getCardDetails(cardID, callback);

let cardID = "" // obtenido, por ejemplo, desde el servidor
d1Task.cardDetails(cardID) { cardDetails, error in
    if let error = error {
        // Consulte la sección Integración del SDK D1 – Gestión de errores
    } else if var cardDetails = cardDetails {
        // Proceder con los flujos subsiguientes, por ejemplo actualizar la interfaz de usuario
        print("Exp: \((String(data: cardDetails.expiryDate, encoding: .utf8) ?? ""))")
        print("CVV: \((String(data: cardDetails.cvv, encoding: .utf8) ?? ""))")
        print("Nombre: \(String(data: cardDetails.cardHolderName ?? Data(), encoding: .utf8) ?? "")")
        print("PAN: \(String(data: cardDetails.pan, encoding: .utf8) ?? ""))")

        // después de su uso, borrar la matriz de bytes cardDetails
        cardDetails.wipe()
    }
}

Ideal para emisores que necesitan UI/UX personalizada y control total sobre el ciclo de vida de la representación. Asegúrate de minimizar los tiempos de permanencia en memoria y llama a wipe() inmediatamente después de su uso.

Opción 2: delegar la visualización al SDK D1

Para reducir la exposición del PAN, usa displayCardDetails. A diferencia de getCardDetails, esta API no devuelve datos de la tarjeta. En su lugar, pasas componentes de UI mediante CardDetailsUI, y el SDK D1 establece su contenido de texto de forma segura. La aplicación del emisor mantiene el control total del estilo y el diseño.

CardDetailsUI proporciona:

setPanMaskCharacter para establecer el carácter de máscara del PAN para maskCardDetails (por defecto: *).
setPanSeparatorCharacter para establecer el separador del PAN cada 4 dígitos (por defecto: espacio).
setExpiryDateFormat para establecer el formato de la fecha de caducidad (por defecto: MM/YY).
insecureCopyToClipboard para copiar el PAN al portapapeles del sistema. No recomendado.

Los siguientes valores pueden mostrarse:

PAN
Fecha de caducidad
Nombre del titular de la tarjeta (usuario final) — opcional
CVV2 o dCVV2

Diagrama de secuencia

Requisitos previos:

El usuario final y las tarjetas están registrados en D1.
El SDK D1 está correctamente inicializado.
La aplicación del emisor llamó a la API de inicio de sesión del SDK D1.

CardDetailsUI contiene DisplayTextView (Android) y D1DisplayTextField (iOS), que son subclases de los nativos TextView y UITextField. Para limitar la exposición, getText() está restringido.

Consulta las directrices de seguridad de Android para ofuscar DisplayTextView.

Integración del SDK D1

View view = null; // Infla tu layout aquí

DisplayTextView panTextView = null; // view.findViewById(R.id.panText);
DisplayTextView expiryDateTextView = null; // view.findViewById(R.id.expiryDateText);
DisplayTextView cvvTextView = null; // view.findViewById(R.id.cvvText);
DisplayTextView cardHolderNameTextView = null; // view.findViewById(R.id.cardHolderNameText);

CardDetailsUI cardDetailsUI = CardDetailsUI.getInstance(panTextView, expiryDateTextView, cvvTextView, cardHolderNameTextView);

String cardID = ""; // id de tarjeta recibido desde el backend
D1Task.Callback<Void> callback = new D1Task.Callback<Void>() {
    @Override
    public void onSuccess(Void ignore) {
        // La UI se actualiza
    }

    @Override
    public void onError(D1Exception exception) {
        // Consulte la sección Integración del SDK D1 – Gestión de errores
    }
};

mTask.displayCardDetails(cardID, cardDetailsUI, callback);

let panTextField = D1DisplayTextField()
let cvvTextField = D1DisplayTextField()
let expiryDateTextField = D1DisplayTextField()
let cardHolderNameTextField = D1DisplayTextField()

/* p. ej. coloca los campos de texto en el layout */

let cardDetailsUI = CardDetailsUI(panTextField: panTextField,
        expiryDateTextField: expiryDateTextField,
        cvvTextField: cvvTextField,
        cardHolderNameTextField: cardHolderNameTextField)

let cardID = "" // obtenido, por ejemplo, desde el servidor
d1Task.displayCardDetails(cardID, cardDetailsUI: cardDetailsUI) { error in
    if let error = error {
        // Consulte la sección Integración del SDK D1 – Gestión de errores
    } else {
        // La UI se actualiza
    }
}

insecureCopyToClipboard expone el PAN al portapapeles del sistema a nivel global y no se recomienda.

Enmascarar y mostrar detalles de la tarjeta

Para mayor comodidad, CardDetailsUI te permite enmascarar y mostrar los detalles de la tarjeta:

maskCardDetails enmascara los detalles.
showCardDetails muestra los detalles. Por seguridad, esto siempre vuelve a obtener los datos del servidor.

Mejor práctica: establece un temporizador corto (por ejemplo, 1 minuto) para volver a enmascarar automáticamente los detalles llamando a maskCardDetails y reducir la exposición.

// enmascarar los detalles de la tarjeta
cardDetailsUI.maskCardDetails();

D1Task.Callback<Void> callback = new D1Task.Callback<Void>() {
    @Override
    public void onSuccess(Void ignore) {
        // La UI se actualiza
    }

    @Override
    public void onError(D1Exception exception) {
        // Consulte la sección Integración del SDK D1 – Gestión de errores
    }
};

// mostrar los detalles de la tarjeta nuevamente
cardDetailsUI.showCardDetails(callback);

// enmascarar los detalles de la tarjeta
cardDetailsUI.maskCardDetails()

// mostrar los detalles de la tarjeta nuevamente
cardDetailsUI.showCardDetails() { error in
    if let error = error {
        // Consulte la sección Integración del SDK D1 – Gestión de errores
    } else {
        // La UI se actualiza
    }
}

AnteriorMostrar metadatos de la tarjeta SiguienteIntegrar la API D1

Última actualización hace 3 meses

¿Te fue útil?