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

<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

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

/* ===== 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

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

Response Example

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

The expires in 60 secondsaccessUrl, ensuring security.

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