@paystack/checkout-js 1.41.0 → 1.41.1

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 +0 -1335
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -13,1338 +13,3 @@ or just grab the js file and add it to your html directly
13
13
  ```html
14
14
  <script src="https://js.paystack.co/v1/checkout.js"></script>
15
15
  ```
16
-
17
- # Quick Start
18
-
19
- ## Usage via NPM/Yarn
20
-
21
- ```js
22
- import { Transaction } from 'checkout-js';
23
-
24
- async function chargeCustomerCard() {
25
- const transactionData = {
26
- email: 'test@paystack.com', // replace this with customer email
27
- amount: 100,
28
- key: 'your_paystack_public_key',
29
- };
30
-
31
- try {
32
- const transaction = await Transaction.request(transactionData);
33
- await transaction.setCard({
34
- number: '4084084084084081',
35
- cvv: '408',
36
- month: '01',
37
- year: '20',
38
- pin: '1234',
39
- });
40
- // charge resolves to a ChargeResponse
41
- const chargeResponse = await transaction.chargeCard();
42
- if (chargeResponse.status === 'success') {
43
- console.log('card was charged successfully!');
44
- }
45
- } catch (error) {
46
- console.log(error);
47
- }
48
- }
49
-
50
- chargeCustomerCard();
51
- ```
52
-
53
- ## Usage via inline script
54
-
55
- Add the Checkout JS script to your `HTML` document
56
-
57
- ```html
58
- <script src="https://js.paystack.co/v1/checkout.js"></script>
59
- ```
60
-
61
- And then access the available classes in your JavaScript file;
62
-
63
- ```js
64
- var transactionData = {
65
- email: 'test@paystack.com', // replace this with customer email
66
- amount: 100,
67
- key: 'your_paystack_public_key',
68
- };
69
-
70
- var customerCardDetails = {
71
- number: '4084084084084081',
72
- cvv: '408',
73
- month: '01',
74
- year: '20',
75
- pin: '1234',
76
- };
77
-
78
- function chargeCustomerCard() {
79
- Transaction.request(transactionData).then(function(createdTransaction) {
80
- createdTransaction.setCard(customerCardDetails);
81
- return createdTransaction.chargeCard();
82
- }).then(function(chargeResponse) {
83
- if (chargeResponse.status === 'success') {
84
- console.log('card was charged successfully!');
85
- }
86
- }).catch(function(error) {
87
- console.log(error);
88
- });
89
- }
90
-
91
- chargeCustomerCard();
92
- ```
93
-
94
- # Getting Started
95
-
96
- These are the classes exported by `checkout js`:
97
-
98
- 1. **Transaction**
99
- 2. **Toolkit**
100
- 3. **Card**
101
- 4. **BankAccount**
102
-
103
- The `Transaction` class is the most important class in Checkout JS. All the functions required for initializing a transaction, updating it, and charging a customer using the supported payment channels are bound to this class.
104
-
105
- For example, charging a customer's card could entail the following steps;
106
-
107
- 1. Request a new transaction
108
- 2. Collect and validate card details from customer
109
- 3. Save the card to the transaction
110
- 4. Charge the card
111
- 5. Tada!
112
-
113
- ## Table of contents
114
-
115
- This is a grouping of the methods exported by the `Transaction` class:
116
-
117
- - Initializing a transaction
118
- - `Transaction.request`
119
- - `Transaction.requestWithAccessCode`
120
- - `Transaction.validate`
121
- - Charging a card
122
- - `Transaction.setCard`
123
- - `Transaction.chargeCard`
124
- - `Transaction.authenticateCard`
125
- - `Transaction.listenFor3DSCharge`
126
- - Charging a Bank account
127
- - `Transaction.setBankAccount`
128
- - `Transaction.chargeBankAccount`
129
- - `Transaction.registerBankAccount`
130
- - `Transaction.authenticateBankAccount`
131
- - `Transaction.getIbankUrl`
132
- - `Transaction.listenForIbankCharge`
133
- - `Transaction.chargeDigitalBankMandate`
134
- - `Transaction.listenForDigitalBankMandateCharge`
135
- - Charging via USSD
136
- - `Transaction.getUSSDShortcode`
137
- - `Transaction.listenForUSSDCharge`
138
- - Charging via QR
139
- - `Transaction.getQRCode`
140
- - `Transaction.listenForQRCharge`
141
- - Charging via Mobile Money (Only available for GHS transactions)
142
- - `Transaction.chargeMobileMoney`
143
- - `Transaction.listenForMobileMoneyCharge`
144
- - Transaction analytics
145
- - `Transaction.initializeLog`
146
- - `Transaction.getTimeSpent`
147
- - `Transaction.logPageOpen`
148
- - `Transaction.logChannelSwitch`
149
- - `Transaction.logPageClose`
150
- - `Transaction.logInput`
151
- - `Transaction.logValidationErrors`
152
- - `Transaction.logAuthWindowOpen`
153
- - `Transaction.logAuthWindowClose`
154
- - `Transaction.logAPIResponse`
155
- - `Transaction.logAttempt`
156
- - `Transaction.saveReferrer`
157
- - Check transaction status
158
- - `Transaction.requery`
159
-
160
- Utility classes:
161
-
162
- - Toolkit: This contains utilities that you can use during a transaction
163
- - Toolkit.contents
164
- - Toolkit.fetch
165
- - Card: Use this to validate your customer’s cards
166
- - Card.validate
167
- - Card.isNumberValid
168
- - Card.getType
169
- - Card.isCvvValid
170
- - Card.isExpiryValid
171
- - BankAccount: Use this to validate your customer’s bank accounts
172
- - BankAccount.validate
173
- - BankAccount.isValidNubanAccount
174
-
175
- ## # Initializing a transaction
176
-
177
- ## Transaction.request(transactionData)
178
-
179
- This method returns a new transaction instance. The instance returned is what is used to complete the customer’s payment.
180
-
181
- Base parameters for this method are:
182
-
183
- | Parameter | Required | Type | Description |
184
- | ----------------------------- | --------------| --------------------| ---------------------------------------------------- |
185
- | email | True | `String` | The customer's email address |
186
- | amount | True | `String` | `Number` | Amount in smallest currency unit (kobo/pesewa/cents). Ignored if creating a subscription |
187
- | key | True | `String` | Your Paystack public key. You can find this on your dashboard in Settings > API Keys & Webhooks |
188
- | reference | False | `String` | Unique case sensitive transaction reference. Only `-`,`.`, `=` and alphanumeric characters allowed |
189
- | channels | False | `Array` | An array of payment channels to use. Defaults to all available channels on an integration |
190
- | currency | False | `String` | The currency of the transaction. Default is `NGN`
191
- | amount | True | `String` | Amount in smallest currency unit (kobo/pesewa/cents). Ignored if creating a subscription |
192
- | firstName | False | `String` | The first name of the customer |
193
- | lastName | False | `String` | The last name of the customer |
194
- | phone | False | `String` | The phone number of the customer |
195
- | metadata | False | `Object` | A valid object of extra information that you want to be saved to the transaction. |
196
- | cusotmer_code | False | `String` | The customer code for the customer on Paystack |
197
-
198
-
199
- Other optional parameters for [Split Payments](https://paystack.com/docs/payments/split-payments/) and [Recurring Charges](https://paystack.com/docs/payments/recurring-charges/)
200
-
201
- | Parameter | Required | Type | Description |
202
- | ----------------------------- | --------------| --------------------| ---------------------------------------------------- |
203
- | plan | False | `String` | If transaction is to create a subscription to a predefined plan, provide plan code here |
204
- | subaccountCode | False | `String` | A valid Paystack subaccount code e.g. `ACCT_8f4s1eq7ml6rlzj` |
205
- | split_code | False | `String` | A valid Paystack split code e.g. `SPL_qQsdYLXddd` |
206
- | bearer | False | `Number` | Who bears Paystack charges? `account` or `subaccount` (defaults to `account`). |
207
- | transactionCharge | False | `String` | A flat fee (in kobo) to charge the subaccount for this transaction. This overrides the split percentage set when the subaccount was created. |
208
- | planInterval | False | `String` | Interval for the plan. Valid intervals are `hourly`, `daily`, `weekly`, `monthly`, `annually` |
209
- | subscriptionStartDate | False | `String` | The start date for the subscription (after the first charge) |
210
- | planCode | False | `String` | A valid Paystack plan code e.g. `PLN_cujsmvoyq2209ws` |
211
- | subscriptionCount | False | `Number` | The number of subscriptions to create for this plan |
212
- | subscriptionLimit | False | `Number` | The number of times to charge for this subscription |
213
-
214
-
215
- **Example**
216
-
217
- ```ts
218
- import { Transaction } from 'checkout-js';
219
-
220
- interface Parameters {
221
- key: string;
222
- email: string;
223
- amount: number;
224
- ref?: string;
225
- customer_code?: string;
226
- plan?: string;
227
- transaction_charge?: string;
228
- bearer?: string;
229
- channels?: string[];
230
- currency?: string;
231
- firstname?: string;
232
- lastname?: string;
233
- phone?: string;
234
- remark?: string;
235
- payment_page?: string;
236
- payment_request?: string;
237
- quantity?: string;
238
- coupon?: string;
239
- start_date?: string;
240
- interval?: string;
241
- invoice_limit?: number;
242
- subaccount?: string;
243
- hash?: string;
244
- metadata?: string;
245
- }
246
-
247
- const transactionData: Parameters = {
248
- email: 'test@paystack.com', // replace this with the customer's email
249
- amount: 100,
250
- key: 'your_paystack_public_key',
251
- };
252
-
253
- // returns an instance of the Transaction class
254
- const transaction = await Transaction.request(transactionData);
255
- ```
256
-
257
- ## Transaction.requestWithAccessCode(accessCode)
258
-
259
- While the `Transaction.request` method lets you create transactions from scratch in the browser, `Transaction.requestWithAccessCode` lets you complete a transaction [initialized from your server](https://paystack.com/docs/api/#transaction-initialize) on the frontend. This method can be more secure and it, ensures no new transactions are created on the frontend.
260
-
261
- **Example**
262
-
263
- ```js
264
- import { Transaction } from 'checkout-js';
265
-
266
- const accessCode = 'ltxo947mrhrbz6z'; // Access code for transaction created on your server using the Paystack API
267
-
268
- // returns an instance of the transaction class
269
- const transaction = await Transaction.requestWithAccessCode(accessCode);
270
- ```
271
-
272
- ## Transaction.validate(transaction)
273
-
274
- This is a utility method used to validate the parameters for requesting a new transaction.
275
-
276
- **Example**
277
-
278
- ```js
279
- import { Transaction } from 'checkout-js';
280
-
281
- const transactionData = {
282
- email: 'test@paystack.com', // replace this with the customer's email
283
- amount: 100,
284
- key: 'your_paystack_public_key',
285
- };
286
-
287
- try {
288
- Transaction.validate(transactionData); // throws validation errors
289
- } catch (error) {
290
- // handle validation errors thrown by Transaction.validate
291
- }
292
- ```
293
-
294
- NB: `Transaction.request` calls this validation function implicitly, so you do not need to call it yourself except if you need to handle parameter validation separately.
295
-
296
- ## Attempting a Charge
297
-
298
- For each attempt to charge a payment instrument, `checkout-js` responds with a `ChargeResponse`. This `ChargeResponse` has the following interface depending on the kind of response received:
299
-
300
- ```ts
301
- interface ChargeResponse {
302
- status: string;
303
- message: string;
304
- data?: Object
305
- errors?: Array;
306
- }
307
- ```
308
- reference will be made to this `ChargeResponse` throughout the rest of the documentation. More details [here](#charge-responses)
309
-
310
- ## # Charging a card
311
-
312
- Charging a card includes the following steps:
313
-
314
- 1. Set the card on the transaction
315
- 2. Charge the card
316
- 3. If required, authenticate the charge
317
-
318
- ## transaction.setCard({ number, cvv, month, year, pin })
319
-
320
- This is an instance method on transactions to set a card to be charged for the transaction. With this, you can
321
-
322
- **Example**
323
-
324
- ```js
325
- import { Transaction } from 'checkout-js';
326
-
327
- const transactionData = { ... };
328
- const transaction = await Transaction.request(transactionData)
329
-
330
- interface Card {
331
- number: string;
332
- cvv: string;
333
- month: string;
334
- year: string;
335
- }
336
-
337
- /**
338
- * Card number can have varying lengths, typically from 16 to 19 characters
339
- * CVV can be 3 or 4 characters in length
340
- */
341
-
342
- const newCard = {
343
- number: '4084084084084081',
344
- cvv: '408',
345
- month: '01',
346
- year: '20'
347
- }
348
-
349
- await transaction.setCard(newCard);
350
- ```
351
-
352
- ## transaction.chargeCard()
353
-
354
- After setting a card on a transaction, you can now attempt to charge it by calling `chargeCard()`
355
-
356
- **Example**
357
-
358
- ```jsx
359
- import { Transaction } from 'checkout-js';
360
- ...
361
- const chargeResponse = await transaction.chargeCard();
362
- ```
363
- ## transaction.authenticateCard(phoneOrOtp)
364
-
365
- If `chargeResponse` returns a response with `status ===` `'auth'` you can request the customer's phone number or the OTP sent to their phone number. `data.auth` on the `chargeResponse` states what type of authentication is required.
366
-
367
- **Example**
368
-
369
- ```js
370
- import { Transaction } from 'checkout-js';
371
-
372
- const newCard = {
373
- number: '4084084084084081',
374
- cvv: '408',
375
- month: '01',
376
- year: '20'
377
- }
378
-
379
- await transaction.setCard(newCard);
380
-
381
- ...
382
-
383
- let chargeResponse = await transaction.chargeCard();
384
-
385
- if (chargeResponse.status === 'auth') {
386
- let authResponse;
387
- if (chargeResponse.data.auth === 'pin') {
388
- // request customers phone number
389
- newCard.pin = '1234'
390
- await transaction.setCard(newCard)
391
- chargeResponse = await transaction.chargeChard(); // attempt to charge the card again with the pin included
392
- }
393
- if (chargeResponse.data.auth === 'otp') {
394
- // request otp sent to customer
395
- const otp = '123456';
396
- authResponse = await transaction.authenticateCard(otp); // returns a ChargeResponse
397
- }
398
- }
399
- ```
400
-
401
- ## transaction.listenFor3DSCharge(callback)
402
-
403
- Use this function to wait for the response from the 3DS authentication from the customer. You’d need this if the charge response returns an auth type of `3ds`:
404
-
405
- ```js
406
- const chargeResponse = {
407
- status: 'auth',
408
- message: 'url-for-3ds-authentication',
409
- data: {
410
- auth: '3ds',
411
- },
412
- }
413
- ```
414
-
415
- The callback function will be called with the response and a function to unsubscribe from pusher.
416
-
417
- **Example**
418
-
419
- ```js
420
- const chargeResponse = await transaction.chargeCard();
421
- ...
422
- function handleResponse(response, unsubscribe) {}
423
-
424
- if (chargeResponse.status === 'auth') {
425
- if (chargeResponse.data.auth === '3DS') {
426
- // redirect customer to 3ds url in `chargeResponse.message`
427
- // listen for response from 3ds authentication
428
- listenFor3DSCharge(handleResponse);
429
- }
430
- }
431
- ```
432
-
433
- ## # Charging a bank account
434
-
435
- To charge a bank account, you need to make sure it’s from one of the banks that Paystack supports bank payments from. To get a list of supported banks, call `Toolkit.fetch('banks')`.
436
-
437
- ```js
438
- import { Toolkit } from 'checkout-js';
439
-
440
- const banks = await Toolkit.fetch('banks');
441
-
442
- // This will return an array of available banks like;
443
- [
444
- {
445
- "name": "Access Bank",
446
- "slug": "access-bank",
447
- "code": "044",
448
- "longcode": "044150149",
449
- "gateway": "emandate",
450
- "pay_with_bank": true,
451
- "active": true,
452
- "is_deleted": null,
453
- "country": "Nigeria",
454
- "currency": "NGN",
455
- "type": "nuban",
456
- "id": 1,
457
- "createdAt": "2016-07-14T10:04:29.000Z",
458
- "updatedAt": "2016-07-14T10:04:29.000Z"
459
- },
460
- {
461
- "name": "Guaranty Trust Bank",
462
- "slug": "guaranty-trust-bank",
463
- "code": "058",
464
- "longcode": "058152036",
465
- "gateway": "ibank",
466
- "pay_with_bank": true,
467
- "active": true,
468
- "is_deleted": null,
469
- "country": "Nigeria",
470
- "currency": "NGN",
471
- "type": "nuban",
472
- "id": 9,
473
- "createdAt": "2016-07-14T10:04:29.000Z",
474
- "updatedAt": "2016-07-14T10:04:29.000Z"
475
- },
476
- ...
477
- ]
478
- ```
479
- `checkout-js` currently handles three kinds of bank payments determined by the `gateway` on the bank object. The gateways are `emandate`, `ibank` and `digitalbankmandate`.
480
-
481
- - `emandate` payments follow a “registration → verification → authentication” payment flow.
482
- - `ibank` payments require that your customers be redirected to their internet banking portal for authentication, after which they will be redirected back to your payment flow.
483
- - `digitalbankmandate` payments need to be authenticated with a phone number and a `payId`
484
-
485
- Most banks use the `emandate` flow while Guaranty Trust Bank and First Bank use the `ibank` flow and Kuda Bank uses the `digitalbankmandate` flow.
486
-
487
- ## # Ibank Flow
488
-
489
- ## transaction.getIbankUrl(bank)
490
-
491
- This method is used to fetch the internet banking url through which a customer can complete a transaction.
492
-
493
- **Example**
494
-
495
- ```js
496
- ...
497
-
498
- const bank = {
499
- ...
500
- bankId: 9,
501
- name: 'Guaranty Trust Bank',
502
- gateway: 'ibank',
503
- ...
504
- };
505
-
506
- await transaction.getIbankUrl(bank);
507
- ```
508
-
509
- ## transaction.listenForIbankCharge(callback)
510
-
511
- When the customer has been redirected to their internet banking portal to complete the transaction, you can wait for the final result using this function, passing a callback that will be called with the response and a function to unsubscribe from `pusher`.
512
-
513
- **Example**
514
-
515
- ```js
516
- ...
517
- // fetch internet banking URL
518
- const url = await transaction.getIbankUrl(bank);
519
-
520
- // redirect customer to internet banking portal
521
- ...
522
- // listen for response from internet banking portal
523
- function handleResponse(response, unsubscribe) {}
524
-
525
- transaction.listenForIbankCharge(handleResponse);
526
- // resolves to ChargeResponse
527
- ```
528
-
529
- ## # DigitalBankMandate Flow (Kuda Bank)
530
-
531
- ## transaction.chargeDigitalBankMandate({ phoneNumber, payId, bankId })
532
-
533
- This function makes an attempt to charge a kuda bank account using the customer's phone number and a 6-digit `payID` which the customer will generate from their kuda bank app
534
-
535
- **Example**
536
-
537
- ```js
538
- ...
539
-
540
- const bank = {
541
- ...
542
- id: 67,
543
- name: 'Kuda Bank',
544
- gateway: 'digitalbankmandate',
545
- ...
546
- };
547
- const phoneNumber = '07033773883'
548
- const payId = 288299;
549
- const params = {
550
- phoneNumber,
551
- bankId: bank.id,
552
- payId
553
- }
554
-
555
- // resolves to ChargeResponse
556
- await transaction.chargeDigitalBankMandate(params);
557
- ```
558
-
559
- ## transaction.listenForDigitalBankMandateCharge(callback, pusherChannel)
560
-
561
- After calling the `chargeDigitalBankMandate` function, you need to call the `listenForDigitalBankMandateCharge` function to be notified of the status of the payment. This function accepts a `callback` which will be called with the response as well as a function to unsubscribe from pusher — and a `pusher_channel`, a property on `data` gotten from the response to `chargeDigitalBankMandate`.
562
-
563
- ```js
564
- const {
565
- status,
566
- message,
567
- data
568
- } = await transaction.chargeDigitalBankMandate(params);
569
-
570
- function handleResponse(response, unsubscribe) {}
571
-
572
- transaction.listenForDigitalBankMandateCharge(handleResponse, data.pusher_channel)
573
- ```
574
-
575
- ## # Emandate flow
576
-
577
- ## transaction.setBankAccount({ bankId, accountType, accountNumber })
578
-
579
- Sets the bank account the customer is going to use to complete the transaction.
580
-
581
- **Example**
582
-
583
- ```js
584
- import { Transaction, Toolkit } from 'checkout-js';
585
- ...
586
- const bank = {
587
- ...
588
- id: 1,
589
- name: 'Access Bank',
590
- gateway: 'emandate',
591
- type: 'nuban',
592
- ...
593
- };
594
-
595
- const bankAccount = {
596
- bankId: bank.id,
597
- accountType: bank.type,
598
- accountNumber: '1234567890', // customer account number
599
- }
600
-
601
- await transaction.setBankAccount(bankAccount);
602
- ```
603
-
604
- ## transaction.chargeBankAccount()
605
-
606
- This method is responsible for charging the bank account that has been set on the transaction using `transaction.setBankAccount()`.
607
-
608
- **Example**
609
-
610
- ```js
611
- const chargeResponse = await transaction.chargeBankAccount();
612
- // resolves to a ChargeResponse
613
- ```
614
-
615
- ## transaction.registerBankAccount(birthday)
616
-
617
- Use this to register new customer bank accounts for e-mandate so they can be charged. You should do this if you get a response requiring birthday registration after attempting to charge a bank account with `transaction.chargeBankAccount`.
618
-
619
- ```js
620
- {
621
- status: 'auth',
622
- message: 'This customer needs to register their account',
623
- data: {
624
- auth: 'birthday'
625
- }
626
- }
627
- ```
628
-
629
- **Example**
630
-
631
- ```jsx
632
- ...
633
- await transaction.setbankAccount({...});
634
-
635
- const chargeResponse = await transaction.chargeBankAccount();
636
-
637
- if (chargeResponse.status === 'auth' && chargeResponse.data.auth === 'birthday') {
638
- // pass the customer's birthday in the format 'dd-MM-yyyy'
639
- const authResponse = await transaction.registerBankAccount('12-05-1980');
640
- // resolves to a ChargeResponse
641
- }
642
- ```
643
-
644
- ## transaction.authenticateBankAccount(otp)
645
-
646
- This method is used to authenticate bank transactions using an `otp`.
647
-
648
- **Example**
649
-
650
- ```jsx
651
- ...
652
- await transaction.setbankAccount({...});
653
- const chargeResponse = await transaction.chargeBankAccount();
654
-
655
- if (chargeResponse.status === 'auth' && chargeResponse.data.auth === 'otp') {
656
- const authResponse = await transaction.authenticateBankAccount(123456);
657
- // resolves to a ChargeResponse
658
- }
659
- ```
660
-
661
- ## # Charging via USSD
662
-
663
- The only available USSD channels for now are GTB’s 737, Sterling's 822, Zenith's 966 and UBA's 919
664
-
665
- ## transaction.getUSSDShortcode({ channel })
666
-
667
- Use this to generate a USSD shortcode
668
-
669
- **Example**
670
-
671
- ```jsx
672
- // initialize transaction
673
- const response = await transaction.getUSSDShortcode({ channel: '919' });
674
-
675
- // returns a response in the format
676
- {
677
- "status": true,
678
- "message": "Offline Reference Generated Successfully",
679
- "data": {
680
- "reference": "887462",
681
- "channel": "api_919_shortcode_00000",
682
- "code": "*919*00*1*0000#"
683
- }
684
- }
685
- ```
686
-
687
- Present the code in `data.code` to your customers for payment.
688
-
689
- ## transaction.listenForUSSDCharge({ channel }, callback)
690
-
691
- Listen for when the customer completes the transaction via USSD. This function accepts a callback function to be called with the response and a function to unsubscribe from pusher.
692
-
693
- **Example**
694
-
695
- ```js
696
- // initialize transaction
697
- ...
698
- function handleResponse(response, unsubscribe) {}
699
-
700
- transaction.listenForUSSDCharge({ channel: '919' }, handleResponse);
701
-
702
- // return a ChargeResponse
703
- ```
704
-
705
- ## # Charging via QR
706
-
707
- The available QR channels are `visa` in Nigeria and `MPASS_OLTI` in South Africa .
708
-
709
- ## transaction.getQRCode({ channel })
710
-
711
- Use this to generate a QR code
712
-
713
- **Example**
714
-
715
- ```js
716
- // initialize transaction
717
- const response = await transaction.getQRCode({ channel: 'visa' });
718
-
719
- // returns a response in the format
720
- {
721
- "status": true,
722
- "message": "QR successfully generated",
723
- "data": {
724
- "errors": false,
725
- "url": "qr code image",
726
- "qr_code": "qr code",
727
- "status": "success",
728
- "channel": "qr channel"
729
- }
730
- }
731
- ```
732
- Display the QR code image in `data.url` for your customers to scan.
733
-
734
-
735
- ## transaction.listenForQRCharge({ channel }, callback)
736
-
737
- Listen for when the customer has completed the transaction by scanning the QR code. This function accepts an object containing the QR `channel` and a callback function to be called with the response and a function to unsubscribe from pusher.
738
-
739
- **Example**
740
-
741
- ```js
742
- // initialize transaction
743
- ...
744
- function handleResponse(response, unsubscribe) {}
745
-
746
- transaction.listenForQRCharge({ channel: 'visa' }, handleResponse);
747
-
748
- // return a ChargeResponse
749
- ```
750
-
751
- ## # Charging a mobile money wallet
752
-
753
- ## transaction.chargeMobileMoney({ phoneNumber, provider, voucher?, registrationToken? })
754
-
755
- This function is used to attempt a mobile money charge with a `phoneNumber`, a `provider` and optionally, a `voucher` and a `registrationToken`
756
-
757
- **Available providers**
758
-
759
- ```js
760
- [
761
- { name: 'MTN', value: 'MTN', prefix: ['+23354', '+23355', '+23324'] },
762
- { name: 'TGO',
763
- value: 'Airtel/Tigo',
764
- prefix: ['+23327', '+23357', '+23326', '+23356']
765
- },
766
- { name: 'VOD', value: 'Vodafone', prefix: ['+23320', '+23350'] },
767
- ]
768
- ```
769
-
770
- **Example**
771
-
772
- ```js
773
- // initialize transaction
774
- ...
775
- const response = await transaction.chargeMobileMoney(
776
- { phoneNumber: '05012345678', provider: 'VOD' }
777
- );
778
-
779
- // returns a response in the format
780
- {
781
- "status": true,
782
- "message": "Charge attempted",
783
- "data": {
784
- "transaction": 2,
785
- "phone": "05012345678",
786
- "device": "96640369ca64b60d3dcf",
787
- "provider": "VOD",
788
- "channel_name": "MOBILE_MONEY_2",
789
- "display": {
790
- "type": "voucher",
791
- "message": "Please enter your voucher code to complete this payment"
792
- }
793
- }
794
- }
795
-
796
- /**
797
- * Depending on what the `display.type` is from the previous response, you might
798
- * need to collect additional information to complete the payment
799
- */
800
-
801
- /**
802
- * If you get a `display.type === voucher`, collect a voucher from the customer
803
- * and call chargeMobileMoney again, this time including the voucher as one of the
804
- * arguments
805
- */
806
- const response = await transaction.chargeMobileMoney(
807
- {
808
- phoneNumber: '05012345678',
809
- provider: 'VOD',
810
- voucher: 'voucher-code'
811
- }
812
- );
813
-
814
- /**
815
- * If you get a `display.type === registration_token`, collect a registrationToken from the customer
816
- * and call chargeMobileMoney again, this time including the registrationToken
817
- * as one of the arguments
818
- */
819
- const response = await transaction.chargeMobileMoney(
820
- {
821
- phoneNumber: '05012345678',
822
- provider: 'VOD',
823
- registrationToken: 'token'
824
- }
825
- );
826
-
827
- /**
828
- * The `registrationToken` phase should be the last stage in the process after
829
- * which you should start listening for a response as stated in the next section
830
- */
831
-
832
- ```
833
-
834
- ## transaction.listenForMobileMoneyCharge(callback)
835
-
836
- Listen for when the customer has completed the payment, passing a callback function to be called with the response and a function to unsubscribe from pusher.
837
-
838
- **Example**
839
-
840
- ```js
841
- // initialize transaction
842
- ...
843
- function handleResponse(response, unsubscribe) {}
844
-
845
- transaction.listenForQRCharge(handleResponse);
846
-
847
- // return a ChargeResponse
848
- ```
849
-
850
- ## # Transaction Analytics
851
-
852
- These are a group of functions that help to populate the transaction timeline which is attached to every transaction and can be viewed on the Paystack dashboard.
853
-
854
- Checkout JS implicitly handles some analytics like logging inputs, bank selection, errors, authentications and transaction success.
855
-
856
- ## transaction.initializeLog()
857
-
858
- This function initializes transaction logging.
859
-
860
- **Example**
861
-
862
- ```js
863
- // initialize transaction
864
- ...
865
- transaction.initializeLog();
866
- ```
867
- ## transaction.getTimeSpent()
868
-
869
- This function returns the amount of time since the transaction was requested.
870
-
871
- **Example**
872
-
873
- ```js
874
- // initialize transaction
875
- ...
876
- transaction.getTimeSpent();
877
- ```
878
-
879
- ## transaction.logPageOpen()
880
-
881
- Logs the time when the transaction page was opened
882
-
883
- **Example**
884
-
885
- ```js
886
- // initialize transaction
887
- ...
888
- transaction.logPageOpen();
889
- ```
890
-
891
- ## transaction.logAuthWindowOpen()
892
-
893
- Logs the time when the transaction authentication window was opened
894
-
895
- **Example**
896
-
897
- ```js
898
- // initialize transaction
899
- ...
900
- transaction.logAuthWindowOpen();
901
- ```
902
-
903
- ## transaction.logAuthWindowClose()
904
-
905
- Logs the time when the transaction authentication window was closed
906
-
907
- **Example**
908
-
909
- ```js
910
- // initialize transaction
911
- ...
912
- transaction.logAuthWindowClose();
913
- ```
914
-
915
- ## transaction.logChannelSwitch(channelName)
916
-
917
- Log switch to a channel with name `channelName`
918
-
919
- **Example**
920
-
921
- ```js
922
- // initialize transaction
923
- ...
924
- transaction.logChannelSwitch('card');
925
- ```
926
- ## transaction.logValidationErrors(inputs)
927
-
928
- Log validation errors on an array of `inputs`
929
-
930
- **Example**
931
-
932
- ```js
933
- // initialize transaction
934
- ...
935
- transaction.logValidationErrors(['card number']);
936
- ```
937
-
938
- ## transaction.logInput(fieldName)
939
-
940
- Log when a customer filled a certain input field
941
-
942
- **Example**
943
-
944
- ```js
945
- // initialize transaction
946
- ...
947
- transaction.logInput('card number');
948
- ```
949
-
950
- ## transaction.logAttempt(channel)
951
-
952
- Log when a customer makes an attempt on a channel
953
-
954
- **Example**
955
-
956
- ```js
957
- // initialize transaction
958
- ...
959
- transaction.logAttempt('card');
960
- ```
961
-
962
- ## transaction.logBankSelect(bankName)
963
-
964
- Log what bank the user selected while trying to pay with a bank account
965
-
966
- **Example**
967
-
968
- ```js
969
- // initialize transaction
970
- ...
971
- transaction.logBankSelect('Access Bank');
972
- ```
973
-
974
- ## transaction.logError(message)
975
-
976
- Log when a customer encounters an error while attempting to pay
977
-
978
- **Example**
979
-
980
- ```js
981
- // initialize transaction
982
- try {
983
- // initialize transaction
984
- // attempt to charge transaction
985
- } catch(error) {
986
- transaction.logError(error.message);
987
- }
988
- ```
989
-
990
- ## transaction.logAuth(authType)
991
-
992
- Log when a customer needs to be authenticated.
993
-
994
- **Example**
995
-
996
- ```js
997
- // attempt a charge and get a response
998
-
999
- if (response.status === 'auth') {
1000
- // log the authentication required
1001
- transaction.logAuth(response.data.auth);
1002
- }
1003
- ```
1004
-
1005
- ## transaction.logSuccess()
1006
-
1007
- Log when a customer has successfully completed a transaction
1008
-
1009
- **Example**
1010
-
1011
- ```js
1012
- // attempt a charge and get a response
1013
-
1014
- if (response.status === 'success') {
1015
- transaction.logSuccess();
1016
- }
1017
- ```
1018
- ## transaction.logPending()
1019
-
1020
- Log when a transaction status is `pending`
1021
-
1022
- **Example**
1023
-
1024
- ```js
1025
- // attempt a charge and get a response
1026
-
1027
- if (response.status === 'pending') {
1028
- transaction.logPending();
1029
- }
1030
- ```
1031
-
1032
- ## transaction.logPageClose()
1033
-
1034
- Log when a customer closes a payment page
1035
-
1036
- **Example**
1037
-
1038
- ```js
1039
- // listen for a page close event
1040
- transaction.logPageClose();
1041
- ```
1042
-
1043
- ## transaction.saveReferrer(referrerUrl)
1044
-
1045
- Log the page a payment page was opened from
1046
-
1047
- **Example**
1048
-
1049
- ```js
1050
- // initialize transaction
1051
- transaction.saveReferrer(document.referrer)
1052
- ```
1053
-
1054
- ## # Checking transaction status
1055
-
1056
- ## transaction.requery()
1057
-
1058
- Used to check the status of a transaction
1059
-
1060
- **Example**
1061
-
1062
- ```js
1063
- await transaction.requery();
1064
- // responds with a ChargeResponse
1065
- ```
1066
-
1067
- ## # Toolkit
1068
-
1069
- Houses various utility functions like error resolutions, supported banks, and celebrations.
1070
-
1071
- ## Toolkit.contents
1072
-
1073
- Returns an array of possible parameters to be used with the `Toolkit.fetch()` and their corresponding usage
1074
-
1075
- **Example**
1076
-
1077
- ```js
1078
- import { Toolkit } from 'checkout-js';
1079
-
1080
- Toolkit.contents();
1081
-
1082
- // output
1083
- [{
1084
- key: 'banks',
1085
- usage: 'Returns a list of banks that can be used to complete checkout'
1086
- }, {
1087
- key: 'celebrations',
1088
- usage: 'Returns a list of upcoming celebrations'
1089
- }, {
1090
- key: 'resolutions',
1091
- usage: 'Returns a list of known errors, mapped to their suggested resolutions'
1092
- }]
1093
- ```
1094
-
1095
- ## Toolkit.fetch(option)
1096
-
1097
- A static method on the `Toolkit` class that operates on valid `keys` from `Toolkit.contents()` and returns data consistent with the `usage` of each `key`.
1098
-
1099
- **Example**
1100
-
1101
- ```js
1102
- import { Toolkit } from 'checkout-js'
1103
- ...
1104
- const celebrations = await Toolkit.fetch('celebrations')
1105
-
1106
- // celebrations.data returns a list of National celebrations and their dates:
1107
- {
1108
- "2018-06-07": "Happy Valentine's Day ❤️",
1109
- "2018-03-06": "Happy Independence Day 🇬🇭",
1110
- "2018-04-01": "Happy Easter 🙏",
1111
- "2018-05-01": "Happy Worker's Day 💪",
1112
- "2018-05-27": "Happy Children's Day 👶",
1113
- "2018-05-29": "Happy Democracy Day 🇳🇬",
1114
- "2018-06-15": "Barka da Sallah 🎉",
1115
- "2018-10-01": "Happy Independence Day 🇳🇬",
1116
- "2018-12-25": "Merry Christmas 🎉",
1117
- "2018-12-26": "Happy Boxing Day 🎁"
1118
- }
1119
- ...
1120
-
1121
- // params is an optional object which defaults to {pay_with_bank: '1'} if no value is passed.
1122
- const banks = await Toolkit.fetch('banks', params)
1123
-
1124
- // banks.data returns;
1125
- [{
1126
- name: "Access Bank"
1127
- slug: "access-bank"
1128
- code: "044"
1129
- longcode: "044150149"
1130
- gateway: "emandate"
1131
- pay_with_bank: true
1132
- active: true
1133
- is_deleted: null
1134
- country: "Nigeria"
1135
- currency: "NGN"
1136
- type: "nuban"
1137
- id: 1
1138
- createdAt: "2016-07-14T10:04:29.000Z"
1139
- updatedAt: "2016-07-14T10:04:29.000Z"
1140
- }, { ... } ...]
1141
- ```
1142
-
1143
- ## # Validating a Card
1144
-
1145
- ## Card.validate({ number, cvv, month, year })
1146
-
1147
- A static method on the `Card` class that takes an object containing `cardNumber` , `cvv`, `month` and `year` returning an object specifying if the card is valid.
1148
-
1149
- **Example**
1150
-
1151
- ```js
1152
- import { Card } from 'checkout-js';
1153
-
1154
- const cardDetails = {
1155
- number: '4084084084084081',
1156
- cvv: '408',
1157
- month: '03',
1158
- year: '21',
1159
- }
1160
-
1161
- Card.validate(cardDetails);
1162
-
1163
- // output
1164
- // { isValid: true, errors: [] }
1165
- ```
1166
-
1167
- ## Card.isNumberValid(cardNumber)
1168
-
1169
- A static method on the `Card` class that takes a card number and returns true if the card number is valid.
1170
-
1171
- **Example**
1172
-
1173
- ```js
1174
- import { Card } from 'checkout-js';
1175
-
1176
- const cardNumber = '4084084084084081';
1177
-
1178
- Card.isValidNumber(cardNumber);
1179
-
1180
- // output
1181
- // true
1182
- ```
1183
-
1184
- ## Card.getType(cardNumber)
1185
-
1186
- A static method on the `Card` class that takes a card number and returns the type of card for a valid card number
1187
-
1188
- **Example**
1189
-
1190
- ```js
1191
- import { Card } from 'checkout-js';
1192
-
1193
- const cardNumber = '4084084084084081';
1194
-
1195
- Card.getType(cardNumber);
1196
-
1197
- // output
1198
- // {type: 'visa', maxLength: 19}
1199
-
1200
- // output for invalid card number
1201
- // {type: null, maxLength: 0}
1202
- ```
1203
-
1204
- ## Card.isCvvValid(cvv)
1205
-
1206
- A static method on the `Card` class that takes a cvv returns true if cvv supplied is valid
1207
-
1208
- **Example**
1209
-
1210
- ```js
1211
- import { Card } from 'checkout-js';
1212
-
1213
- const cvv = '408';
1214
-
1215
- Card.isCvvValid(cvv);
1216
-
1217
- // output
1218
- // true
1219
- ```
1220
-
1221
- ## Card.isExpiryValid(month, year)
1222
-
1223
- A static method on the `Card` class that takes an expiry month and year returning `true` if valid
1224
-
1225
- **Example**
1226
-
1227
- ```js
1228
- import { Card } from 'checkout-js';
1229
-
1230
- const expiryMonth = '10';
1231
- const expiryYear = '2020'
1232
-
1233
- Card.isExpiryValid(expiryMonth, expiryYear);
1234
-
1235
- // output
1236
- // true
1237
- ```
1238
-
1239
- ## # Validating a bank account
1240
-
1241
- ## BankAccount.validate({ bankId, accountNumber, accountType })
1242
-
1243
- A static method that takes an object containing `bankId`, `accountType` and `accountNumber`, returning an object specifying the validity of the account number supplied.
1244
-
1245
- **Example**
1246
-
1247
- ```js
1248
- import { BankAccount } from 'checkout-js';
1249
-
1250
- // valid accountTypes: BankAccount.types
1251
- // valid bankIds: Toolkit.fetch('banks')
1252
- const bankDetails = {
1253
- bankId: 1,
1254
- accountType: 'nuban',
1255
- accountNumber: '0011163526'
1256
- }
1257
-
1258
- BankAccount.validate(bankDetails);
1259
-
1260
- // output
1261
- // {isValid: true, errors: []}
1262
- ```
1263
-
1264
- ## BankAccount.isValidNubanAccount(accountNumber)
1265
-
1266
- A static method on the `BankAccount` class that takes a bank account number and returns `true` if it is a valid ‘nuban’ account number.
1267
-
1268
- **Example**
1269
-
1270
- ```js
1271
- import { BankAccount } from 'checkout-js';
1272
-
1273
- const accountNumber = '08033991672'
1274
-
1275
- BankAccount.isValidNubanAccount(accountNumber);
1276
-
1277
- // output
1278
- // true / false
1279
- ```
1280
-
1281
- ## # Charge Responses
1282
-
1283
- This is the format in which all charge responses in `checkout-js` are returned. A charge response will always have a `status` and a `message`.
1284
-
1285
- ## Success
1286
-
1287
- This means that the charge attempt was successful
1288
-
1289
- **Example**
1290
-
1291
- ```js
1292
- {
1293
- status: 'success',
1294
- message: 'Transaction successful',
1295
- data: { ... }
1296
- }
1297
- ```
1298
-
1299
- ## Auth
1300
-
1301
- This means that additional authentication has to be carried out to complete the transaction
1302
-
1303
- **Example**
1304
-
1305
- ```js
1306
- {
1307
- status: 'auth',
1308
- message: 'Authentication Required', // for 3DS, this would be the 3DS redirect URL
1309
- data: {
1310
- auth: 'pin' // can either be [pin, otp or 3DS]
1311
- }
1312
- }
1313
- ```
1314
-
1315
- ## Failed
1316
-
1317
- This means that the charge attempt failed
1318
-
1319
- **Example**
1320
-
1321
- ```js
1322
- {
1323
- status: 'failed',
1324
- message: 'Transaction failed',
1325
- errors: [],
1326
- /* the 'error' object is only available if a card transaction fails. It tells us the bank the failed card was issued by. You can use this to suggest that your customer pays with their bank account, if it's one of the supported banks in Toolkit.fetch('banks') */
1327
- error: {
1328
- bank: 'Guaranty Trust Bank'
1329
- }
1330
- }
1331
- ```
1332
-
1333
- # Additional Notes
1334
-
1335
- ### Pusher
1336
-
1337
- This library uses a third party service, Pusher, to listen for API responses in the following methods
1338
-
1339
- - `Transaction.listenFor3DSCharge`
1340
- - `Transaction.listenForIbankCharge`
1341
- - `Transaction.listenForUSSDCharge`
1342
- - `Transaction.listenForQRCharge`
1343
- - `Transaction.listenForMobileMoneyCharge`
1344
- - `Transaction.listenForDigitalBankMandateCharge`
1345
-
1346
- However, this does not work on non-Paystack domains so you have to use the `transaction.requery()` method to check the status of the transaction when using any of those payment methods.
1347
-
1348
- ### Error Handling
1349
-
1350
- To ensure higher success rates, errors and failure messages should not be taken as an indication of finality, for example when a payment fails on the Paystack Checkout, the customer is prompted to retry via the same payment method or an alternative payment method.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paystack/checkout-js",
3
- "version": "1.41.0",
3
+ "version": "1.41.1",
4
4
  "description": "Client-side JS library for billing on Paystack",
5
5
  "main": "lib/checkout.js",
6
6
  "module": "es/checkout.js",