wip

App.tsx

@@ -1,47 +1,134 @@
 import React, { useRef } from 'react';
 import {
+  Pressable,
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
-import type { BTRef } from './src';
-import { CardNumberElement } from './src';
+import type { BTRef, InputBTRef } from './src';
+import {
+  BasisTheoryElements,
+  CardExpirationDateElement,
+  CardNumberElement,
+  CardVerificationCodeElement,
+} from './src';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+interface CardToken {
+  expiration_year: InputBTRef;
+  expiration_month: InputBTRef;
+  number: InputBTRef;
+  cvc?: InputBTRef;
+}
 
 const App = (): JSX.Element => {
-  const ref = useRef<BTRef>(null);
+  const cardNumberRef = useRef<BTRef>(null);
+  const cardExpirationDateRef = useRef<BTRef>(null);
+  const cardVerificationCodeRef = useRef<BTRef>(null);
+
+  const tokenId = 'dfbec10b-82c6-4258-8b2e-1248fbb0be7c';
+
+  const display = async () => {
+    try {
+      const session = await BasisTheoryElements.createSession(
+        'key_us_pub_GFRDo6zLkEtWE2JrBQaXRm'
+      );
+
+      // authorize the session
+      await fetch(
+        'https://manufactured-pants-copies-memorabilia.trycloudflare.com/authorize',
+        {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            nonce: session.nonce,
+            tokenId,
+          }),
+        }
+      );
+
+      const token = await BasisTheoryElements.getTokenById(
+        tokenId,
+        session.sessionKey
+      );
+
+      cardNumberRef.current?.setValue((token.data as CardToken).number);
+
+      cardExpirationDateRef.current?.setValue({
+        month: (token.data as CardToken).expiration_month,
+        year: (token.data as CardToken).expiration_year,
+      });
+      cardVerificationCodeRef.current?.setValue((token.data as CardToken).cvc);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   return (
     <SafeAreaView>
       <StatusBar />
       <ScrollView contentInsetAdjustmentBehavior="automatic">
         <View style={styles.viewContainer}>
           <CardNumberElement
-            btRef={ref}
+            btRef={cardNumberRef}
             placeholder="Card Number"
-            style={styles.cardNumber}
+            style={styles.elements}
           />
+
+          <CardExpirationDateElement
+            btRef={cardExpirationDateRef}
+            placeholder="Card Expiration Date"
+            style={styles.elements}
+          />
+
+          <CardVerificationCodeElement
+            btRef={cardVerificationCodeRef}
+            placeholder="CVC"
+            style={styles.elements}
+          />
+
+          <Pressable onPress={display} style={styles.button}>
+            <Text style={styles.text}>{'Display'}</Text>
+          </Pressable>
         </View>
       </ScrollView>
     </SafeAreaView>
   );
 };
 
+const spacing = {
+  margin: 12,
+  padding: 10,
+};
+
 const styles = StyleSheet.create({
-  cardNumber: {
+  button: {
+    backgroundColor: '#21d1de',
+    ...spacing,
+  },
+  elements: {
     backgroundColor: '#eeeeee',
-    borderColor: 'blue',
-    borderWidth: 2,
-    color: 'purple',
+    borderColor: '#21d1de',
+    borderWidth: 1,
+    color: 'gray',
     height: 40,
-    margin: 12,
-    padding: 10,
+    ...spacing,
+  },
+  text: {
+    color: '#fff',
+    textAlign: 'center',
   },
   viewContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginTop: 32,
+    height: '100%',
+    //  display: 'flex',
+    //   flexDirection: 'column',
+    paddingaTop: 32,
   },
 });
 

package.json

@@ -10,8 +10,8 @@
     "release": "semantic-release"
   },
   "dependencies": {
-    "@basis-theory/basis-theory-js": "^2.2.0",
-    "@basis-theory/basis-theory-react": "^1.14.0",
+    "@basis-theory/basis-theory-js": "^2.3.1",
+    "@basis-theory/basis-theory-react": "^1.14.1",
     "card-validator": "^8.1.1",
     "lodash.set": "^4.3.2",
     "react": "18.2.0",

src/components/TextElement.hooks.ts

@@ -0,0 +1,35 @@
+import type { ForwardedRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import type { TextInput } from 'react-native';
+import uuid from 'react-native-uuid';
+import type { BTRef, Mask } from '../BaseElementTypes';
+import { useBtRefUnmount } from './shared/useBtRefUnmount.hooks';
+import { useBtRef } from './shared/useBtRef.hooks';
+
+export type UseTextElementProps = {
+  btRef?: ForwardedRef<BTRef>;
+  mask?: Mask;
+};
+
+export const useTextElement = ({ btRef, ...props }: UseTextElementProps) => {
+  const textInputRef = useRef<TextInput>(null);
+  const [id] = useState(uuid.v4() as string);
+  const [mask, setMask] = useState<Mask | undefined>(undefined);
+  const [textInputValue, setTextInputValue] = useState<string>('');
+
+  useBtRefUnmount({ btRef });
+
+  useEffect(() => {
+    setMask(props.mask);
+  }, [textInputValue, props.mask]);
+
+  useBtRef({ btRef, textInputRef, id, setTextInputValue });
+
+  return {
+    textInputRef,
+    id,
+    setTextInputValue,
+    textInputValue,
+    mask,
+  };
+};

src/components/TextElement.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { useTextElement, UseTextElementProps } from './TextElement.hooks';
+import MaskInput from 'react-native-mask-input';
+import { _elementValues } from '../ElementValues';
+
+type TextElementProps = {
+  style?: StyleProp<TextStyle>;
+  editable?: boolean;
+  placeholder?: string;
+} & UseTextElementProps;
+
+export const CardNumberElement = ({
+  btRef,
+  style,
+  editable,
+  placeholder,
+}: TextElementProps) => {
+  const { textInputRef, id, setTextInputValue, textInputValue, mask } =
+    useTextElement({
+      btRef,
+    });
+
+  return (
+    <MaskInput
+      editable={editable}
+      mask={mask}
+      onChangeText={(masked) => {
+        _elementValues[id] = masked;
+        setTextInputValue(masked);
+      }}
+      placeholder={placeholder}
+      placeholderFillCharacter=""
+      ref={textInputRef}
+      style={style}
+      value={textInputValue}
+    />
+  );
+};

yarn.lock

@@ -2024,10 +2024,10 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
-"@basis-theory/basis-theory-js@^2.1.0", "@basis-theory/basis-theory-js@^2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-2.2.0.tgz#2d33ed4c39ec7683b48ac6132400bdf72abb24ca"
-  integrity sha512-Iybsw02SVF9AoiTwjyeW0tFlHQc7l1hUJxsqzxgy9kWYMCnbYSjT+CSq0hz7rVoaXx3R10gUKew22GDpwRQBWA==
+"@basis-theory/basis-theory-js@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-2.3.1.tgz#5b39f1a213f410aa3a3d3b6028d889a3412d671d"
+  integrity sha512-Fzu4BxongcYy3gcYdnKCIM34gwLkj4UuPLt3pFBlnYxzHDNBnsCdUkWoDygljQNzQCbkqUhj0wRa9r+33ONpPQ==
   dependencies:
     axios "^1.4.0"
     camelcase-keys "^6.2.2"
@@ -2037,12 +2037,12 @@
     snake-case "^3.0.4"
     snakecase-keys "^3.2.1"
 
-"@basis-theory/basis-theory-react@^1.14.0":
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-react/-/basis-theory-react-1.14.0.tgz#4d911ace4e87d5a1ce5547e648f53be76681d517"
-  integrity sha512-HbkZ/QkhtavRhFCvQw9gQVtgH83hlG78mpXtdd8SctEp3w8CG5hGJaN7LAV0Q72kwl6zKj4PWLD/91whMLoVvg==
+"@basis-theory/basis-theory-react@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-react/-/basis-theory-react-1.14.1.tgz#7a8760fa77b22669cc6b0444fbd26b259087c6b1"
+  integrity sha512-iBMHStfFvNr2xzzj4CmJ7Zv1FysQCqIlro9D5pFndmDis9CItDQoGe7vvHg+tjnyIdPPhTcbsFD3DKtpRPaIBQ==
   dependencies:
-    "@basis-theory/basis-theory-js" "^2.1.0"
+    "@basis-theory/basis-theory-js" "^2.3.1"
 
 "@colors/colors@1.5.0":
   version "1.5.0"