> For the complete documentation index, see [llms.txt](https://docs.payments.thalescloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payments.thalescloud.io/secure-card-display/es/implementar-la-visualizacion-segura-de-tarjetas/mostrar-detalles-de-la-tarjeta.md).

# Mostrar detalles de la tarjeta

## Descripción general

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

Tienes dos enfoques:

* Obtén los detalles de la tarjeta y represéntalos tú mismo en la interfaz de la aplicación emisora.
* Delega la representación al SDK D1 para minimizar la exposición de datos.

{% hint style="warning" %}
Evita registrar datos, análisis o informes de fallos que puedan capturar el PAN, la fecha de vencimiento, el nombre del titular o el CVV2/dCVV2. Borra siempre los datos sensibles de la memoria tan pronto como dejen de ser necesarios.
{% endhint %}

## Experiencia de usuario

<figure><img src="/files/abe421af6fc1858f681fc0e9f7318bd7b6e5102f" alt=""><figcaption></figcaption></figure>

## Opción 1: obtener los detalles de la tarjeta

En este enfoque, la aplicación emisora llama a `getCardDetails()` para recuperar la información completa de la tarjeta y es responsable de representarla.

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

* PAN
* Fecha de vencimiento
* 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á inicializado correctamente.
* La aplicación emisora llamó a la API de inicio de sesión del SDK D1.

<figure><img src="/files/33d16fded1b3988df050f221d6e39460ec27e737" alt=""><figcaption></figcaption></figure>

### Integración del SDK D1

{% tabs %}
{% tab title="Android" %}

```java
String cardID = ""; // id de tarjeta recibido del backend
D1Task.Callback<CardDetails> callback = new D1Task.Callback<CardDetails>() {
    @Override
    public void onSuccess(CardDetails cardDetails) {
        // gestionar 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) {
        // Consulta la sección Integración del SDK D1 – Gestión de errores
    }
};

d1Task.getCardDetails(cardID, callback);
```

{% endtab %}

{% tab title="iOS" %}

```kotlin
let cardID = "" // obtenido, p. ej., del servidor
d1Task.cardDetails(cardID) { cardDetails, error in
    if let error = error {
        // Consulta la sección Integración del SDK D1 – Gestión de errores
    } else if var cardDetails = cardDetails {
        // continúa con los flujos posteriores, p. ej., actualizar la UI
        print("Venc: \((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 usarlo, borra la matriz de bytes cardDetails
        cardDetails.wipe()
    }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Lo mejor para emisores que necesitan una UI/UX personalizada y control total sobre el ciclo de vida de la representación. Asegúrate de minimizar el tiempo en memoria y llama a `wipe()` inmediatamente después de usarlo.
{% endhint %}

## 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 la UI a través de `CardDetailsUI`, y el SDK D1 establece de forma segura el contenido de texto de estos. La aplicación emisora conserva el control total del estilo y la disposición.

`CardDetailsUI` proporciona:

* `setPanMaskCharacter` para establecer el carácter de enmascaramiento del PAN para `maskCardDetails` (predeterminado: `*`).
* `setPanSeparatorCharacter` para establecer el separador del PAN cada 4 dígitos (predeterminado: espacio).
* `setExpiryDateFormat` para establecer el formato de la fecha de vencimiento (predeterminado: `MM/AA`).
* `insecureCopyToClipboard` para copiar el PAN al portapapeles del sistema. No se recomienda.

Se pueden mostrar los siguientes valores:

* PAN
* Fecha de vencimiento
* 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á inicializado correctamente.
* La aplicación emisora llamó a la API de inicio de sesión del SDK D1.

<figure><img src="/files/2dfe498303ebfa247155f89703a849f6a961b6b2" alt=""><figcaption><p>Opción 2 — El SDK D1 representa los detalles de la tarjeta en los componentes de UI proporcionados.</p></figcaption></figure>

`CardDetailsUI` contiene `DisplayTextView` (Android) y `D1DisplayTextField` (iOS), que son subclases de las nativas [TextView](https://developer.android.com/reference/android/widget/TextView) y [UITextField](https://developer.apple.com/documentation/uikit/uitextfield). Para limitar la exposición, `getText()` está restringido.

Consulta las [directrices de seguridad de Android](/secure-card-display/es/integrar-el-sdk-de-d1/despliegue/directrices-de-seguridad/directrices-de-seguridad-de-android.md) para ofuscar `DisplayTextView`.

### Integración del SDK D1

{% tabs %}
{% tab title="Android" %}

```java
View view = null; // infla tu diseño 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 del 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) {
        // Consulta la sección Integración del SDK D1 – Gestión de errores
    }
};

mTask.displayCardDetails(cardID, cardDetailsUI, callback);
```

{% endtab %}

{% tab title="iOS" %}

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

/* por ejemplo, diseña los campos de texto */

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

let cardID = "" // obtenido, p. ej., del servidor
d1Task.displayCardDetails(cardID, cardDetailsUI: cardDetailsUI) { error in
    if let error = error {
        // Consulta la sección Integración del SDK D1 – Gestión de errores
    } else {
        // la UI se actualiza
    }
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
`insecureCopyToClipboard` expone el PAN al portapapeles de todo el sistema y no se recomienda.
{% endhint %}

### Enmascarar y mostrar los 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.

{% hint style="info" %}
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.
{% endhint %}

{% tabs %}
{% tab title="Android" %}

```java
// enmascara 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) {
        // Consulta la sección Integración del SDK D1 – Gestión de errores
    }
};

// muestra los detalles de la tarjeta de nuevo
cardDetailsUI.showCardDetails(callback);
```

{% endtab %}

{% tab title="iOS" %}

```kotlin
// enmascara los detalles de la tarjeta
cardDetailsUI.maskCardDetails()

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

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.payments.thalescloud.io/secure-card-display/es/implementar-la-visualizacion-segura-de-tarjetas/mostrar-detalles-de-la-tarjeta.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.