masiamj/react-native-vgs-show-webview.ts

## react-native-vgs-show-webview.ts
import React from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

type ShowVGSTextProps = {
  token: string
  cardId: string
  copyable: boolean
  height?: number
  fontSize?: number
  propertyName: string
  vaultId: string
}

/**
 * Renders a webview to render text from VGS Show
 * https://www.verygoodsecurity.com/docs/vgs-show/overview
 * It allows us to load secure data (card information) and display it to
 * the user without exposing us to PCI or other data privacy and security concerns
 * Use the height and fontSize properties to control size of component
 * @param props
 * @returns
 */
export const ShowVGS = (props: ShowVGSTextProps) => {
  const {
    token, // Represents a user's authorization token to communicate with our backend API
    cardId,
    copyable,
    height = 55,
    fontSize = 50,
    propertyName,
    vaultId
  } = props

  const CardNumberView = `
<!DOCTYPE html>
  <html>
    <head>
      <meta charSet="utf-8">
      <title></title>
      <style>
          iframe {
            height: ${height}px;
            width: 100%;
          }
          .card-number {
            font-size: 40px;
            font-family: "Helvetica", sans-serif;
            height: ${height};
            min-width: 90%;
            width: 90%;
          }
          .content-wrapper {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: ${height};
          }
          .copy-button {
            position: absolute;
            right: 0;
            height: ${height};
          }
      </style>
      <script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.3/ACpwKRTLyA8T3uzefnuENeC2.js"></script>
    </head>
    <body style='margin:0; background-color: black; color: white;'>
      <div class="content-wrapper">
        <div class="card-number" id="secure-data"></div>
        ${
          copyable
            ? `
              <div class="copy-button" id="copy-button"></div>
              <svg
                id="copy-button-icon"
                width="84"
                height="84"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                color="#FFF"
              >
                <path
                  fill-rule="evenodd"
                  d="M4.75 3A1.75 1.75 0 003 4.75v9.5c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 000-1.5h-1.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.25-.25h9.5a.25.25 0 01.25.25v1.5a.75.75 0 001.5 0v-1.5A1.75 1.75 0 0014.25 3h-9.5zm5 5A1.75 1.75 0 008 9.75v9.5c0 .966.784 1.75 1.75 1.75h9.5A1.75 1.75 0 0021 19.25v-9.5A1.75 1.75 0 0019.25 8h-9.5zM9.5 9.75a.25.25 0 01.25-.25h9.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-9.5a.25.25 0 01-.25-.25v-9.5z"
                />
              </svg>
              `
            : ''
        }
      </div>
      <script type="text/javascript">
        const show = VGSShow.create('${vaultId}');
        const paniframe = show.request({
          name: 'data-text',
          method: 'GET',
          path: '/v1/cards/' + '${cardId}',
          headers: {
            "Authorization": 'Bearer ' + '${token}'
          },
          htmlWrapper: 'text',
          jsonPathSelector: '${propertyName}',
        });

        paniframe.render('#secure-data', {
          'font-family': '"Helvetica", sans-serif',
          'font-size': ${fontSize},
          'color': 'white',
        });

        // Copy to Clipboard
        const copyButton = show.copyFrom(paniframe, { text: '' }, (status) => {
          if (status === 'success') {
            alert('Card number copied!')
          }
        })

        copyButton.render('#copy-button')
      </script>
    </body>
  </html>
`

  return (
    <View
      style={{
        display: 'flex',
        height,
        width: '100%'
      }}>
      <WebView originWhitelist={['*']} source={{ html: CardNumberView }} />
    </View>
  )
}
	import React from 'react'
	import { View } from 'react-native'
	import { WebView } from 'react-native-webview'

	type ShowVGSTextProps = {
	token: string
	cardId: string
	copyable: boolean
	height?: number
	fontSize?: number
	propertyName: string
	vaultId: string
	}

	/**
	* Renders a webview to render text from VGS Show
	* https://www.verygoodsecurity.com/docs/vgs-show/overview
	* It allows us to load secure data (card information) and display it to
	* the user without exposing us to PCI or other data privacy and security concerns
	* Use the height and fontSize properties to control size of component
	* @param props
	* @returns
	*/
	export const ShowVGS = (props: ShowVGSTextProps) => {
	const {
	token, // Represents a user's authorization token to communicate with our backend API
	cardId,
	copyable,
	height = 55,
	fontSize = 50,
	propertyName,
	vaultId
	} = props

	const CardNumberView = `
	<!DOCTYPE html>
	<html>
	<head>
	<meta charSet="utf-8">
	<title></title>
	<style>
	iframe {
	height: ${height}px;
	width: 100%;
	}
	.card-number {
	font-size: 40px;
	font-family: "Helvetica", sans-serif;
	height: ${height};
	min-width: 90%;
	width: 90%;
	}
	.content-wrapper {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: ${height};
	}
	.copy-button {
	position: absolute;
	right: 0;
	height: ${height};
	}
	</style>
	<script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.3/ACpwKRTLyA8T3uzefnuENeC2.js"></script>
	</head>
	<body style='margin:0; background-color: black; color: white;'>
	<div class="content-wrapper">
	<div class="card-number" id="secure-data"></div>
	${
	copyable
	? `
	<div class="copy-button" id="copy-button"></div>
	<svg
	id="copy-button-icon"
	width="84"
	height="84"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 24 24"
	fill="currentColor"
	color="#FFF"
	>
	<path
	fill-rule="evenodd"
	d="M4.75 3A1.75 1.75 0 003 4.75v9.5c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 000-1.5h-1.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.25-.25h9.5a.25.25 0 01.25.25v1.5a.75.75 0 001.5 0v-1.5A1.75 1.75 0 0014.25 3h-9.5zm5 5A1.75 1.75 0 008 9.75v9.5c0 .966.784 1.75 1.75 1.75h9.5A1.75 1.75 0 0021 19.25v-9.5A1.75 1.75 0 0019.25 8h-9.5zM9.5 9.75a.25.25 0 01.25-.25h9.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-9.5a.25.25 0 01-.25-.25v-9.5z"
	/>
	</svg>
	`
	: ''
	}
	</div>
	<script type="text/javascript">
	const show = VGSShow.create('${vaultId}');
	const paniframe = show.request({
	name: 'data-text',
	method: 'GET',
	path: '/v1/cards/' + '${cardId}',
	headers: {
	"Authorization": 'Bearer ' + '${token}'
	},
	htmlWrapper: 'text',
	jsonPathSelector: '${propertyName}',
	});

	paniframe.render('#secure-data', {
	'font-family': '"Helvetica", sans-serif',
	'font-size': ${fontSize},
	'color': 'white',
	});

	// Copy to Clipboard
	const copyButton = show.copyFrom(paniframe, { text: '' }, (status) => {
	if (status === 'success') {
	alert('Card number copied!')
	}
	})

	copyButton.render('#copy-button')
	</script>
	</body>
	</html>
	`

	return (
	<View
	style={{
	display: 'flex',
	height,
	width: '100%'
	}}>
	<WebView originWhitelist={['*']} source={{ html: CardNumberView }} />
	</View>
	)
	}