Accessing sensitive card information

Mynt provides secure endpoints that enable cardholders to retrieve sensitive information such as PIN codes, card numbers, expiration dates, and CVV codes. These endpoints are designed with security as the primary focus, ensuring compliance with Payment Card Industry (PCI) standards while providing a seamless experience for end users.

By implementing these endpoints, your application can offer users access to their sensitive card details without compromising security or regulatory compliance. This capability enhances your application's utility while maintaining the strict security standards required for financial information.

PCI compliance requirements

The sensitive card information is classified under PCI regulations. To maintain compliance:

• Your application must not directly access, store, or process this sensitive data
• All sensitive information must be displayed through an iframe (web) or WebView (mobile)
• The sensitive information is retrieved directly from Mynt to the user's device

Strong customer authentication (SCA)

Before displaying sensitive information, users must complete Strong Customer Authentication within your application. This is a mandatory requirement under the Payment Services Directive 2 (PSD2) regulations.

Technical implementation

The endpoints support two categories of sensitive information:

1. Card Details (PAN): Card number, expiration date, and CVV
2. PIN Code: Available only for physical cards (not supported for virtual cards)

Endpoints

Mynt provides four distinct endpoints to support different platforms and information types:

Response structure

The endpoints return consistent response structures:
Card details response:

{
  "url": "URL intended to be loaded in an iframe or equivalent for mobile applications (webview for react-native)",
  "token": "auth-token-for-card-information"
}

PIN code response:

{
  "url": "URL intended to be loaded in an iframe or equivalent for mobile applications (webview for react-native)",
  "controlId": "auth-id-for-pin-access"
}

Web implementation

Displaying card details on web:

1. The Partner web application executes a GET request to the Partner backend api which in turn makes a request to Mynts partner-api, to the getSensitiveCardInfoDesktop endpoint, which returns a cardInfoResponse.
2. Render an iframe that points to cardInfoResponse.url with key added as a query parameter (the value 001 can be used in development).
3. Call the postMessage method on the contentWindow object on the iframe with the payload: { operation: 'view-pan', token: cardInfoResponse.token } and cardInfoResponse.url.
4. The iframe will display the sensitive card information.

React example:

// Example React component
const SensitiveCardInfo = () => {
  const { data: cardInfoResponse } = useDesktopCardPanInfo();
  
  const onIframeLoad = (event) => {
    event.currentTarget.contentWindow?.postMessage(
      { operation: 'view-pan', token: cardInfoResponse.token }, 
      cardInfoResponse.url
    );
  };
  
  if (!cardInfoResponse) return null;
  
  return (
    <iframe 
      src={`${cardInfoResponse.url}?key=001`} 
      onLoad={onIframeLoad} 
    />
  );
};

Displaying PIN code on web:

1. The Partner web application executes a GET request to the partner backend api which in turn makes a request to Mynts partner-api, to the getCardPinDesktopUrl endpoint which returns a cardPinResponse.
2. Render an iframe that points to cardPinResponse.url with key added as a query parameter (the value 001 can be used in development).
3. Call the postMessage method on the contentWindow object on the iframe with the payload: { operation: 'view-pin', controlId: cardPinResponse.controlId } and cardPinResponse.url.
4. The iframe will display the PIN code.

React example:

// Example React component
const CardPinInfo = () => {
  const { data: cardPinResponse } = useDesktopCardPinInfo();
  
  const onIframeLoad = (event) => {
    event.currentTarget.contentWindow?.postMessage(
      { operation: 'view-pin', controlId: cardPinResponse.controlId }, 
      cardPinResponse.url
    );
  };
  
  if (!cardPinResponse) return null;
  
  return (
    <iframe 
      src={`${cardPinResponse.url}?key=001`} 
      onLoad={onIframeLoad} 
    />
  );
};

Mobile Implementation

Displaying card details on mobile:

1. The partner's mobile application executes a request to the partner backend api which in turn makes a request to Mynts partner-api, to the getSensitiveCardInfoMobile endpoint.
2. Render an iframe equivalent (a WebView in react-native) that points to {cardInfoResponse.url}.
3. The WebView should make a POST request with token in the body formatted as token=${cardInfoResponse.token} with header 'Content-Type': 'application/x-www-form-urlencoded'.
4. The WebView will display the sensitive card information.

React-native example:

// Example React Native component
const SensitiveCardInfo = () => {
  const { data: cardInfoResponse } = useMobileCardPanInfo();
  
  if (!cardInfoResponse) return null;
  
  return (
    <View>
      <WebView
        source={{
          uri: cardInfoResponse.url,
          method: 'POST',
          body: `token=${cardInfoResponse.token}`,
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }}
      />
    </View>
  );
};

Displaying PIN code on mobile:

1. The partner's mobile application executes a request to the partner backend api which in turn makes a request to Mynts partner-api, to the getCardPinMobileUrl endpoint.
2. Render an iframe equivalent (a WebView in react-native) that points to {cardPinResponse.url}.
3. The WebView should make a POST request with token in the body formatted as controlId=${cardPinResponse.controlId} with header 'Content-Type': 'application/x-www-form-urlencoded'.
4. The WebView will display the card PIN code.

React-native example:

// Example React Native component
const CardPinInfo = () => {
  const { data: cardPinResponse } = useMobileCardPinInfo();
  
  if (!cardPinResponse) return null;
  
  return (
    <View>
      <WebView
        source={{
          uri: cardPinResponse.url,
          method: 'POST',
          body: `controlId=${cardPinResponse.controlId}`,
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }}
      />
    </View>
  );
};

Customization options

Layout customization

For web applications, you can customize the appearance of the sensitive information display:

• Desktop browser layouts can be customized by providing your layout to Mynt
• Mynt will provide a key that identifies your custom layout
• Use this key as a query parameter when loading the iframe
• For development, you can use the key 001 for testing purposes

Mobile web view layouts cannot be customized and will use the default designs. However, the mobile layouts automatically support dark mode, adjusting their appearance based on the user's device settings.

Development and testing

To facilitate development:

• The development environment accepts the layout key 001 for testing
• You cannot test custom layouts in our development environment
• For layout testing, you can host an HTML file locally and load it into an iframe
• Mynt can provide a package of documents and scripts to help with layout development

‍