> For the complete documentation index, see [llms.txt](https://docs.moneycollect.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.moneycollect.com/docs/wallet/card-issuing/show-card-pan-via-html-iframe.md).

# Show Card PAN via HTML (iframe)

### Overview of the Implementation Steps

1. Embed an iFrame in your application to securely display card data.
2. Host a custom CSS stylesheet at a publicly accessible URL to define card UI styling.
3. Generate a signed access URL via the API endpoint.
4. Load the signed URL dynamically inside the iFrame to securely display the card details.

#### Step 1: Embed an iFrame to Display Card Data

To securely display sensitive card data, embed an in your web or mobile app. This iFrame will dynamically load a card’s PAN, expiration date, and CVV via an API request.

Example: Adding an iFrame to your webpage

```html
<iframe
    id="card-data-iframe"
    src=""  <!-- The secure URL will be set dynamically -->
    frameborder="0"
    width="100%"
    height="250px">
</iframe>
```

#### Step 2: Create and Host a Custom CSS Stylesheet

To customize the card UI, create a CSS file and host it at a publicly accessible URL. This stylesheet will define how the card data appears inside the iFrame.

Example:

Skeleton HTML

```html
<div id="card-data">
  <div id="pan-div">
      <p id="pan-p">
          Card number: <span id="pan-value">1234 4567 1234 4161</span>
      </p>
  </div>
  <div id="expiry-div">
      <p id="expiry-p">
          Expiry date: <span id="expiry-value">02/28</span>
      </p>
  </div>
  <div id="cvv-div">
      <p id="cvv-p">
          CVV: <span id="cvv-value">001</span>
      </p>
  </div>
</div>
```

Custom CSS (`styles.css`)

```css
/* ===== Card Data Container ===== */
#card-data {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    width: 300px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* ===== PAN (Card Number) Section ===== */
#pan-div, #expiry-div, #cvv-div {
    margin-bottom: 10px;
}

#pan-value, #expiry-value, #cvv-value {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    padding: 5px;
    border-radius: 5px;
    background: #e9ecef;
    cursor: pointer;
}
```

Hosting the Stylesheet:

* Upload to your server or a cloud storage provider.`styles.css`
* Ensure the stylesheet is publicly accessible (e.g., ).`https://yourdomain.com/styles.css`

#### Step 3: Generate a Signed URL for the iFrame

To load the iFrame securely, request a signed access URL by calling the POST /services/v1/card/pan/{cardId}/reveal-html API endpoint.

Note: The field is optional. If provided, the accessUrl will be encrypted for enhanced security.

Request Body Example

```json
{
  "stylesheetUrl": "https://yourdomain.com/styles.css",
  "publicKey":<string>
}
```

Response Example

```json
{
  "code": "success",
  "msg": "success",
  "data": {
    "accessUrl": "https://secure.reap.com/card-display?token=abc123"
  }
}
```

The expires in 60 seconds`accessUrl`, ensuring security.

`publicKey`is optional, if provided the returned will be in encrypted format.`accessUrl`

### Encrypting your `accessUrl`

To decrypt: `publicKey`    `accessUrl`

1. Base64 Decode the message.
2. Decrypt using your private key.