Skip to content

feat: Add Bin Lookup and Brand Selector. #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ddiestra merged 2 commits into from
Nov 4, 2025
Merged

feat: Add Bin Lookup and Brand Selector. #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
417e20c
feat: Add Bin Lookup and Brand Selector.
ddiestra Oct 22, 2025
3e14412
Apply suggestion from @ddiestra
ddiestra Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 126 additions & 120 deletions demo/Collect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import type {
import { styles } from './styles';
import type { ElementEvents } from '../App';
import { EncryptedToken, EncryptToken } from '../src/model/EncryptTokenData';
import { BasisTheoryProvider } from '../src/BasisTheoryProvider';
import { CoBadgedSupport } from '../src/CardElementTypes';

const Divider = () => <View style={styles.divider} />;

Expand Down Expand Up @@ -184,126 +186,130 @@ export const Collect = () => {
<View>
<StatusBar />
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View style={styles.viewContainer}>
<TextInput
placeholder="Token ID*"
style={styles.elements}
onChangeText={setTokenId}
placeholderTextColor="#99a0bf"
value={tokenId}
/>

<CardNumberElement
btRef={cardNumberRef}
keyboardType="numeric"
onChange={updateElementsEvents('cardNumber')}
placeholder="Card Number"
placeholderTextColor="#99a0bf"
style={styles.elements}
/>
<CardExpirationDateElement
btRef={cardExpirationDateRef}
keyboardType="numeric"
onChange={updateElementsEvents('cardExpirationDate')}
placeholder="Card Expiration Date"
placeholderTextColor="#99a0bf"
style={styles.elements}
/>
<CardVerificationCodeElement
btRef={cardVerificationCodeRef}
cvcLength={cvcLength}
keyboardType="numeric"
onChange={updateElementsEvents('cvc')}
placeholder={'Security code'}
placeholderTextColor="#99a0bf"
style={styles.elements}
/>

<Pressable
onPress={createToken}
style={{
marginTop: 24,
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Create token'}</Text>
</Pressable>

<Pressable
onPress={updateToken}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Update Token'}</Text>
</Pressable>

<Pressable
onPress={deleteToken}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Delete Token'}</Text>
</Pressable>

<Divider />

<Pressable
onPress={createTokenWithTokenize}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Tokenize Data'}</Text>
</Pressable>

<Pressable
onPress={encryptToken}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Encrypt Token'}</Text>
</Pressable>

<Divider />

<Pressable onPress={clearToken} style={styles.button}>
<Text style={styles.buttonText}>{'Clear'}</Text>
</Pressable>

{token && (
<>
<Divider />
<Text style={styles.text}>TOKEN: </Text>

<Text style={styles.text}>
{JSON.stringify(token, undefined, 2)}
</Text>
</>
)}

{tokenizedData && (
<>
<Divider />
<Text style={styles.text}>TOKENIZED DATA: </Text>
<Text style={styles.text}>
{JSON.stringify(tokenizedData, undefined, 2)}
</Text>
</>
)}

{encryptedToken && (
<>
<Divider />
<Text style={styles.text}>ENCRYPTED TOKEN: </Text>
<Text style={styles.text}>
{JSON.stringify(encryptedToken, undefined, 2)}
</Text>
</>
)}
</View>
<BasisTheoryProvider bt={bt}>
<View style={styles.viewContainer}>
<TextInput
placeholder="Token ID*"
style={styles.elements}
onChangeText={setTokenId}
placeholderTextColor="#99a0bf"
value={tokenId}
/>

<CardNumberElement
btRef={cardNumberRef}
coBadgedSupport={[CoBadgedSupport.CartesBancaires]}
binLookup={true}
keyboardType="numeric"
onChange={updateElementsEvents('cardNumber')}
placeholder="Card Number"
placeholderTextColor="#99a0bf"
style={styles.elements}
/>
<CardExpirationDateElement
btRef={cardExpirationDateRef}
keyboardType="numeric"
onChange={updateElementsEvents('cardExpirationDate')}
placeholder="Card Expiration Date"
placeholderTextColor="#99a0bf"
style={styles.elements}
/>
<CardVerificationCodeElement
btRef={cardVerificationCodeRef}
cvcLength={cvcLength}
keyboardType="numeric"
onChange={updateElementsEvents('cvc')}
placeholder={'Security code'}
placeholderTextColor="#99a0bf"
style={styles.elements}
/>

<Pressable
onPress={createToken}
style={{
marginTop: 24,
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Create token'}</Text>
</Pressable>

<Pressable
onPress={updateToken}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Update Token'}</Text>
</Pressable>

<Pressable
onPress={deleteToken}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Delete Token'}</Text>
</Pressable>

<Divider />

<Pressable
onPress={createTokenWithTokenize}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Tokenize Data'}</Text>
</Pressable>

<Pressable
onPress={encryptToken}
style={{
...styles.button,
}}
>
<Text style={styles.buttonText}>{'Encrypt Token'}</Text>
</Pressable>

<Divider />

<Pressable onPress={clearToken} style={styles.button}>
<Text style={styles.buttonText}>{'Clear'}</Text>
</Pressable>

{token && (
<>
<Divider />
<Text style={styles.text}>TOKEN: </Text>

<Text style={styles.text}>
{JSON.stringify(token, undefined, 2)}
</Text>
</>
)}

{tokenizedData && (
<>
<Divider />
<Text style={styles.text}>TOKENIZED DATA: </Text>
<Text style={styles.text}>
{JSON.stringify(tokenizedData, undefined, 2)}
</Text>
</>
)}

{encryptedToken && (
<>
<Divider />
<Text style={styles.text}>ENCRYPTED TOKEN: </Text>
<Text style={styles.text}>
{JSON.stringify(encryptedToken, undefined, 2)}
</Text>
</>
)}
</View>
</BasisTheoryProvider>
</ScrollView>
</View>
);
Expand Down
33 changes: 0 additions & 33 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ PODS:
- hermes-engine (0.79.5):
- hermes-engine/Pre-built (= 0.79.5)
- hermes-engine/Pre-built (0.79.5)
- OpenSSL-Universal (3.3.3001)
- RCT-Folly (2024.11.18.00):
- boost
- DoubleConversion
Expand Down Expand Up @@ -1335,32 +1334,6 @@ PODS:
- ReactCommon/turbomodule/core
- react-native-get-random-values (1.11.0):
- React-Core
- react-native-quick-crypto (0.7.14):
- DoubleConversion
- glog
- hermes-engine
- OpenSSL-Universal
- RCT-Folly (= 2024.11.18.00)
- RCTRequired
- RCTTypeSafety
- React
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-hermes
- React-ImageManager
- React-jsi
- React-NativeModulesApple
- React-RCTFabric
- React-renderercss
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- react-native-safe-area-context (5.5.1):
- DoubleConversion
- glog
Expand Down Expand Up @@ -1854,7 +1827,6 @@ DEPENDENCIES:
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
- react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
- react-native-quick-crypto (from `../node_modules/react-native-quick-crypto`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
- React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
Expand Down Expand Up @@ -1892,7 +1864,6 @@ DEPENDENCIES:

SPEC REPOS:
trunk:
- OpenSSL-Universal
- SocketRocket

EXTERNAL SOURCES:
Expand Down Expand Up @@ -1975,8 +1946,6 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
react-native-get-random-values:
:path: "../node_modules/react-native-get-random-values"
react-native-quick-crypto:
:path: "../node_modules/react-native-quick-crypto"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
React-NativeModulesApple:
Expand Down Expand Up @@ -2054,7 +2023,6 @@ SPEC CHECKSUMS:
fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
hermes-engine: f03b0e06d3882d71e67e45b073bb827da1a21aae
OpenSSL-Universal: 6082b0bf950e5636fe0d78def171184e2b3899c2
RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
RCTDeprecation: 5f638f65935e273753b1f31a365db6a8d6dc53b5
RCTRequired: 8b46a520ea9071e2bc47d474aa9ca31b4a935bd8
Expand Down Expand Up @@ -2087,7 +2055,6 @@ SPEC CHECKSUMS:
React-Mapbuffer: 96a2f2a176268581733be182fa6eebab1c0193be
React-microtasksnativemodule: bda561d2648e1e52bd9e5a87f8889836bdbde2e2
react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
react-native-quick-crypto: dcf29d2a08af7b16fb0ee9ef2327585743300ed5
react-native-safe-area-context: 091add53da15b67c76b176724725581b29a1cde3
React-NativeModulesApple: 1ecb83880dd11baf2228f8dd89d8419c387e03ad
React-oscompat: 0592889a9fcf0eacb205532028e4a364e22907dd
Expand Down
4 changes: 2 additions & 2 deletions src/BaseElementTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@ enum ElementType {

type PrimitiveType = boolean | number | string | null | undefined;

type ValidationResult = 'incomplete' | 'invalid' | undefined;
type ValidationResult = 'incomplete' | 'invalid' | 'network_not_selected' | undefined;

type FieldError = {
targetId: string;
type: 'incomplete' | 'invalid';
type: 'incomplete' | 'invalid' | 'network_not_selected';
};

type ElementEvent = {
Expand Down
Loading