Secure iframes

1curl -X POST https://api-demo.airwallex.com/api/v1/issuing/pantokens/create \
2  -H 'Authorization: Bearer {{ACCESS_TOKEN}}' \
3  -d '{
4    "card_id": "75c89b87-eb15-453a-85d7-621c104f707d"
5  }'

1{
2  "expires_at": "2021-03-22T00:29:34.558+0000",
3  "token": "1HxHDfKJNnITGTULgnNoAADkgE1q+tMecRMVnk0w5LbpuqXeYdytS/EorRNvJZAFftjQCse6+0UPJNe+dzDwfZv+lxuLt06Blc59BSZkwRx1kIMwtkvPmam7PZNf8ZQvOEfTv6+5Cei/jkjUpivhRA4THHc2hX2gpDSIr/mljHhKXMkKxQU+F7USo2x52cNslYhQVl04U5PYdUbnygJnFtmE+Fd3ENy+HHfkErCCTOTcVzwRRA=="
4}

1const hash = {
2   token: "The token fetched via api for the card",
3   rules: {
4     ".details": { CSSType },
5     ".pin": { CSSType }
6   },
7   langKey: "zh"
8  };
9
10  const hashURI = encodeURIComponent(JSON.stringify(hash));

1const res = await get('https://api-demo.airwallex.com/api/v1/issuing/pantokens/create', {
2   card_id
3});
4
5const hash = {
6   token: res.token
7};

1const hash = {
2  token: YOUR_TOKEN,
3  rules: {
4    '.pin': {
5       fontSize: '40px',
6       fontWeight: '800',
7       letterSpacing: '2px'
8    }
9  }
10}
11
12const hashURI = encodeURIComponent(JSON.stringify(hash));

1type CSSProperties = 
2  | '-moz-osx-font-smoothing'
3  | '-webkit-font-smoothing'
4  | '-webkit-text-fill-color'
5  | 'backgroundColor'
6  | 'border'
7  | 'borderBottom'
8  | 'borderColor'
9  | 'borderLeft'
10  | 'borderRadius'
11  | 'borderRight'
12  | 'borderStyle'
13  | 'borderTop'
14  | 'borderWidth'
15  | 'boxShadow'
16  | 'color'
17  | 'font'
18  | 'fontFamily'
19  | 'fontFeatureSettings'
20  | 'fontSize'
21  | 'fontStyle'
22  | 'fontVariant'
23  | 'fontWeight'
24  | 'letterSpacing'
25  | 'lineHeight'
26  | 'margin'
27  | 'marginBottom'
28  | 'marginLeft'
29  | 'marginRight'
30  | 'marginTop'
31  | 'outline'
32  | 'outlineColor'
33  | 'outlineOffset'
34  | 'outlineStyle'
35  | 'outlineWidth'
36  | 'padding'
37  | 'paddingBottom'
38  | 'paddingLeft'
39  | 'paddingRight'
40  | 'paddingTop'
41  | 'textAlign'
42  | 'textDecoration'
43  | 'textIndent'
44  | 'textJustify'
45  | 'textShadow'
46  | 'textTransform'
47  | 'transition'
48  | 'wordBreak'
49  | 'wordSpacing'
50  | 'wordWrap';

1const hash = {
2  ...
3  langKey: 'en',
4};

1const res = await get('https://api-demo.airwallex.com/v1/issuing/pantokens/create', {
2   card_id
3});
4
5const hash = {
6   token: res.token
7};
8
9const hashURI = encodeURIComponent(JSON.stringify(hash));
10
11return
12   <iframe src={`https://airwallex.com/issuing/pci/v2/${cardId}/details#${hashURI}`}/>

1const hashURI = encodeURIComponent(JSON.stringify(hash));
2
3return
4   <iframe src={`https://airwallex.com/issuing/pci/v2/${cardId}/pin#${hashURI}`}/>

1const hashURI = encodeURIComponent(JSON.stringify(hash));
2
3return
4   <iframe src={`https://airwallex.com/issuing/pci/v2/${cardId}/change-pin#${hashURI}`}/>

1const hash = {
2   token: token,
3   rules: {
4       '.details': {
5           backgroundColor: '#2a2a2a',
6           color: 'white',
7           borderRadius: '20px',
8           fontFamily: 'Arial'
9       },
10       '.details__row': {
11           display: 'flex',
12           justifyContent: 'space-between',
13           padding: '20px'
14       },
15       '.details__label': {
16           width: '100px',
17           fontWeight: 'bold'
18       },
19       '.details__content': { display: 'flex' },
20       '.details__button svg': { color: 'white' }
21   }
22};

1const hash = {
2   token: token,
3   rules: {
4       '.pin': {
5           backgroundColor: '#2a2a2a',
6           color: 'white',
7           borderRadius: '12px',
8           fontFamily: 'Arial',
9           padding: '20px'
10       },
11       '.pin_value': {
12           fontSize: '24px',
13           fontWeight: 'bold',
14           letterSpacing: '4px'
15       }
16   }
17};

1const hash = {
2   token: token,
3   rules: {
4       '.change-pin': {
5           backgroundColor: '#2a2a2a',
6           color: 'white',
7           borderRadius: '12px',
8           fontFamily: 'Arial',
9           padding: '20px'
10       },
11       '.change-pin__input': {
12           borderRadius: '4px',
13           fontSize: '16px',
14           padding: '8px'
15       },
16       '.change-pin__button--submit': {
17           backgroundColor: '#0060ff',
18           color: 'white',
19           borderRadius: '4px'
20       }
21   }
22};

1// iframe has completed its first render
2{
3   type: `${cardId}:details:mounted`
4}

1// iframe is loading details
2{
3   type: `${cardId}:details:loading`
4}

1// iframe has loaded details
2{
3   type: `${cardId}:details:loaded`
4}

1// iframe has encountered an error while parsing hash or loading
2{
3   type: `${cardId}:details:error`;
4   error: 'cannot_retrieve_details' | 'unable_to_parse_hash' | 'unknown_hash_format' | 'invalid_hash_format';
5}

1// iframe has resized and is returning its new height
2{
3   type: `${cardId}:details:resize`;
4   height: number;
5};

1// Card details iframe event
2{
3   type: `${cardId}:details:error`;
4   error: 'cannot_retrieve_details' | 'unable_to_parse_hash' | 'unknown_hash_format' | 'invalid_hash_format';
5}

1// Card PIN iframe event
2{
3   type: `${cardId}:pin:error`;
4   error: 'cannot_retrieve_pin' | 'unable_to_parse_hash' | 'unknown_hash_format' | 'invalid_hash_format';
5}

1// Change PIN iframe has loaded
2{
3   type: `${cardId}:changePin:mounted`
4}

1// Change PIN iframe content height changed
2{
3   type: `${cardId}:changePin:resize`;
4   height: number;
5};

1// PIN change is being processed
2{
3   type: `${cardId}:changePin:submitting`
4}

1// Cardholder successfully changed their PIN
2{
3   type: `${cardId}:changePin:success`
4}

1// Change PIN iframe encountered an error
2{
3   type: `${cardId}:changePin:error`;
4   errorCode: 'cannot_change_pin' | 'change_pin_not_allowed' | 'invalid_pin_consecutive_digits' | 'invalid_pin_repeated_digits' | 'unable_to_parse_hash' | 'unknown_hash_format' | 'invalid_hash_format';
5}

1// Cardholder clicked Cancel
2{
3   type: `${cardId}:changePin:cancel`
4}

1export const IframeDetails = ({ cardId }) => {
2 const [error, setError] = useState(false);
3 const [loaded, setLoaded] = useState(false);
4 const [height, setHeight] = useState(0);
5
6 function handleMessage(event) {
7   if (!event.origin.includes('airwallex.com')) return;
8   if (event?.data.type === `${cardId}:details:loaded`) setLoaded(true);
9   if (event?.data.type === `${cardId}:details:error`)  setError(true);
10   if (event?.data.type === `${cardId}:details:resize`) setHeight(event?.data.height);
11 }
12
13 useEffect(() => {
14   window.addEventListener('message', handleMessage);
15   return () => window.removeEventListener('message', handleMessage);
16 }, []);
17
18 const hash = {
19   token: getAuthToken(),
20   langKey: 'en',
21   rules: {
22     '.details': {
23       font: '14px Arial, sans-serif',
24       margin: '0',
25     },
26   },
27 };
28 const hashURI = encodeURIComponent(JSON.stringify(hash));
29
30 return (
31   <>
32     {!loaded && <p>loading...</p>}
33     {error && <p>Oops something went wrong</p>}
34     <iframe
35       style={{ height,  display: loaded ? 'block' : 'none' }}
36       frameBorder="0"
37       src={`https://airwallex.com/issuing/pci/v2/${cardId}/details#${hashURI}`}
38     />
39   </>
40 );
41}