> 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.


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.moneycollect.com/docs/wallet/card-issuing/show-card-pan-via-html-iframe.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.