react-native-tpay 1.3.8 → 1.3.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.
Files changed (2) hide show
  1. package/README.md +994 -384
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,237 @@
1
- # react-native-tpay
1
+ # Tpay React Native SDK
2
2
 
3
- The Tpay SDK empowers your app to seamlessly integrate Tpay’s payment functionalities, providing a comprehensive and developer-friendly solution for managing payments.
3
+ [![npm version](https://badge.fury.io/js/react-native-tpay.svg)](https://badge.fury.io/js/react-native-tpay)
4
+ ![Static Badge](https://img.shields.io/badge/min_android_sdk-23-blue?logo=android&label=Min%20Android%20SDK)
5
+ ![Static Badge](https://img.shields.io/badge/min_ios_sdk-12.0+-blue?logo=apple&label=iOS)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+
8
+ ## About
9
+ This SDK allows your app to make payments with Tpay.
4
10
  Documentation is available [here](https://tpay-com.github.io/tpay-react-native/).
5
- ## Installation
11
+
12
+ | Library | Version |
13
+ | ------------------- | ----------------------------- |
14
+ | npm | 1.3.8 |
15
+ | Minimum Android SDK | 23 (Android 6.0, Marshmallow) |
16
+ | Minimum iOS version | 12.0 |
17
+
18
+ > [!warning]
19
+ > For this SDK to work you will need `client_id` and `client_secret` tokens. You can find in [merchant's panel](https://panel.tpay.com).
20
+ >
21
+ > If you are partner, you can obtain them in your merchant partner account. For detailed
22
+ > instructions how to do that or how to create such an account
23
+ > check [this site](https://docs-api.tpay.com/en/merchant-accounts/).
24
+
25
+ > [!tip]
26
+ > To be able to test the SDK properly,
27
+ > use [mock data](https://support.tpay.com/sprzedawca/srodowisko-testowe-sandbox).
28
+
29
+
30
+ ## Install
6
31
 
7
32
  ```sh
8
33
  npm install react-native-tpay
9
34
  ```
10
35
 
11
- ## UI Module
36
+ ## Configuration
37
+
38
+ > [!note]
39
+ > In this section we will provide examples for each configuration to the TpayConfiguration class
40
+ > you will be able to make.
41
+
42
+ > [!important]
43
+ > Beneath you will find all configurations that are **MANDATORY**.
44
+
45
+ ### Initialization
46
+
47
+ At first, you have to configure your app to be able to make any requests by providing SDK info about
48
+ your merchant account.
49
+ Info about `client_id` and `client_secret` you will find in your merchant's panel at `Integration -> API`.
50
+
51
+ ```typescript
52
+ new Merchant(
53
+ new MerchantAuthorization(
54
+ 'client_id',
55
+ 'client_secret'
56
+ ),
57
+ TpayEnvironment.sandbox,
58
+ new CertificatePinningConfiguration('ssl_pinning'),
59
+ 'blik_alias',
60
+ new WalletConfiguration(
61
+ new GooglePayConfiguration('merchant_id'),
62
+ new ApplePayConfiguration('merchant_id', 'country_code')
63
+ )
64
+ );
65
+ ```
66
+
67
+ ### Environment
68
+
69
+ Tpay SDK provides two types of environments you can use in your app:
70
+
71
+ * `TpayEnvironment.sandbox` - used only for tests and in stage/dev flavor.
72
+ * `TpayEnvironment.production` - used for production flavors.
73
+
74
+ ### Payment methods
75
+
76
+ For users to be able to use a specific payment method you have declare it in the configuration.
77
+
78
+ | Method | Description |
79
+ |-----------------------------| ----------- |
80
+ | BLIK | [Web docs](https://docs-api.tpay.com/en/payment-methods/blik/) |
81
+ | Pbl **(Pay-By-Link)** | [Web docs](https://docs-api.tpay.com/en/payment-methods/pbl/) |
82
+ | Card | [Web docs](https://docs-api.tpay.com/en/payment-methods/cards/) |
83
+ | DigitalWallets | [GOOGLE_PAY](https://docs-api.tpay.com/en/payment-methods/google-pay/) ; [APPLE_PAY](https://docs-api.tpay.com/en/payment-methods/apple-pay/) |
84
+ | InstallmentPayments | [RATY_PEKAO](https://docs-api.tpay.com/en/payment-methods/installments/) |
85
+ | DeferredPayments **(BNPL)** | [PAY_PO](https://docs-api.tpay.com/en/payment-methods/bnpl/) |
86
+
87
+ ```typescript
88
+ new PaymentMethods(
89
+ [PaymentMethod.card, PaymentMethod.blik, PaymentMethod.transfer],
90
+ [DigitalWallet.googlePay, DigitalWallet.applePay],
91
+ [InstallmentPayment.ratyPekao, InstallmentPayment.payPo],
92
+ );
93
+ ```
94
+
95
+ #### Card
96
+
97
+ If you decide to enable the credit card payment option, you have to provide SSL certificates.
98
+
99
+ > [!tip]
100
+ > You can find SSL public key on you merchant panel at section `Integrations -> API -> Cards API`.
101
+
102
+ > [!tip]
103
+ > You can find public key on you merchant panel:
104
+ > - Acquirer Elavon: `Credit card payments -> API`
105
+ > - Acquirer Pekao: `Integrations -> API -> Cards API`
106
+
107
+ ```typescript
108
+ new CertificatePinningConfiguration('ssl_pinning')
109
+ ```
110
+
111
+ #### Google Pay configuration
112
+
113
+ In order to be able to use Google Pay method you have to provide your `merchant_id` to the SDK.
114
+
115
+ > [!tip]
116
+ > Your login name to the merchant panel is your merchant id.
117
+
118
+ ```typescript
119
+ new WalletConfiguration(
120
+ new GooglePayConfiguration('merchant_id'),
121
+ )
122
+ ```
123
+
124
+ #### Apple Pay configuration
125
+
126
+ In order to be able to use Apple Pay method you have to provide your `merchant_id` and `country_code` to the SDK.
127
+
128
+ > [!important]
129
+ > To obtain the merchantIdentifier, follow these steps:
130
+ > 1. Log in to your Apple Developer account.
131
+ > 2. Navigate to the `Certificates, Identifiers & Profiles` section.
132
+ > 3. Under `Identifiers,` select `Merchant IDs.`
133
+ > 4. Click the `+` button to create a new Merchant ID.
134
+ > 5. Fill in the required information and associate it with your app's Bundle ID.
135
+ > 6. Once created, the merchant identifier can be found in the list of Merchant IDs.
136
+ > 7. For more details, please follow [Apple Pay documentation](https://developer.apple.com/documentation/passkit/apple_pay/setting_up_apple_pay).
137
+
138
+ ```typescript
139
+ new WalletConfiguration(
140
+ new ApplePayConfiguration('merchant_id', 'country_code')
141
+ )
142
+ ```
143
+
144
+ ### Languages
145
+
146
+ Tpay SDK lets you decide what languages will be available in the Tpay's screen and which one of them
147
+ will be preferred/default.
148
+
149
+ Right now, SDK allows you to use 2 languages:
150
+
151
+ * `Language.pl` - polish
152
+ * `Language.en` - english
153
+
154
+ ```typescript
155
+ new Languages(Language.pl, [Language.en, Language.pl]);
156
+ ```
157
+
158
+ ### Merchant details
159
+
160
+ As a merchant, you can configure how information about you will be shown.
161
+ You can set up your `display name`, `city/headquarters` and `regulations link`.
162
+ You can choose to provide different copy for each language, or simply use one for all.
163
+
164
+ ```typescript
165
+ new MerchantDetails(
166
+ [
167
+ new LocalizedString(Language.pl, 'Sklep'),
168
+ new LocalizedString(Language.en, 'Merchant'),
169
+ ],
170
+ [
171
+ new LocalizedString(Language.pl, 'Warszawie'),
172
+ new LocalizedString(Language.en, 'Warsaw'),
173
+ ],
174
+ [
175
+ new LocalizedString(Language.pl, 'polish URL'),
176
+ new LocalizedString(Language.en, 'english URL'),
177
+ ]
178
+ );
179
+ ```
180
+
181
+ > [!warning]
182
+ > Every `LocalizedString` value **MUST NOT** be an empty string!
183
+ > Otherwise this may cause an app crash.
184
+
185
+ ### Summary
186
+ Beneath you will find how a complete configuration should look like.
187
+
188
+ ```typescript
189
+ const merchant = new Merchant(
190
+ new MerchantAuthorization(
191
+ 'client_id',
192
+ 'client_secret'
193
+ ),
194
+ TpayEnvironment.sandbox,
195
+ new CertificatePinningConfiguration('ssl_pinning'),
196
+ 'blik_alias',
197
+ new WalletConfiguration(
198
+ new GooglePayConfiguration('merchant_id'),
199
+ new ApplePayConfiguration('merchant_id', 'country_code')
200
+ )
201
+ );
202
+
203
+ const merchantDetails = new MerchantDetails(
204
+ [
205
+ new LocalizedString(Language.pl, 'Sklep'),
206
+ new LocalizedString(Language.en, 'Merchant'),
207
+ ],
208
+ [
209
+ new LocalizedString(Language.pl, 'Warszawie'),
210
+ new LocalizedString(Language.en, 'Warsaw'),
211
+ ],
212
+ [
213
+ new LocalizedString(Language.pl, 'polish URL'),
214
+ new LocalizedString(Language.en, 'english URL'),
215
+ ]
216
+ );
217
+
218
+ const languages = new Languages(Language.pl, [Language.en, Language.pl]);
12
219
 
13
- Tpay package contains a UI module. Users can interact with it to make payments.
220
+ const paymentMethods = new PaymentMethods(
221
+ [PaymentMethod.card, PaymentMethod.blik, PaymentMethod.transfer],
222
+ [DigitalWallet.googlePay, DigitalWallet.applePay],
223
+ [InstallmentPayment.ratyPekao, InstallmentPayment.payPo]
224
+ );
14
225
 
15
- ## Setup
226
+ const configuration = new TpayConfiguration(
227
+ merchant,
228
+ merchantDetails,
229
+ languages,
230
+ paymentMethods
231
+ );
232
+
233
+ await configure(configuration);
234
+ ```
16
235
 
17
236
  ### Android
18
237
 
@@ -23,26 +242,35 @@ to add the following code to your Activity.
23
242
  import com.tpay.util.TpayBackpressUtil;
24
243
 
25
244
  class MainActivity : ReactActivity() {
26
- override fun onBackPressed() {
27
- if (TpayBackpressUtil.isModuleVisible) {
28
- TpayBackpressUtil.onBackPressed()
29
- } else {
30
- super.onBackPressed()
31
- }
245
+ override fun onBackPressed() {
246
+ if (TpayBackpressUtil.isModuleVisible) {
247
+ TpayBackpressUtil.onBackPressed()
248
+ } else {
249
+ super.onBackPressed()
32
250
  }
251
+ }
33
252
  }
34
253
  ```
35
254
 
255
+ #### Proguard/R8
256
+
257
+ If you are using Proguard/R8 in your project, you have to add the following rules to the
258
+ `android/app/proguard-rules.pro` file, to keep Tpay SDK classes.
259
+
260
+ ```proguard
261
+ # Keep all Tpay SDK classes
262
+ -keep class com.tpay.sdk.** { *; }
263
+ ```
264
+
36
265
  ### iOS
37
266
 
38
267
  When integrating the Tpay payment module into your app, it’s important to ensure that the necessary permissions are correctly set up to ensure a smooth user experience.
268
+ The module allows the user to automatically fill the credit card form for secure payment processing. This feature requires you to setup the “Privacy - Camera Usage Description”.
39
269
 
40
- #### Privacy - Camera Usage Description
41
-
42
- The module allows the user to automatically fill the credit card form for secure payment processing. This feature requires you to setup the “Privacy - Camera Usage Description” in your app’s Info.plist file.
270
+ ### React Native CLI
43
271
 
44
- Integration Steps
45
- 1. Open your project’s Info.plist file.
272
+ Integration Steps:
273
+ 1. Open your project’s `Info.plist` file.
46
274
  2. Add the key-value pair for the “Privacy - Camera Usage Description” permission, explaining the purpose of camera access. Clearly state that the camera is used to facilitate the automatic filling of the credit card form for secure payment processing.
47
275
 
48
276
  Example:
@@ -51,7 +279,238 @@ Example:
51
279
  <string>We need access to your camera to automatically fill the credit card form for secure payment processing.</string>
52
280
  ```
53
281
 
54
- ## Handling UI module events
282
+ ### Expo Workflow
283
+
284
+ Integration Steps:
285
+ 1. Open your project’s `app.json` file.
286
+ 2. Add the key-value pair for the “Privacy - Camera Usage Description” permission, explaining the purpose of camera access. Clearly state that the camera is used to facilitate the automatic filling of the credit card form for secure payment processing.
287
+ 3. Add it under `ios -> infoPlist -> NSCameraUsageDescription`
288
+
289
+ Example:
290
+ ```json
291
+ "ios": {
292
+ "infoPlist": {
293
+ "NSCameraUsageDescription": "We need access to your camera to automatically fill the credit card form for secure payment processing."
294
+ }
295
+ },
296
+ ```
297
+
298
+ ## Handling payments
299
+
300
+ Tpay SDK provides two ways of handling payments:
301
+
302
+ - `Official SDK screens` - you can use Tpay's official screens where you just need to provide "soft"
303
+ information, like price, description or payer info.
304
+ - `Screenless` - you can use screenless functionalities, where you set callbacks for payments and
305
+ display all necessary information on your own screens.
306
+
307
+ ## Official SDK screens
308
+
309
+ To make integration with the SDK faster, we created 3 types of sheets that can be used to handle
310
+ payments:
311
+
312
+ * `SingleTransaction` - the most simple screen where the user can choose any payment method and proceed with it,
313
+ * `Tokenization` - screen that handles generating payment token from the credit card,
314
+ * `TokenPayment` - screen that handles payment with previously created token for credit card,
315
+
316
+ ### SingleTransaction
317
+
318
+ SingleTransaction flow opens a UI module and allows the customer to pick one of the defined payment methods.
319
+ This method requires setting up a few things in order to fulfill payment:
320
+
321
+ * `amount` - simply the price of the transaction
322
+ * `description` - transaction description
323
+ * `hiddenDescription` (optional) - description visible only to the merchant
324
+ * `payerContext` - information about payer
325
+ * `payer` - information about person who is making the payment
326
+ * `name` - payer name
327
+ * `email` - payer email
328
+ * `phone` - payer phone number
329
+ * `address` - payer address
330
+ * `city` - city name
331
+ * `countryCode` - country code in ISO 3166-1 alpha-2 format
332
+ * `address` - street address
333
+ * `postalCode` - postal code
334
+ * `automaticPaymentMethods` - configuration of automatic payments
335
+ * `tokenizedCards` - previously saved credit cards
336
+ * `token` - card token
337
+ * `cardTails` - last 4 digits of the card
338
+ * `brand` - card brand
339
+ * `blikAlias` - previously saved BLIK alias
340
+ * `value` - alias value
341
+ * `label` - alias label
342
+ * `notifications` - info about where the merchant should be notified about new transactions
343
+ * `notificationEmail` - email address to send notification to
344
+ * `notificationUrl` - URL to send notification to / URL to send tokens for tokenization
345
+
346
+ ```typescript
347
+ const transaction = new SingleTransaction(
348
+ new PayerContext(
349
+ new Payer(
350
+ 'John Doe',
351
+ 'john.doe@example.com',
352
+ '123456789',
353
+ new Address(
354
+ 'Test Street1',
355
+ 'Warsaw',
356
+ 'PL',
357
+ '00-007',
358
+ ),
359
+ ),
360
+ new AutomaticPaymentMethods(
361
+ [
362
+ new TokenizedCard(
363
+ 'token',
364
+ '1234',
365
+ CreditCardBrand.visa,
366
+ ),
367
+ new TokenizedCard(
368
+ 'token',
369
+ '1234',
370
+ CreditCardBrand.mastercard,
371
+ ),
372
+ ],
373
+ new BlikAlias(
374
+ true,
375
+ 'alias value',
376
+ 'label'
377
+ ),
378
+ ),
379
+ ),
380
+ 39.99,
381
+ 'transaction description',
382
+ 'hidden description',
383
+ new Notifications(
384
+ 'https://yourdomain.com/notifications',
385
+ 'email@address'
386
+ )
387
+ );
388
+
389
+ await startPayment(transaction);
390
+ ```
391
+
392
+ > [!important]
393
+ > Tpay SDK also supports `NFC` and `camera` card scanning:
394
+ > * `NFC` - Adding card info during transaction, user can tap on the NFC button.
395
+ Then, if NFC is enabled in the device, after holding physical card near the device, SDK will scan
396
+ the card's data and automatically fill the form with it.
397
+ > * `Camera` - Adding card info during transaction, user can tap on the camera button.
398
+ Then, if the camera scans card data successfully, form will be filled automatically.
399
+
400
+ #### Automatic Payments
401
+
402
+ Using `SingleTransaction` screen you can set up automatic BLIK or card payments.
403
+ Thanks to that, user will not have to enter BLIK/card data all over again each time making the
404
+ payment.
405
+
406
+ If user using a card as a payment method will opt-in saving card, on successful payment, on the link
407
+ specified as `Notifications -> url` Tpay backend will send information about the saved card token, tail and
408
+ brand.
409
+ Next, your backend has to send it to you, so you can use this info next time the same user will want
410
+ to pay with the card.
411
+ When you already have all required information, you can add `automaticPaymentMethods` to the `payerContext`.
412
+
413
+ ```typescript
414
+ new AutomaticPaymentMethods(
415
+ [
416
+ new TokenizedCard(
417
+ 'token',
418
+ '1234',
419
+ CreditCardBrand.visa,
420
+ ),
421
+ new TokenizedCard(
422
+ 'token',
423
+ '1234',
424
+ CreditCardBrand.mastercard,
425
+ ),
426
+ ],
427
+ new BlikAlias(
428
+ true,
429
+ 'alias value',
430
+ 'label'
431
+ ),
432
+ );
433
+ ```
434
+
435
+ ## Tokenization
436
+
437
+ Tpay SDK allows you to make credit card transactions without need of entering card's data each time.
438
+ Instead, you can create and use a token, associated with a specific card and user.
439
+
440
+ > [!important]
441
+ > There are 2 types of tokens you can use in transactions.
442
+ > * [Simple tokens](https://docs-api.tpay.com/en/tokenization/#tokenization-without-charging) -
443
+ tokens that go with card data upon transaction,
444
+ > * [Network tokens](https://docs-api.tpay.com/en/tokenization/#tokenization-plus) -
445
+ tokens that can be used without exposing the card details. Also, this token persists even if
446
+ card expires and user requests a new one.
447
+
448
+ > [!warning]
449
+ > For recurring payments, you can simply use created token to make transaction without need of user
450
+ > interaction.
451
+
452
+ ### Creating card token
453
+
454
+ > [!warning]
455
+ > `notificationUrl` should be the URL handled by your backend, because there will be sent token from
456
+ > the successful token creation.
457
+
458
+ ```typescript
459
+ const transaction = new Tokenization(
460
+ new Payer(
461
+ 'John Doe',
462
+ 'john.doe@example.com',
463
+ '123456789',
464
+ new Address(
465
+ 'Test Street1',
466
+ 'Warsaw',
467
+ 'PL',
468
+ '00-007',
469
+ ),
470
+ ),
471
+ 'https://yourdomain.com/notifications',
472
+ );
473
+
474
+ await tokenizeCard(transaction);
475
+ ```
476
+
477
+ ### Token payment
478
+
479
+ If you already have card token payment, you can simply proceed with an actual tokenization
480
+ transaction.
481
+
482
+ > [!warning]
483
+ > `cardToken` is a token sent to your backend during card tokenization process.
484
+
485
+ ```typescript
486
+ const transaction = new TokenPayment(
487
+ 'card_token',
488
+ new Payer(
489
+ 'John Doe',
490
+ 'john.doe@example.com',
491
+ '123456789',
492
+ new Address(
493
+ 'Test Street1',
494
+ 'Warsaw',
495
+ 'PL',
496
+ '00-007',
497
+ ),
498
+ ),
499
+ 10.99,
500
+ 'Payment description',
501
+ 'Hidden description',
502
+ new Notifications(
503
+ 'https://yourdomain.com/notifications',
504
+ 'email@address',
505
+ )
506
+ );
507
+
508
+ await startCardTokenPayment(transaction);
509
+ ```
510
+
511
+ ### Common
512
+ Each transaction with a predefined screen returns a result
513
+ that you can use to either show information to the user or e.g. log errors.
55
514
 
56
515
  ```typescript
57
516
  function handleResult(result: Result) {
@@ -91,169 +550,74 @@ function handleResult(result: Result) {
91
550
  }
92
551
  ```
93
552
 
94
- ## Configure Tpay package
95
-
96
- ```typescript
97
- async function configureTpay() {
98
- const authorization = new MerchantAuthorization('client id', 'client secret');
99
- const certificateConfiguration = new CertificatePinningConfiguration(
100
- 'public key hash'
101
- );
102
-
103
- const merchant = new Merchant(
104
- authorization,
105
- TpayEnvironment.production,
106
- certificateConfiguration,
107
- 'BLIK alias to register',
108
- new WalletConfiguration(
109
- new GooglePayConfiguration('merchant id'),
110
- new ApplePayConfiguration('merchant identifier', 'country code')
111
- )
112
- );
113
-
114
- const merchantDetails = new MerchantDetails(
115
- [
116
- new LocalizedString(Language.pl, 'Sklep'),
117
- new LocalizedString(Language.en, 'Merchant'),
118
- ],
119
- [
120
- new LocalizedString(Language.pl, 'Warszawie'),
121
- new LocalizedString(Language.en, 'Warsaw'),
122
- ],
123
- [
124
- new LocalizedString(Language.pl, 'polish url'),
125
- new LocalizedString(Language.en, 'english url'),
126
- ]
127
- );
128
-
129
- const languages = new Languages(Language.pl, [Language.en, Language.pl]);
130
- const paymentMethods = new PaymentMethods(
131
- [PaymentMethod.card, PaymentMethod.blik, PaymentMethod.transfer],
132
- [DigitalWallet.googlePay, DigitalWallet.applePay],
133
- [InstallmentPayment.ratyPekao]
134
- );
135
-
136
- const configuration = new TpayConfiguration(
137
- merchant,
138
- merchantDetails,
139
- languages,
140
- paymentMethods
141
- );
142
-
143
- const result = await configure(configuration);
144
- handleResult(result);
145
- }
146
- ```
147
-
148
- ## Payment with UI module
553
+ ## Screenless Payments
149
554
 
150
- ```typescript
151
- async function startUiPayment() {
152
- // Create a payer object, phone number and address fields are optional
153
- // Name and email fields can be empty, user will fill them in the UI
154
- const payer = new Payer('John Doe', 'john.doe@example.com', null, null);
155
-
156
- // Users can choose to save a credit card, it will result in your backend
157
- // receiving the tokenized card data, provide it there to enable one click payment.
158
- // You can also provide the BLIK alias to enable the one click BLIK payments.
159
- // To register the BLIK alias user has to make a payment with 6-digit code first and save the alias.
160
- // BLIK one click will be shown in the UI when the provided 'isRegistered' parameter is true.
161
- const automaticPaymentMethods = new AutomaticPaymentMethods(
162
- [new TokenizedCard('card token', 'card tail', CreditCardBrand.mastercard)],
163
- new BlikAlias(true, 'alias value', 'alias label')
164
- );
165
-
166
- // Tokenized card and BLIK alias registration data will be sent to the notification url.
167
- // Payments will result in a email notifications sent to notification email.
168
- const notifications = new Notifications(
169
- 'https://yourdomain.com/notifications',
170
- 'store@yourdomain.com'
171
- );
555
+ Screenless payments are a special type of payment functionality that gives you the whole power of
556
+ payment process, but do not limit you to using predefined Tpay screens.
172
557
 
173
- const payerContext = new PayerContext(payer, automaticPaymentMethods);
558
+ ### Get payment channels
174
559
 
175
- const transaction = new SingleTransaction(
176
- payerContext,
177
- 39.99,
178
- 'transaction description',
179
- 'description of payment shown to merchant',
180
- notifications
181
- );
560
+ To be able to use screenless functionalities you will need to know which payment methods are
561
+ available to your merchant account. To get them, you can simply call `getAvailablePaymentChannels`
562
+ method on the `TpayPlatform.instance` and set up result observer for them.
182
563
 
183
- const result = await startPayment(transaction);
184
- handleResult(result);
185
- }
186
- ```
187
-
188
- ## Credit card tokenization with UI module
564
+ > [!warning]
565
+ > Available methods needs to be filtered by the `amount` of the transaction, because some payment
566
+ > methods have specific constraints, like minimum or maximum amount.
189
567
 
190
568
  ```typescript
191
- async function startCreditCardTokenizationUi() {
192
- // Create a payer object, phone number and address fields are optional
193
- // Name and email fields can be empty, user will fill them in the UI
194
- const payer = new Payer('John Doe', 'john.doe@example.com', null, null);
195
-
196
- // Tokenized card data will be sent to notification url
197
- const tokenization = new Tokenization(
198
- payer,
199
- 'https://yourdomain.com/notifications'
200
- );
201
-
202
- const result = await tokenizeCard(tokenization);
203
- handleResult(result);
204
- }
205
- ```
569
+ async function getPaymentMethods() {
570
+ const result = await getAvailablePaymentChannels();
206
571
 
207
- ## Credit card token payment with UI module
208
-
209
- ```typescript
210
- async function startCreditCardTokenPaymentUi() {
211
- // Create a payer object, phone number and address fields are optional
212
- // Name and email fields are required, because user cannot fill them in the UI
213
- const payer = new Payer('John Doe', 'john.doe@example.com', null, null);
214
-
215
- const notifications = new Notifications(
216
- 'https://yourdomain.com/notifications',
217
- 'store@yourdomain.com'
218
- );
572
+ if (result instanceof PaymentChannelsSuccess) {
573
+ result.channels.forEach(channel => {
574
+ channel.constraints.forEach(constraint => {
575
+ switch (constraint.type) {
576
+ case PaymentConstraintType.amount:
577
+ // check if your payment amount is between
578
+ // - amountConstraint.minimum
579
+ // - amountConstraint.maximum
580
+ // this constraint can have:
581
+ // - only minimum value
582
+ // - only maximum value
583
+ // - minimum and maximum values
584
+ const amountConstraint = constraint as AmountPaymentConstraint;
585
+ break;
586
+ }
219
587
 
220
- const tokenPayment = new TokenPayment(
221
- 'credit card token',
222
- payer,
223
- 39.99,
224
- 'transaction description',
225
- 'description of payment shown to merchant',
226
- notifications
227
- );
588
+ // display payment channel if all payment constraints are satisfied
589
+ });
590
+ });
591
+ }
228
592
 
229
- const result = await startCardTokenPayment(tokenPayment);
230
- handleResult(result);
593
+ if (result instanceof PaymentChannelsError) {
594
+ // handle error
595
+ }
231
596
  }
232
597
  ```
233
598
 
234
- ## Screenless Payments
599
+ ### Configuration
235
600
 
236
- Tpay package provides methods to create payments without displaying the UI module.
601
+ Before you run any screenless payment we do recommend setting up a function to handle specific payment results.
602
+ You will need this to be able to monitor each payment status, i.e. it's status in real time. To do so,
603
+ create a function, that will accept `ScreenlessResult` as a parameter and handle each of them.
237
604
 
238
- ## Handling screenless events
605
+ > [!warning]
606
+ > Note that long polling mechanism will start only when it's needed:
607
+ > - `ScreenlessPaymentCreated`: when payment is created and you have to display payment URL.
608
+ > - `ScreenlessBlikAmbiguousAlias`: when payment is created and there are more than one BLIK alias registered,
609
+ so you have to display them to the user and continue payment with selected one.
239
610
 
240
611
  ```typescript
241
612
  function handleScreenlessResult(result: ScreenlessResult) {
242
613
  if (result instanceof ScreenlessPaid) {
243
614
  // payment completed successfully
244
- // read transactionId via result.transactionId
245
615
  }
246
616
  if (result instanceof ScreenlessPaymentCreated) {
247
- // payment was successfully created
248
- // if it was a BLIK payment user has to accept it in bank app
249
- // if it was a credit card, transfer or installment payment you have to
250
- // display result.paymentUrl to finish the payment
251
- // it is advised to use long polling mechanism to observe payment status
252
- // you can get transaction id from result.transactionId
617
+ // payment created, use result.paymentUrl to redirect the user to the payment page
253
618
  }
254
619
  if (result instanceof ScreenlessPaymentError) {
255
620
  // creating payment failed
256
- // read error message via result.error
257
621
  }
258
622
  if (result instanceof ScreenlessConfiguredPaymentFailed) {
259
623
  // creating payment failed because of error with:
@@ -261,147 +625,351 @@ function handleScreenlessResult(result: ScreenlessResult) {
261
625
  // - BLIK code or BLIK alias
262
626
  }
263
627
  if (result instanceof ScreenlessBlikAmbiguousAlias) {
264
- // when using BLIK payment with alias this result indicates
265
- // that user has alias registered in more than one bank
266
- // display result.aliases to the user and
267
- // continue payment using screenlessAmbiguousBLIKPayment(...) method
628
+ // single alias has been registered multiple times, use result.aliases to let user choose desired one
268
629
  }
269
630
  if (result instanceof ScreenlessValidationError) {
270
- // provided data is invalid
271
- // check error message via result.message
631
+ // passed data is incorrect
272
632
  }
273
633
  if (result instanceof ScreenlessMethodCallError) {
274
- // package error occurred
275
- // read error message via result.message
634
+ // something went wrong with the plugin
276
635
  }
277
636
  }
278
637
  ```
279
638
 
280
- ## Common screenless objects
639
+ ### Screenless Credit Card Payment
281
640
 
282
- Screenless payments require the following objects.
641
+ CreditCardPayment allows you to create payments with credit card data.
283
642
 
284
643
  ```typescript
285
- // Create a payer object, phone number and address fields are optional
286
- // Name and email fields are required in screenless payments
287
- const payer = new Payer('John Doe', 'john.doe@example.com', null, null);
288
-
289
- // Hidden description can be used to search for transaction internally.
290
- // Tpay website (if needed) will open in the provided language.
291
- const paymentDetails = new PaymentDetails(
292
- 39.99,
293
- 'transaction description',
294
- 'hidden description',
295
- Language.pl
644
+ const transaction = new CreditCardPayment(
645
+ new CreditCard(
646
+ 'card_number',
647
+ new ExpirationDate('12', '24'),
648
+ '123',
649
+ new CreditCardConfig(
650
+ false,
651
+ 'yourstore.com',
652
+ null,
653
+ ),
654
+ ),
655
+ null,
656
+ new PaymentDetails(
657
+ 19.99,
658
+ 'transaction description',
659
+ 'hidden description',
660
+ Language.pl,
661
+ ),
662
+ new Payer(
663
+ 'John Doe',
664
+ 'john.doe@example.com',
665
+ '123456789',
666
+ new Address(
667
+ 'Test Street1',
668
+ 'Warsaw',
669
+ 'PL',
670
+ '00-007',
671
+ ),
672
+ ),
673
+ new Callbacks(
674
+ new Redirects('https://success.url', 'https://error.url'),
675
+ new Notifications(
676
+ 'https://yourdomain.com/notifications',
677
+ 'email@address',
678
+ ),
679
+ )
296
680
  );
297
681
 
298
- // User will be redirected to these urls after a payment on the Tpay website.
299
- // Catch these urls in your web view to know if the payment was successful or not.
300
- const redirects = new Redirects(
301
- 'https://yourdomain.com/success',
302
- 'https://yourdomain.com/error'
682
+ const result = await screenlessCreditCardPayment(transaction);
683
+
684
+ handleScreenlessResult(result);
685
+ ```
686
+
687
+ > [!warning]
688
+ > If CreditCardPayment returns `ScreenlessPaymentCreated` result, you have to handle `paymentUrl`
689
+ > sent with it and redirect user to it in order to complete the payment.
690
+
691
+ #### Tokenization
692
+
693
+ You can also Opt-in to generate a credit card token for future payments
694
+ if you want to let users pay for transactions with previously used card.
695
+ To do so, in `creditCard -> config` object, set the `shouldSave` to true.
696
+
697
+ ```typescript
698
+ new CreditCardConfig(
699
+ true,
700
+ 'yourstore.com',
701
+ null,
702
+ )
703
+ ```
704
+
705
+ > [!warning]
706
+ > Generated card token will be sent to `notificationUrl` specified in the notifications callbacks.
707
+
708
+ If you already have a credit card token, you can then set up token payment omitting credit card
709
+ info.
710
+ To do so, use `creditCardToken` instead of `creditCard` field.
711
+
712
+ ```typescript
713
+ const transaction = new CreditCardPayment(
714
+ null,
715
+ 'creadit_card_token',
716
+ new PaymentDetails(
717
+ 19.99,
718
+ 'transaction description',
719
+ 'hidden description',
720
+ Language.pl,
721
+ ),
722
+ new Payer(
723
+ 'John Doe',
724
+ 'john.doe@example.com',
725
+ '123456789',
726
+ new Address(
727
+ 'Test Street1',
728
+ 'Warsaw',
729
+ 'PL',
730
+ '00-007',
731
+ ),
732
+ ),
733
+ new Callbacks(
734
+ new Redirects('https://success.url', 'https://error.url'),
735
+ new Notifications(
736
+ 'https://yourdomain.com/notifications',
737
+ 'email@address',
738
+ ),
739
+ )
303
740
  );
304
741
 
305
- // Tokenized card and BLIK alias registration data will be sent to the notification url.
306
- // Payments will result in a email notifications sent to notification email.
307
- const notifications = new Notifications(
308
- 'https://yourdomain.com/notifications',
309
- 'store@yourdomain.com'
742
+ const result = await screenlessCreditCardPayment(transaction);
743
+
744
+ handleScreenlessResult(result);
745
+ ```
746
+
747
+ #### Recurring Payments
748
+
749
+ > [!important]
750
+ > Right now, ReactNative's Tpay SDK does not support recurring payments.
751
+ > If you'd like to implement them manually,
752
+ > check our [API support for recurring payments](https://docs.sandbox.tpay.com/en/first-steps/integration-methods/).
753
+
754
+ ### Screenless BLIK payment
755
+ Tpay SDK let's make transactions with BLIK as well. Simply use `BLIKPayment` class.
756
+
757
+ ```typescript
758
+ const blikPayment = new BlikPayment(
759
+ 'blik_code',
760
+ null,
761
+ new PaymentDetails(
762
+ 27.99,
763
+ 'transaction description',
764
+ 'hidden description',
765
+ Language.pl,
766
+ ),
767
+ new Payer(
768
+ 'John Doe',
769
+ 'john.doe@example.com',
770
+ '123456789',
771
+ new Address(
772
+ 'Test Street1',
773
+ 'Warsaw',
774
+ 'PL',
775
+ '00-007',
776
+ ),
777
+ ),
778
+ new Callbacks(
779
+ new Redirects('https://success.url', 'https://error.url'),
780
+ new Notifications(
781
+ 'https://yourdomain.com/notifications',
782
+ 'email@address',
783
+ ),
784
+ ),
310
785
  );
311
786
 
312
- const callbacks = new Callbacks(redirects, notifications);
787
+ const screenlessResult = await screenlessBLIKPayment(blikPayment);
788
+
789
+ handleScreenlessResult(screenlessResult);
313
790
  ```
314
791
 
315
- ## Screenless BLIK payment
792
+ #### BLIK Alias Payment
316
793
 
317
- Using BLIK user can pay with 6-digit code or alias (for returning customers).
794
+ If you have for example a returning users and you want to make their payments with BLIK even
795
+ smoother,
796
+ you can register BLIK Alias for them, so they will only be prompted to accept payment in their
797
+ banking app,
798
+ without need of entering BLIK code each time they want to make the payment.
799
+
800
+ > [!warning]
801
+ > In order to register alias for a user/payment, you have to set `isRegistered` parameter to `false`.
802
+ > Then, a successful payment will register the alias in Tpay system
803
+ > and next time user will be able to use it.
318
804
 
319
805
  ```typescript
320
- async function startScreenlessBlikPayment() {
321
- // You have to provide either code or alias.
322
- // If you provide both, package will try to register the alias.
323
- // One alias can be registered in multiple banks.
324
- const blikPayment = new BlikPayment(
325
- '6-digit code',
326
- new BlikAlias(true, 'alias value', 'alias label'),
327
- paymentDetails,
328
- payer,
329
- callbacks
330
- );
331
-
332
- const screenlessResult = await screenlessBLIKPayment(blikPayment);
333
- handleScreenlessResult(screenlessResult);
334
- }
806
+ const blikPayment = new BlikPayment(
807
+ '777123',
808
+ new BlikAlias(false, '1234', 'label_1234'),
809
+ // rest of the BLIKPayment configuration
810
+ );
335
811
  ```
336
812
 
337
- ## Screenless ambiguous BLIK payment
813
+ If the payment were successful, you can assume an alias was created and can be used for the future
814
+ payments.
338
815
 
339
- screenlessBLIKPayment(...) method can return a ScreenlessBlikAmbiguousAlias result,
340
- this means that user has BLIK alias registered in more than one bank.
341
- You need to display ambiguous aliases provided in ScreenlessBlikAmbiguousAlias result to the user.
342
- After that, you need to continue the payment with ambiguous alias selected by user using screenlessAmbiguousBLIKPayment(...) method.
816
+ > [!warning]
817
+ > If you already have registered alias for a user, you can set up `isRegistered` parameter to `true`.
818
+
819
+ > [!warning]
820
+ > To be able to pay with BLIK alias, you **MUST** set the code parameter to `null`.
343
821
 
344
822
  ```typescript
345
- async function startAmbiguousBlikPayment(
346
- result: ScreenlessBlikAmbiguousAlias,
347
- ambiguousAlias: AmbiguousAlias
348
- ) {
349
- // BLIK alias used to create payment with screenlessBLIKPayment(...) method
350
- const blikAlias = new BlikAlias(true, 'alias value', 'alias label');
351
-
352
- // Provide transaction id from result and ambiguous alias selected by user
353
- const ambiguousBlikPayment = new AmbiguousBlikPayment(
354
- result.transactionId,
355
- blikAlias,
356
- ambiguousAlias
357
- );
358
-
359
- const screenlessResult = await screenlessAmbiguousBLIKPayment(
360
- ambiguousBlikPayment
361
- );
362
- handleScreenlessResult(screenlessResult);
363
- }
823
+ const blikPayment = new BlikPayment(
824
+ null,
825
+ new BlikAlias(false, '1234', 'label_1234'),
826
+ // rest of the BLIKPayment configuration
827
+ );
364
828
  ```
365
829
 
366
- ## Screenless transfer payment
830
+ #### BLIK Ambiguous Alias Payment
831
+
832
+ Sometimes, there is a possibility for one alias to be registered more than once. For example, if
833
+ you register alias associated with one user for the multiple banks.
834
+ In such a situation, you have to fetch those aliases from Tpay API and show them to user to let him
835
+ choose one for the payment.
367
836
 
368
- Transfer payment requires a channelId of bank in Tpay system.
837
+ In BLIKPayment's call in the execute method you can get `ScreenlessBlikAmbiguousAlias`
838
+ type of result,
839
+ that will indicate that current alias was registered more than once.
840
+ This result holds all possible variations of the alias you used to start payment with in `aliases`
841
+ field.
842
+ You have to simply show them to the user, let him choose, and then use the chosen alias to retry the
843
+ payment.
369
844
 
370
845
  ```typescript
371
- async function startScreenlessTransferPayment() {
372
- // Provide channelId of a bank
373
- const transferPayment = new TransferPayment(
374
- 3,
375
- paymentDetails,
376
- payer,
377
- callbacks
378
- );
379
-
380
- const screenlessResult = await screenlessTransferPayment(transferPayment);
381
- handleScreenlessResult(screenlessResult);
846
+ if (result instanceof ScreenlessBlikAmbiguousAlias) {
847
+ showAmbiguousAliases(result.aliases);
382
848
  }
383
849
  ```
384
850
 
385
- ## Screenless Raty Pekao payment
851
+ > [!warning]
852
+ > In such scenario, you have to use different class to make the payment than at the beginning.
853
+ > ```typescript
854
+ > const blikPayment = new AmbiguousBlikPayment(
855
+ > transactionId,
856
+ > new BlikAlias(true, '1234', 'label_1234'),
857
+ > new AmbiguousAlias('name','code',),
858
+ > );
859
+ >
860
+ > const screenlessResult = await screenlessAmbiguousBLIKPayment(blikPayment);
861
+ >
862
+ > handleScreenlessResult(screenlessResult);
863
+ > ```
864
+
865
+ > [!important]
866
+ > Right now, Tpay SDK does NOT support recurring payments with BLIK
867
+ > In order to achieve that, check
868
+ > our [API support for BLIK recurring payments](https://docs-api.tpay.com/en/payment-methods/blik/#blik-recurring-payments).
386
869
 
387
- Raty Pekao payment requires a channelId of Raty Pekao variant.
870
+ ### Screenless Transfer Payment
871
+
872
+ Tpay SDK allows you to make transfer payments with bank available to your merchant account.
873
+
874
+ > [!tip]
875
+ > To get banks with their channel ids check
876
+ > the [Get Payment Channels](https://docs-api.tpay.com/en/first-steps/list-of-payment-methods/)
877
+ > section.
878
+
879
+ After your customer chooses their bank from the list, you can use it's `channelId` to make the payment.
388
880
 
389
881
  ```typescript
390
- async function startScreenlessRatyPekaoPayment() {
391
- // Provide channelId of Raty Pekao variant
392
- const ratyPekaoPayment = new RatyPekaoPayment(
393
- 80,
394
- paymentDetails,
395
- payer,
396
- callbacks
397
- );
398
-
399
- const screenlessResult = await screenlessRatyPekaoPayment(ratyPekaoPayment);
400
- handleScreenlessResult(screenlessResult);
401
- }
882
+ const transaction = new TransferPayment(
883
+ 15,
884
+ new PaymentDetails(
885
+ 0.15,
886
+ 'transaction description',
887
+ 'hidden description',
888
+ Language.pl,
889
+ ),
890
+ new Payer(
891
+ 'John Doe',
892
+ 'john.doe@example.com',
893
+ '123456789',
894
+ new Address(
895
+ 'Test Street1',
896
+ 'Warsaw',
897
+ 'PL',
898
+ '00-007',
899
+ ),
900
+ ),
901
+ new Callbacks(
902
+ new Redirects('https://success.url', 'https://error.url'),
903
+ new Notifications(
904
+ 'https://yourdomain.com/notifications',
905
+ 'email@address',
906
+ ),
907
+ ),
908
+ );
909
+
910
+ const screenlessResult = await screenlessTransferPayment(transaction);
911
+
912
+ handleScreenlessResult(screenlessResult);
402
913
  ```
403
914
 
404
- ## Screenless PayPo payment
915
+ > [!warning]
916
+ > If TransferPayment returns `ScreenlessPaymentCreated` result, you have to handle `paymentUrl`
917
+ > sent with it and redirect user to it in order to complete the payment.
918
+
919
+ ### Screenless Installment Payments
920
+
921
+ Tpay SDK allows you to create long term installment payments.
922
+
923
+ ```typescript
924
+ const transaction = new RatyPekaoPayment(
925
+ 15,
926
+ new PaymentDetails(
927
+ 71.15,
928
+ 'transaction description',
929
+ 'hidden description',
930
+ Language.pl,
931
+ ),
932
+ new Payer(
933
+ 'John Doe',
934
+ 'john.doe@example.com',
935
+ '123456789',
936
+ new Address(
937
+ 'Test Street1',
938
+ 'Warsaw',
939
+ 'PL',
940
+ '00-007',
941
+ ),
942
+ ),
943
+ new Callbacks(
944
+ new Redirects('https://success.url', 'https://error.url'),
945
+ new Notifications(
946
+ 'https://yourdomain.com/notifications',
947
+ 'email@address',
948
+ ),
949
+ ),
950
+ );
951
+
952
+ const screenlessResult = await screenlessRatyPekaoPayment(transaction);
953
+
954
+ handleScreenlessResult(screenlessResult);
955
+ ```
956
+
957
+ > [!warning]
958
+ > If RatyPekaoPayment returns `ScreenlessPaymentCreated` result, you have to handle `paymentUrl`
959
+ > sent with it and redirect user to it in order to complete the payment.
960
+
961
+ ### Screenless Deferred Payments
962
+
963
+ Tpay SDK allows you to create deferred payments (BNPL) using PayPo method.
964
+
965
+ > [!warning]
966
+ > For PayPo payment to work, amount of the payment must be at least 40PLN!
967
+ > For more information about PayPo payments
968
+ > check [our PayPo documentation](https://docs-api.tpay.com/en/payment-methods/bnpl/#paypo).
969
+
970
+ > [!tip]
971
+ > For sandbox, working phone number is `500123456`
972
+
405
973
  ```typescript
406
974
  async function startScreenlessPayPoPayment() {
407
975
  const payPoPayment = new PayPoPayment(paymentDetails, payer, callbacks);
@@ -410,159 +978,201 @@ async function startScreenlessPayPoPayment() {
410
978
  }
411
979
  ```
412
980
 
413
- ## Screenless credit card payment
981
+ > [!warning]
982
+ > If PayPoPayment returns `ScreenlessPaymentCreated` result, you have to handle `paymentUrl`
983
+ > sent with it and redirect user to it in order to complete the payment.
414
984
 
415
- Credit card payment can be created with credit card data or credit card token (for returning customers).
985
+ ## Screenless Google Pay payment (Android only)
986
+
987
+ Google Pay payment requires a Google Pay token.
416
988
 
417
989
  ```typescript
418
- async function startScreenlessCreditCardPayment() {
419
- const creditCard = new CreditCard(
420
- 'card number',
421
- new ExpirationDate('month', 'year'),
422
- 'cvv',
423
- // Configure if the credit card should be tokenized after payment
424
- // Provide your domain, it's used while encrypting the credit card data
425
- new CreditCardConfig(false, 'yourdomain.com', null)
426
- );
427
- const creditCardToken = 'card token';
428
-
429
- // You have to provide either credit card or credit card token
430
- const creditCardPayment = new CreditCardPayment(
431
- creditCard,
432
- creditCardToken,
433
- paymentDetails,
434
- payer,
435
- callbacks
436
- );
437
-
438
- const screenlessResult = await screenlessCreditCardPayment(creditCardPayment);
439
- handleScreenlessResult(screenlessResult);
440
- }
990
+ const transaction = new PayPoPayment(
991
+ new PaymentDetails(
992
+ 71.15,
993
+ 'transaction description',
994
+ 'hidden description',
995
+ Language.pl,
996
+ ),
997
+ new Payer(
998
+ 'John Doe',
999
+ 'john.doe@example.com',
1000
+ '123456789',
1001
+ new Address(
1002
+ 'Test Street1',
1003
+ 'Warsaw',
1004
+ 'PL',
1005
+ '00-007',
1006
+ ),
1007
+ ),
1008
+ new Callbacks(
1009
+ new Redirects('https://success.url', 'https://error.url'),
1010
+ new Notifications(
1011
+ 'https://yourdomain.com/notifications',
1012
+ 'email@address',
1013
+ ),
1014
+ ),
1015
+ );
1016
+
1017
+ const screenlessResult = await screenlessPayPoPayment(transaction);
1018
+
1019
+ handleScreenlessResult(screenlessResult);
441
1020
  ```
442
1021
 
443
- ## Screenless Google Pay payment (Android only)
1022
+ > [!warning]
1023
+ > If PayPoPayment returns `ScreenlessPaymentCreated` result, you have to handle `paymentUrl`
1024
+ > sent with it and redirect user to it in order to complete the payment.
444
1025
 
445
- Google Pay payment requires a Google Pay token.
1026
+ ### Screenless Google Pay Payment (Android only)
1027
+
1028
+ Tpay SDK allows you to perform Google Pay transactions.
446
1029
 
447
1030
  ```typescript
448
- async function startScreenlessGooglePayPayment() {
449
- const googlePayPayment = new GooglePayPayment(
450
- 'Google Pay token',
451
- paymentDetails,
452
- payer,
453
- callbacks
454
- );
455
-
456
- const screenlessResult = await screenlessGooglePayPayment(googlePayPayment);
457
- handleScreenlessResult(screenlessResult);
458
- }
1031
+ const transaction = new GooglePayPayment(
1032
+ 'google_pay_token',
1033
+ new PaymentDetails(
1034
+ 71.15,
1035
+ 'transaction description',
1036
+ 'hidden description',
1037
+ Language.pl,
1038
+ ),
1039
+ new Payer(
1040
+ 'John Doe',
1041
+ 'john.doe@example.com',
1042
+ '123456789',
1043
+ new Address(
1044
+ 'Test Street1',
1045
+ 'Warsaw',
1046
+ 'PL',
1047
+ '00-007',
1048
+ ),
1049
+ ),
1050
+ new Callbacks(
1051
+ new Redirects('https://success.url', 'https://error.url'),
1052
+ new Notifications(
1053
+ 'https://yourdomain.com/notifications',
1054
+ 'email@address',
1055
+ ),
1056
+ ),
1057
+ );
1058
+
1059
+ const screenlessResult = await screenlessGooglePayPayment(transaction);
1060
+
1061
+ handleScreenlessResult(screenlessResult);
459
1062
  ```
460
1063
 
461
- ## Screenless Apple Pay payment (iOS only)
1064
+ > [!warning]
1065
+ > If GooglePayPayment returns `ScreenlessPaymentCreated` result, you have to handle `paymentUrl`
1066
+ > sent with it and redirect user to it in order to complete the payment.
1067
+
1068
+ > [!warning]
1069
+ > Take under consideration, that choosing this option,
1070
+ > you have to configure whole Google Wallet SDK and fetch Google Pay token on your own.
1071
+ > For `ANDROID` system only, we provide a bit smoother way of handling Google Pay transactions with our wrappers.
1072
+
1073
+ #### Google Pay Utils (Android only)
1074
+
1075
+ If you do not want to configure whole Google Pay functionality, you can use `GooglePlayUtil` class.
1076
+ It will handle all payment, with additional info in bottom sheet and send you all the needed info in
1077
+ callback.
462
1078
 
463
- Apple Pay payment requires a Apple Pay token.
1079
+ > [!important]
1080
+ > To use GooglePayUtil, first, you have to configure them it.
464
1081
 
465
1082
  ```typescript
466
- async function startScreenlessApplePayPayment() {
467
- const applePayPayment = new ApplePayPayment(
468
- 'Apple Pay token',
469
- paymentDetails,
470
- payer,
471
- callbacks
472
- );
473
-
474
- const screenlessResult = await screenlessApplePayPayment(applePayPayment);
475
- handleScreenlessResult(screenlessResult);
1083
+ const config = new GooglePayUtilsConfiguration(
1084
+ 19.71,
1085
+ 'Test Merchant',
1086
+ 'merchant_id',
1087
+ GooglePayEnvironment.test,
1088
+ null,
1089
+ );
1090
+
1091
+ const configResult = await configureGooglePayUtils(config);
1092
+
1093
+ if (configResult instanceof GooglePayConfigureError) {
1094
+ // handle error
1095
+ } else if (configResult instanceof GooglePayConfigureSuccess) {
1096
+ // handle success
476
1097
  }
477
1098
  ```
478
1099
 
479
- ## Google Pay utils (Android only)
1100
+ > [!warning]
1101
+ > Before you use our utils, make sure Google Pay is enabled in the device. Use `isGooglePayAvailable` method.
480
1102
 
481
- Tpay package offers few convenience methods to interact with Google Pay.
1103
+ ```typescript
1104
+ const isAvailable = await isGooglePayAvailable()
1105
+
1106
+ if (isAvailable) {
1107
+ // display Google Pay button
1108
+ }
1109
+ ```
1110
+
1111
+ Next, you can open Google Pay module and let the user choose his credit card, so you can use it to make
1112
+ the payment.
482
1113
 
483
1114
  ```typescript
484
- async function googlePayUtils() {
485
- // Create configuration object by providing the final price,
486
- // your store name, your merchant id and a Google Pay environment
487
- const googlePayUtilsConfiguration = new GooglePayUtilsConfiguration(
488
- 39.99,
489
- 'your store name',
490
- 'your merchant id',
491
- GooglePayEnvironment.production,
492
- null
493
- );
494
- const configurationResult = await configureGooglePayUtils(
495
- googlePayUtilsConfiguration
496
- );
497
-
498
- if (configurationResult instanceof GooglePayConfigureError) {
499
- // configuration failed
500
- // check error message via configurationResult.message
501
- }
502
- if (configurationResult instanceof GooglePayConfigureSuccess) {
503
- // utils are configured
504
-
505
- const isAvailable = await isGooglePayAvailable();
506
- if (isAvailable) {
507
- // show Google Pay button
508
-
509
- // if user clicks on the button do the following
510
- const googlePayOpenResult = await openGooglePay();
511
-
512
- if (googlePayOpenResult instanceof GooglePayOpenSuccess) {
513
- // credit card data was received
514
- // read Google Pay token via googlePayOpenResult.token
515
- // and use it with GooglePayPayment
516
- }
517
- if (googlePayOpenResult instanceof GooglePayOpenCancelled) {
518
- // user closed Google Pay
519
- }
520
- if (googlePayOpenResult instanceof GooglePayOpenNotConfigured) {
521
- // Google Pay utils not configured
522
- }
523
- if (googlePayOpenResult instanceof GooglePayOpenUnknownError) {
524
- // unknown error has occurred
525
- }
526
- }
527
- }
1115
+ const googlePayResult = await openGooglePay()
1116
+
1117
+ if (googlePayResult instanceof GooglePayOpenSuccess) {
1118
+ // credit card data was received
1119
+ }
1120
+ else if (googlePayResult instanceof GooglePayOpenCancelled) {
1121
+ // user closed Google Pay
1122
+ }
1123
+ else if (googlePayResult instanceof GooglePayOpenNotConfigured) {
1124
+ // Google Pay utils not configured
1125
+ }
1126
+ else if (googlePayResult instanceof GooglePayOpenUnknownError) {
1127
+ // unknown error has occurred
528
1128
  }
529
1129
  ```
530
1130
 
531
- ## Fetch payment channels
1131
+ > [!important]
1132
+ > If `googlePayResult` returns `GooglePayOpenSuccess`, you **HAVE TO** use it's content to make an actual
1133
+ > payment buy using `GooglePayPayment` and `screenlessGooglePayPayment`.
1134
+
1135
+ ### Screenless Apple Pay payment
1136
+
1137
+ Tpay SDK allows you to perform Apple Pay transactions.
532
1138
 
533
- Fetch available payment channels for your merchant account. Filter channels based on availability and payment constraints.
1139
+ > [!warning]
1140
+ > To be able to complete Apple Pay payment, you will need `apple_pay_token`. You **HAVE TO**
1141
+ > acquire a token by yourself. To do that check
1142
+ > official [Apple Pay documentation](https://developer.apple.com/design/human-interface-guidelines/apple-pay#app-top)
534
1143
 
535
1144
  ```typescript
536
- async function fetchPaymentChannels() {
537
- const result = await getPaymentChannels();
538
- if (result instanceof PaymentChannelsSuccess) {
539
- // payment channels received
1145
+ const applePayPayment = new ApplePayPayment(
1146
+ 'apple_pay_token',
1147
+ new PaymentDetails(
1148
+ 71.15,
1149
+ 'transaction description',
1150
+ 'hidden description',
1151
+ Language.pl,
1152
+ ),
1153
+ new Payer(
1154
+ 'John Doe',
1155
+ 'john.doe@example.com',
1156
+ '123456789',
1157
+ new Address(
1158
+ 'Test Street1',
1159
+ 'Warsaw',
1160
+ 'PL',
1161
+ '00-007',
1162
+ ),
1163
+ ),
1164
+ new Callbacks(
1165
+ new Redirects('https://success.url', 'https://error.url'),
1166
+ new Notifications(
1167
+ 'https://yourdomain.com/notifications',
1168
+ 'email@address',
1169
+ ),
1170
+ ),
1171
+ );
540
1172
 
541
- result.channels.forEach((channel) => {
542
- // channel can have payment constraints
543
- // that need to be satisfied, otherwise the payment creation will fail
544
- channel.constraints.forEach((constraint) => {
545
- switch (constraint.type) {
546
- case PaymentConstraintType.amount:
547
- // check if your payment amount is between
548
- // - amountConstraint.minimum
549
- // - amountConstraint.maximum
550
- // this constraint can have:
551
- // - only minimum value
552
- // - only maximum value
553
- // - minimum and maximum values
554
- const amountConstraint = constraint as AmountPaymentConstraint;
555
- }
556
- });
1173
+ const screenlessResult = await screenlessApplePayPayment(applePayPayment);
557
1174
 
558
- // display payment channel if all payment constraints are satisfied
559
- });
560
- }
561
- if (result instanceof PaymentChannelsError) {
562
- // error occurred
563
- // read error message via result.message
564
- }
565
- }
1175
+ handleScreenlessResult(screenlessResult);
566
1176
  ```
567
1177
 
568
1178
  ## License