Skip to content

Instantly share code, notes, and snippets.

@masiamj
Last active October 4, 2021 20:58
Show Gist options
  • Save masiamj/c5b4c50aab6e2c5d79b95d5e635727e2 to your computer and use it in GitHub Desktop.
Save masiamj/c5b4c50aab6e2c5d79b95d5e635727e2 to your computer and use it in GitHub Desktop.
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>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment