card-react-native 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +347 -192
- package/android/build.gradle +1 -1
- package/card-react-native.podspec +2 -2
- package/lib/commonjs/index.js +23 -7
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/models/enums/sdkEnums.js +53 -27
- package/lib/commonjs/models/enums/sdkEnums.js.map +1 -1
- package/lib/module/index.js +24 -8
- package/lib/module/index.js.map +1 -1
- package/lib/module/models/enums/sdkEnums.js +47 -24
- package/lib/module/models/enums/sdkEnums.js.map +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/models/config.d.ts +31 -34
- package/lib/typescript/src/models/config.d.ts.map +1 -1
- package/lib/typescript/src/models/enums/sdkEnums.d.ts +23 -3
- package/lib/typescript/src/models/enums/sdkEnums.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/index.tsx +25 -7
- package/src/models/config.ts +36 -40
- package/src/models/enums/sdkEnums.ts +24 -3
package/README.md
CHANGED
|
@@ -1,18 +1,40 @@
|
|
|
1
1
|
# card-react-native
|
|
2
2
|
|
|
3
|
-
Tap Card
|
|
3
|
+
Tap Card React-Native Wrapper
|
|
4
4
|
|
|
5
|
-
#Card-
|
|
5
|
+
# Card-React-Native
|
|
6
6
|
|
|
7
7
|
We at [Tap Payments](https://www.tap.company/) strive to make your payments easier than ever. We as a PCI compliant company, provide you a from the self solution to process card payments in your iOS apps.
|
|
8
8
|
|
|
9
|
+
# Steps overview
|
|
10
|
+
```mermaid
|
|
11
|
+
sequenceDiagram
|
|
12
|
+
|
|
13
|
+
participant A as App
|
|
14
|
+
participant T as Tap
|
|
15
|
+
participant C as Card React Native
|
|
16
|
+
|
|
17
|
+
A->>T: Regsiter app.
|
|
18
|
+
T-->>A: Public key.
|
|
19
|
+
A ->> C : Install SDK
|
|
20
|
+
A ->> C : Init TapCardView
|
|
21
|
+
C -->> A : tapCardView
|
|
22
|
+
A ->> C : pass Config and callbacks
|
|
23
|
+
C -->> A: onReady()
|
|
24
|
+
C -->> C : Enter card data
|
|
25
|
+
C -->> A : onBinIdentification(data)
|
|
26
|
+
C -->> A : onValidInput
|
|
27
|
+
A ->> C : tapCardView.generateTapToken()
|
|
28
|
+
C -->> A : onSuccess(data)
|
|
29
|
+
```
|
|
30
|
+
|
|
9
31
|
# Get your Tap keys
|
|
10
32
|
|
|
11
33
|
You can always use the example keys within our example app, but we do recommend you to head to our [onboarding](https://register.tap.company/sell) page. You will need to register your `bundle id` to get your `Tap Key` that you will need to activate our `Card SDK`.
|
|
12
34
|
|
|
13
35
|
# Installation
|
|
14
36
|
|
|
15
|
-
We got you covered, `
|
|
37
|
+
We got you covered, `card-react-native` can be installed with all possible technologies.
|
|
16
38
|
|
|
17
39
|
## Node modules
|
|
18
40
|
|
|
@@ -32,196 +54,338 @@ pod install
|
|
|
32
54
|
pod update
|
|
33
55
|
```
|
|
34
56
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
/**
|
|
41
|
-
|
|
42
|
-
Creates a configuration model to be passed to the SDK
|
|
43
|
-
|
|
44
|
-
- Parameters:
|
|
45
|
-
|
|
46
|
-
- publicKey: The Tap public key
|
|
47
|
-
|
|
48
|
-
- scope: The scope of the card sdk. Default is generating a tap token
|
|
49
|
-
|
|
50
|
-
- purpose: The intended purpose of using the generated token afterwards.
|
|
51
|
-
|
|
52
|
-
- merchant: The Tap merchant details
|
|
53
|
-
|
|
54
|
-
- transaction: The transaction details
|
|
55
|
-
|
|
56
|
-
- order: The tap order id
|
|
57
|
-
|
|
58
|
-
- invoice: Link this token to an invoice
|
|
59
|
-
|
|
60
|
-
- customer: The Tap customer details
|
|
61
|
-
|
|
62
|
-
- acceptance: The acceptance details for the transaction
|
|
63
|
-
|
|
64
|
-
- fields: Defines the fields visibility
|
|
65
|
-
|
|
66
|
-
- addons: Defines some UI/UX addons enablement
|
|
67
|
-
|
|
68
|
-
- interface: Defines some UI related configurations
|
|
69
|
-
|
|
70
|
-
*/
|
|
57
|
+
# Import the dependency
|
|
58
|
+
```Ts
|
|
59
|
+
import TapCardView from ‘card-react-native’;
|
|
71
60
|
```
|
|
72
61
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
62
|
+
# Simple integration
|
|
63
|
+
## Simple widget initialisation
|
|
64
|
+
```Ts
|
|
65
|
+
function MinRequirement() {
|
|
66
|
+
const testRef =
|
|
67
|
+
React.useRef<ITapCardViewInputRef>() as MutableRefObject<ITapCardViewInputRef>;
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<View
|
|
71
|
+
style={{
|
|
72
|
+
flex: 1,
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
}}
|
|
76
|
+
>
|
|
77
|
+
<TapCardView
|
|
78
|
+
onSuccess={(tokenValue) => {
|
|
79
|
+
console.log(
|
|
80
|
+
'🚀 ~ file: HomeScreen.tsx:136 ~ HomeScreen ~ tokenValue:',
|
|
81
|
+
tokenValue
|
|
82
|
+
);
|
|
83
|
+
}}
|
|
84
|
+
ref={cardSdkRef}
|
|
85
|
+
style={{ width: '100%' }}
|
|
86
|
+
config={{
|
|
87
|
+
merchant: {
|
|
88
|
+
id: '',
|
|
89
|
+
},
|
|
90
|
+
order: {
|
|
91
|
+
amount: 1,
|
|
92
|
+
currency: TapCurrencyCode.SAR,
|
|
93
|
+
},
|
|
94
|
+
operator: {
|
|
95
|
+
publicKey: 'pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7',
|
|
96
|
+
},
|
|
97
|
+
scope: Scope.AuthenticatedToken,
|
|
98
|
+
customer: {
|
|
99
|
+
nameOnCard: 'Tap Payments',
|
|
100
|
+
editable: true,
|
|
101
|
+
name: [
|
|
102
|
+
{
|
|
103
|
+
first: 'Tap',
|
|
104
|
+
lang: Locale.en,
|
|
105
|
+
middle: 'Company',
|
|
106
|
+
last: 'Payments',
|
|
107
|
+
},
|
|
108
|
+
],
|
|
109
|
+
contact: {
|
|
110
|
+
phone: {
|
|
111
|
+
number: '88888888',
|
|
112
|
+
countryCode: '+965',
|
|
113
|
+
},
|
|
114
|
+
email: 'tappayments@tap.company',
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
}}
|
|
118
|
+
onInvalidInput={(invalidInput: boolean) => {
|
|
119
|
+
console.log(
|
|
120
|
+
'🚀 ~ file: HomeScreen.tsx:145 ~ HomeScreen ~ invalidInput:',
|
|
121
|
+
invalidInput
|
|
122
|
+
);
|
|
123
|
+
}}
|
|
124
|
+
/>
|
|
125
|
+
</View>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
## Generate Token
|
|
130
|
+
```Ts
|
|
131
|
+
const cardSdkRef =
|
|
132
|
+
React.useRef<ITapCardViewInputRef>() as MutableRefObject<ITapCardViewInputRef>;
|
|
133
|
+
cardSdkRef.current.generateToken();
|
|
134
|
+
```
|
|
93
135
|
|
|
94
|
-
|
|
136
|
+
# Advanced Integration
|
|
95
137
|
|
|
138
|
+
## Advanced configuration initiliasation
|
|
96
139
|
```Ts
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
140
|
+
const config = React.useMemo(() => {
|
|
141
|
+
return {
|
|
142
|
+
merchant: {
|
|
143
|
+
id: '',
|
|
144
|
+
},
|
|
145
|
+
order: {
|
|
146
|
+
reference: '',
|
|
147
|
+
amount: 1,
|
|
148
|
+
currency: TapCurrencyCode.SAR,
|
|
149
|
+
description: '',
|
|
150
|
+
id: '',
|
|
151
|
+
metadata: {},
|
|
152
|
+
},
|
|
153
|
+
invoice: {
|
|
154
|
+
id: 'Map to authenticate.reference.invoice',
|
|
155
|
+
},
|
|
156
|
+
post: {
|
|
157
|
+
url: 'Map to authenticate.reference.post',
|
|
158
|
+
},
|
|
159
|
+
purpose: Purpose.BillingTransaction,
|
|
160
|
+
operator: {
|
|
161
|
+
publicKey: 'pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7',
|
|
162
|
+
},
|
|
163
|
+
scope: Scope.AuthenticatedToken,
|
|
164
|
+
customer: {
|
|
165
|
+
nameOnCard: 'Tap Payments',
|
|
166
|
+
editable: true,
|
|
167
|
+
id: '',
|
|
168
|
+
name: [
|
|
169
|
+
{
|
|
170
|
+
first: 'Tap',
|
|
171
|
+
lang: Locale.en,
|
|
172
|
+
middle: 'Company',
|
|
173
|
+
last: 'Payments',
|
|
174
|
+
},
|
|
175
|
+
],
|
|
176
|
+
contact: {
|
|
177
|
+
phone: {
|
|
178
|
+
number: '88888888',
|
|
179
|
+
countryCode: '+965',
|
|
180
|
+
},
|
|
181
|
+
email: 'tappayments@tap.company',
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
acceptance: {
|
|
185
|
+
supportedSchemes: [
|
|
186
|
+
SupportedSchemes.AMEX,
|
|
187
|
+
SupportedSchemes.MASTERCARD,
|
|
188
|
+
SupportedSchemes.VISA,
|
|
189
|
+
SupportedSchemes.MADA,
|
|
190
|
+
],
|
|
191
|
+
supportedFundSource: [
|
|
192
|
+
SupportedFundSource.Debit,
|
|
193
|
+
SupportedFundSource.Credit,
|
|
194
|
+
],
|
|
195
|
+
supportedPaymentAuthentications: [
|
|
196
|
+
SupportedPaymentAuthentications.secured,
|
|
197
|
+
],
|
|
198
|
+
},
|
|
199
|
+
fieldsVisibility: {
|
|
200
|
+
card: { cardHolder: true, cvv: true },
|
|
201
|
+
},
|
|
202
|
+
interface: {
|
|
203
|
+
loader: true,
|
|
204
|
+
locale: Locale.en,
|
|
205
|
+
theme: Theme.dark,
|
|
206
|
+
edges: Edges.curved,
|
|
207
|
+
cardDirection: Direction.ltr,
|
|
208
|
+
colorStyle: ColorStyle.colored,
|
|
209
|
+
powered: true,
|
|
210
|
+
},
|
|
211
|
+
features: {
|
|
212
|
+
alternativeCardInputs: {
|
|
213
|
+
cardNFC: true,
|
|
214
|
+
cardScanner: true,
|
|
157
215
|
},
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
number: '88888888',
|
|
162
|
-
countryCode: '+965',
|
|
216
|
+
customerCards: {
|
|
217
|
+
saveCard: true,
|
|
218
|
+
autoSaveCard: true,
|
|
163
219
|
},
|
|
164
|
-
|
|
220
|
+
acceptanceBadge: true,
|
|
165
221
|
},
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
supportedBrands: [
|
|
169
|
-
SupportedBrands.AMEX,
|
|
170
|
-
SupportedBrands.MASTERCARD,
|
|
171
|
-
SupportedBrands.VISA,
|
|
172
|
-
SupportedBrands.MADA,
|
|
173
|
-
],
|
|
174
|
-
supportedCards: [SupportedCards.Debit, SupportedCards.Credit],
|
|
175
|
-
},
|
|
176
|
-
fields: {
|
|
177
|
-
cardHolder: true,
|
|
178
|
-
},
|
|
179
|
-
addons: {
|
|
180
|
-
displayPaymentBrands: true,
|
|
181
|
-
loader: true,
|
|
182
|
-
saveCard: true,
|
|
183
|
-
},
|
|
184
|
-
interface: {
|
|
185
|
-
locale: Locale.en,
|
|
186
|
-
theme: Theme.dark,
|
|
187
|
-
edges: Edges.curved,
|
|
188
|
-
direction: Direction.ltr,
|
|
189
|
-
},
|
|
190
|
-
}
|
|
222
|
+
};
|
|
223
|
+
}, []);
|
|
191
224
|
```
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
config={config}
|
|
216
|
-
onSuccess={(tokenValue) => {}}
|
|
217
|
-
onHeightChange={(height) => {}}
|
|
218
|
-
onReady={() => {}}
|
|
219
|
-
onFocus={() => {}}
|
|
220
|
-
onBinIdentification={(binIdentification: Object) => {}}
|
|
221
|
-
onInvalidInput={(invalidInput: boolean) => {}}
|
|
222
|
-
onError={(error: object) => {}}
|
|
223
|
-
/>;
|
|
225
|
+
## Advanced widget initialisation
|
|
226
|
+
```Ts
|
|
227
|
+
<View
|
|
228
|
+
// eslint-disable-next-line react-native/no-inline-styles
|
|
229
|
+
style={{
|
|
230
|
+
flex: 1,
|
|
231
|
+
alignItems: 'center',
|
|
232
|
+
justifyContent: 'center',
|
|
233
|
+
}}
|
|
234
|
+
>
|
|
235
|
+
<TapCardView
|
|
236
|
+
onSuccess={(tokenValue) => {}}
|
|
237
|
+
ref={cardSdkRef}
|
|
238
|
+
style={{ width: '100%' }}
|
|
239
|
+
config={config}
|
|
240
|
+
onHeightChange={() => {}}
|
|
241
|
+
onReady={() => {}}
|
|
242
|
+
onFocus={() => {}}
|
|
243
|
+
onBinIdentification={(binIdentification: Object) => {}}
|
|
244
|
+
onInvalidInput={(invalidInput: boolean) => {}}
|
|
245
|
+
onError={(error: object) => {}}
|
|
246
|
+
/>
|
|
247
|
+
</View>
|
|
224
248
|
```
|
|
249
|
+
# Main input documentation
|
|
250
|
+
To make our sdk as dynamic as possible, we accept the input in a form of a `dictionary` . We will provide you with a sample full one for reference.
|
|
251
|
+
It is always recommended, that you generate this `dictionary` from your server side, so in future if needed you may be able to change the format if we did an update.
|
|
252
|
+
|
|
253
|
+
|Configuration|Description | Required | Type| Sample
|
|
254
|
+
|--|--|--| --|--|
|
|
255
|
+
| operator| This is the `Key` that you will get after registering you bundle id. | True | `String`| `let operator {publicKey: 'pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7'}` |
|
|
256
|
+
| scope| Defines the intention of using the `Card-React-native`. | True | `Scope`| ` let scope = Scope.AuthenticatedToken`|
|
|
257
|
+
| purpose| Defines the intention of using the `Token` after generation. | True | `String`| ` let purpose = "Transaction"` |
|
|
258
|
+
| order| This is the `order id` that you created before or `amount` and `currency` to generate a new order. It will be linked this token. | True | `Order`| ` let order: = { amount: 1, currency: TapCurrencyCode.SAR, description: '', id: '', , reference : ''}` |
|
|
259
|
+
| invoice| This is the `invoice id` that you want to link this token to if any. | False | `Invoice`| ` let invoice = {"id":""}` |
|
|
260
|
+
| merchant| This is the `Merchant id` that you will get after registering you bundle id. | True | `Merchant`| ` let merchant = {"id":""}` |
|
|
261
|
+
| customer| The customer details you want to attach to this tokenization process. | True | `Customer`| ` let customer = {"id":"", "name":{{"lang":"en","first":"TAP","middle":"","last":"PAYMENTS"}}, "nameOnCard":"TAP PAYMENTS", "editble":true, "contact":{"email":"tap@tap.company", "phone":{"countryCode":"+965","number":"88888888"}}}` |
|
|
262
|
+
| features| Some extra features that you can enable/disable based on the experience you want to provide.. | False | `Features`| ` let features = {"alternativeCardInputs":{ "cardScanner":true,"cardNFC":false}, "acceptanceBadge":true, "customerCards":{"saveCard":false, "autoSaveCard":false}`|
|
|
263
|
+
| acceptance| The acceptance details for the transaction. Including, which card brands and types you want to allow for the customer to tokenize/save. | False | `Acceptance`| ` let acceptance = {"supportedSchemes":{ SupportedBrands.AMEX, SupportedBrands.MASTERCARD, SupportedBrands.VISA, SupportedBrands.MADA,}, "supportedFundSource":{"CREDIT","DEBIT"}, "supportedPaymentAuthentications":["3DS"]}`|
|
|
264
|
+
| fields| Needed to define visibility of the optional fields in the card form. | False | `fieldVisibility`| ` let fieldVisibility ={ "card":{"cardHolder":true}}` |
|
|
265
|
+
| interface| Needed to defines look and feel related configurations. | False | `Interface`| ` let interface = {locale: Locale.en, theme: Theme.dark, edges: Edges.curved, cardDirection: Direction.ltr, colorStyle: 'monochrome', powered: true, "loader": true}` |
|
|
266
|
+
| post| This is the `webhook` for your server, if you want us to update you server to server. | False | `Post`| ` let post = {"url":""}` |
|
|
267
|
+
|
|
268
|
+
## Documentation per variable
|
|
269
|
+
|
|
270
|
+
- operator:
|
|
271
|
+
- Responsible for passing the data that defines you as a merchant within Tap system.
|
|
272
|
+
- operator.publicKey:
|
|
273
|
+
- A string, which you get after registering the app bundle id within the Tap system. It is required to correctly identify you as a merchant.
|
|
274
|
+
- You will receive a sandbox and a production key. Use, the one that matches your environment at the moment of usage.
|
|
275
|
+
- scope:
|
|
276
|
+
- Defines the intention of the token you are generating.
|
|
277
|
+
- When the token is used afterwards, the usage will be checked against the original purpose to make sure they are a match.
|
|
278
|
+
- Possible values:
|
|
279
|
+
- `Token` : This means you will get a Tap token to use afterwards.
|
|
280
|
+
- `AuthenticatedToken` This means you will get an authenticated Tap token to use in our charge api right away.
|
|
281
|
+
- `SaveToken` This means you will get a token to use multiple times with authentication each time.
|
|
282
|
+
- `SaveAuthenticatedToken` This means you will get an authenticated token to use in multiple times right away.
|
|
283
|
+
- purpose:
|
|
284
|
+
- Defines the intention of using the `Token` after generation.
|
|
285
|
+
- Possible values:
|
|
286
|
+
- `Transaction` Using the token for a single charge.
|
|
287
|
+
- `Milestone Transaction` Using the token for paying a part of a bigger order, when reaching a certain milestone.
|
|
288
|
+
- `Installment Transaction` Using the token for a charge that is a part of an installement plan.
|
|
289
|
+
- `Billing Transaction` Using the token for paying a bill.
|
|
290
|
+
- `Subscription Transaction` Using the token for a recurring based transaction.
|
|
291
|
+
- `Verify Cardholder` Using the token to verify the ownership of the card.
|
|
292
|
+
- `Save Card` Using the token to save this card and link it to a certain customer.
|
|
293
|
+
- `Maintain Card` Used to renew a saved card.
|
|
294
|
+
- order:
|
|
295
|
+
- The details about the order that you will be using the token you are generating within.
|
|
296
|
+
- order.id:
|
|
297
|
+
- The id of the `order` if you already created it using our apis.
|
|
298
|
+
- order.currency:
|
|
299
|
+
- The intended currency you will perform the order linked to this token afterwards.
|
|
300
|
+
- order.amount:
|
|
301
|
+
- The intended amount you will perform the order linked to this token afterwards.
|
|
302
|
+
- order.description:
|
|
303
|
+
- Optional string to put some clarifications about the order if needed.
|
|
304
|
+
- order.reference:
|
|
305
|
+
- Optional string to put a reference to link it to your system.
|
|
306
|
+
- order.metadata:
|
|
307
|
+
- Optional, It is a key-value based parameter. You can pass it to attach any miscellaneous data with this order for your own convenience.
|
|
308
|
+
- invoice.id:
|
|
309
|
+
- Optional string to pass an invoice id, that you want to link to this token afterwards.
|
|
310
|
+
- merchant.id:
|
|
311
|
+
- Optional string to pass to define a sub entity registered under your key in Tap. It is the `Merchant id` that you get from our onboarding team.
|
|
312
|
+
- customer.id:
|
|
313
|
+
- If you have previously have created a customer using our apis and you want to link this token to him. please pass his id.
|
|
314
|
+
- customer.name:
|
|
315
|
+
- It is a list of localized names. each name will have:
|
|
316
|
+
- lang : the 2 iso code for the locale of this name for example `en`
|
|
317
|
+
- first : The first name.
|
|
318
|
+
- middle: The middle name.
|
|
319
|
+
- last : The last name.
|
|
320
|
+
- customer.nameOnCard:
|
|
321
|
+
- If you want to prefill the card holder's name field.
|
|
322
|
+
- customer.editable:
|
|
323
|
+
- A boolean that controls whether the customer can edit the card holder's name field or not.
|
|
324
|
+
- customer.contact.email:
|
|
325
|
+
- An email string for the customer we are creating. At least the email or the phone is required.
|
|
326
|
+
- customer.contact.phone:
|
|
327
|
+
- The customer's phone:
|
|
328
|
+
- countryCode
|
|
329
|
+
- number
|
|
330
|
+
- features:
|
|
331
|
+
- Some extra features/functionalities that can be configured as per your needs.
|
|
332
|
+
- features.alternativeCardInputs.cardScanner:
|
|
333
|
+
- A boolean to indicate whether or not you want to display the scan card icon.
|
|
334
|
+
- Make sure you have access to camera usage, before enabling the scanner function.
|
|
335
|
+
- features.acceptanceBadge:
|
|
336
|
+
- A boolean to indicate wether or not you want to display the list of supported card brands that appear beneath the card form itself.
|
|
337
|
+
- features.customerCards.saveCard:
|
|
338
|
+
- A boolean to indicate wether or not you want to display the save card option to the customer.
|
|
339
|
+
- Must be used with a combination of these scopes:
|
|
340
|
+
- SaveToken
|
|
341
|
+
- SaveAuthenticatedToken
|
|
342
|
+
- features.customerCards.autoSave:
|
|
343
|
+
- A boolean to indicate wether or not you want the save card switch to be on by default.
|
|
344
|
+
- acceptance:
|
|
345
|
+
- List of configurations that control the payment itself.
|
|
346
|
+
- acceptance.supportedSchemes:
|
|
347
|
+
- A list to control which card schemes the customer can pay with. For example:
|
|
348
|
+
- AMERICAN_EXPRESS
|
|
349
|
+
- VISA
|
|
350
|
+
- MASTERCARD
|
|
351
|
+
- MADA
|
|
352
|
+
- OMANNET
|
|
353
|
+
- acceptance.supportedFundSource:
|
|
354
|
+
- A list to control which card types are allowed by your customer. For example:
|
|
355
|
+
- DEBIT
|
|
356
|
+
- CREDIT
|
|
357
|
+
- acceptance.supportedPaymentAuthentications:
|
|
358
|
+
- A list of what authentication techniques you want to enforce and apple. For example:
|
|
359
|
+
- 3DS
|
|
360
|
+
- fieldVisibility.card.cardHolder:
|
|
361
|
+
- A boolean to indicate wether or not you want to show/collect the card holder name.
|
|
362
|
+
- interface.loader:
|
|
363
|
+
- A boolean to indicate wether or not you want to show a loading view on top of the card form while it is performing api requests.
|
|
364
|
+
- interface.locale:
|
|
365
|
+
- The language of the card form. Accepted values as of now are:
|
|
366
|
+
- en
|
|
367
|
+
- ar
|
|
368
|
+
- interface.theme:
|
|
369
|
+
- The display style of the card form. Accepted values as of now are:
|
|
370
|
+
- light
|
|
371
|
+
- dark
|
|
372
|
+
- dynamic // follow the device's display style
|
|
373
|
+
- interface.edges:
|
|
374
|
+
- How do you want the edges of the card form to. Accepted values as of now are:
|
|
375
|
+
- curved
|
|
376
|
+
- flat
|
|
377
|
+
- interface.cardDirection:
|
|
378
|
+
- The layout of the fields (card logo, number, date & CVV) within the card element itself. Accepted values as of now are:
|
|
379
|
+
- ltr // fields will inflate from left to right
|
|
380
|
+
- rtl // fields will inflate from right to left
|
|
381
|
+
- dynamic // fields will inflate in the locale's direction
|
|
382
|
+
- interface.powered:
|
|
383
|
+
- A boolean to indicate wether or not you want to show powered by tap.
|
|
384
|
+
- Note, that you have to have the permission to hide it from the integration team. Otherwise, you will get an error if you pass it as false.
|
|
385
|
+
- interface.colorStyle:
|
|
386
|
+
- How do you want the icons rendered inside the card form to. Accepted values as of now are:
|
|
387
|
+
- colored
|
|
388
|
+
- monochrome
|
|
225
389
|
|
|
226
390
|
# TapCardView Callbacks
|
|
227
391
|
|
|
@@ -296,12 +460,3 @@ callbacks that allows integrators to get notified from events fired from the `Ta
|
|
|
296
460
|
|
|
297
461
|
}
|
|
298
462
|
```
|
|
299
|
-
|
|
300
|
-
# Tokenize the card
|
|
301
|
-
|
|
302
|
-
Once you get notified that the `TapCardView` now has a valid input from the callback. You can start the tokenization process by calling the public interface:
|
|
303
|
-
|
|
304
|
-
```swift
|
|
305
|
-
/// Wil start the process of generating a `TapToken` with the current card data
|
|
306
|
-
tapCardRef.current.generateToken();
|
|
307
|
-
```
|
package/android/build.gradle
CHANGED
|
@@ -106,7 +106,7 @@ dependencies {
|
|
|
106
106
|
//noinspection GradleDynamicVersion
|
|
107
107
|
implementation "com.facebook.react:react-native:+"
|
|
108
108
|
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
|
|
109
|
-
implementation 'com.github.Tap-Payments:Card-Android:0.0.
|
|
109
|
+
implementation 'com.github.Tap-Payments:Card-Android:0.0.30'
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
if (isNewArchitectureEnabled()) {
|
|
@@ -21,10 +21,10 @@ Pod::Spec.new do |s|
|
|
|
21
21
|
# See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
|
|
22
22
|
if respond_to?(:install_modules_dependencies, true)
|
|
23
23
|
install_modules_dependencies(s)
|
|
24
|
-
s.dependency 'Card-iOS','0.0.
|
|
24
|
+
s.dependency 'Card-iOS','0.0.22'
|
|
25
25
|
else
|
|
26
26
|
s.dependency "React-Core"
|
|
27
|
-
s.dependency 'Card-iOS','0.0.
|
|
27
|
+
s.dependency 'Card-iOS','0.0.22'
|
|
28
28
|
# Don't install the dependencies when we run `pod install` in the old architecture.
|
|
29
29
|
if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
|
|
30
30
|
s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
|
package/lib/commonjs/index.js
CHANGED
|
@@ -113,6 +113,28 @@ function TapCardView(_ref, ref) {
|
|
|
113
113
|
} = _ref6;
|
|
114
114
|
onError(data);
|
|
115
115
|
};
|
|
116
|
+
const iosConfig = (0, _react.useMemo)(() => {
|
|
117
|
+
var _config$features;
|
|
118
|
+
if ((config === null || config === void 0 || (_config$features = config.features) === null || _config$features === void 0 ? void 0 : _config$features.alternativeCardInputs.cardNFC) !== undefined) {
|
|
119
|
+
return {
|
|
120
|
+
...config,
|
|
121
|
+
features: {
|
|
122
|
+
...config.features,
|
|
123
|
+
alternativeCardInputs: {
|
|
124
|
+
...(config.features.alternativeCardInputs ?? {
|
|
125
|
+
cardNFC: false,
|
|
126
|
+
cardScanner: false
|
|
127
|
+
}),
|
|
128
|
+
cardNFC: _reactNative.Platform.OS === 'ios' ? false : config.features.alternativeCardInputs.cardNFC ?? false
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
} else {
|
|
133
|
+
return {
|
|
134
|
+
...config
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
}, [config]);
|
|
116
138
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
117
139
|
style: {
|
|
118
140
|
...style,
|
|
@@ -125,13 +147,7 @@ function TapCardView(_ref, ref) {
|
|
|
125
147
|
flex: 1,
|
|
126
148
|
height: height
|
|
127
149
|
},
|
|
128
|
-
config:
|
|
129
|
-
...config,
|
|
130
|
-
features: {
|
|
131
|
-
...config.features,
|
|
132
|
-
nfc: _reactNative.Platform.OS === 'ios' ? false : config.features.nfc
|
|
133
|
-
}
|
|
134
|
-
},
|
|
150
|
+
config: iosConfig,
|
|
135
151
|
ref: viewRef,
|
|
136
152
|
onSuccess: handleOnSuccess,
|
|
137
153
|
onReadyCallback: handleOnReady,
|