@tonder.io/ionic-full-sdk 0.0.48-beta.DEV-1610.2 → 0.0.48

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 (12) hide show
  1. package/README.md +169 -7
  2. package/dist/classes/checkout.d.ts +31 -0
  3. package/dist/classes/inlineCheckout.d.ts +1 -1
  4. package/dist/helpers/skyflow.d.ts +3 -3
  5. package/dist/index.js +1 -1
  6. package/dist/types/commons.d.ts +21 -0
  7. package/package.json +2 -2
  8. package/src/classes/inlineCheckout.ts +13 -12
  9. package/src/helpers/skyflow.ts +58 -3
  10. package/src/helpers/utils.ts +0 -1
  11. package/src/types/commons.ts +20 -0
  12. package/src/classes/3dsHandler.ts +0 -326
package/README.md CHANGED
@@ -11,9 +11,10 @@ Tonder SDK helps to integrate the services Tonder offers in your own mobile app
11
11
  5. [Mobile Settings](#mobile-settings)
12
12
  5. [Payment Data Structure](#payment-data-structure)
13
13
  7. [API Reference](#api-reference)
14
- 8. [Examples](#examples)
15
- 9. [Deprecated Functions](#deprecated-functions)
16
- 10. [License](#license)
14
+ 8. [Events](#events)
15
+ 9. [Examples](#examples)
16
+ 10. [Deprecated Functions](#deprecated-functions)
17
+ 11. [License](#license)
17
18
 
18
19
  ## Installation
19
20
 
@@ -54,7 +55,7 @@ import { InlineCheckout } from "@tonder.io/ionic-full-sdk";
54
55
 
55
56
  ```javascript
56
57
  const inlineCheckout = new InlineCheckout({
57
- publicApiKey,
58
+ apiKey,
58
59
  returnUrl,
59
60
  renderPaymentButton: false // true, if you need render default button of tonder
60
61
  });
@@ -103,11 +104,14 @@ const response = await inlineCheckout.payment(checkoutData);
103
104
  | callBack | function | | Callback function invoqued after the payment process end successfully |
104
105
  | isOpenpaySandbox | boolean | | Define if openpay work on sandbox, default value true |
105
106
  | isEnrollmentCard | boolean | | Use the SDK as an enrollment card. |
106
- | customization | object | | Object to customize the checkout behavior and UI. Default value `{saveCards: {showSaved: true, showSaveCardOption: true, autoSave: false}}` |
107
+ | customization | object | | Object to customize the checkout behavior and UI. Default value `{saveCards: {showSaved: true, showSaveCardOption: true, autoSave: false}, paymentButton: {show: false, showAmount: true, text: 'Pagar'}}` |
107
108
  | customization.saveCards.showSaved | boolean | | Show saved cards in the checkout UI. Default value: `true` |
108
109
  | customization.saveCards.showSaveCardOption | object | | Show the option to save the card for future payments. Default value: `true` |
109
- | customization.saveCards.autoSave | object | | Automatically save the card without showing the option to the user. Default value: `false` |
110
-
110
+ | customization.saveCards.autoSave | object | | Automatically save the card without showing the option to the user. Default value: `false` |
111
+ | customization.paymentButton.show | boolean | | Show or hide the payment button. Default value: `false` |
112
+ | customization.paymentButton.text | string | | Custom text for the payment button. Default value: `Pagar` |
113
+ | customization.paymentButton.showAmount | boolean | | Show or hide the amount in the payment button. Default value: `true` |
114
+ | events | IEvents | No | Event handlers for card form input fields (onChange, onFocus, onBlur) |
111
115
  > **Important Note about SaveCard functionality**:
112
116
  > To properly implement the SaveCard feature, you must use a SecureToken. For detailed implementation instructions and best practices, please refer to our official documentation on [How to use SecureToken for secure card saving](https://docs.tonder.io/integration/sdks/secure-token#how-to-use-securetoken-for-secure-card-saving).
113
117
 
@@ -413,6 +417,59 @@ When calling the `payment` method, use the following data structure:
413
417
  - **currency**: String representing the currency code for the transaction (e.g., "MXN" for Mexican Peso).
414
418
 
415
419
  - **metadata**: Object for including any additional information about the transaction. This can be used for internal references or tracking.
420
+ - **apm_config**: (Optional) Configuration object for APM-specific options. Only applicable when using alternative payment methods like Mercado Pago.
421
+ <details>
422
+ <summary>APM Config Fields - Mercado Pago</summary>
423
+
424
+ | **Field** | **Type** | **Description** |
425
+ |-------------------------------------|--------------------------------------------|---------------------------------------------------------------------------|
426
+ | `binary_mode` | `boolean` | If `true`, payment must be approved or rejected immediately (no pending). |
427
+ | `additional_info` | `string` | Extra info shown during checkout and in payment details. |
428
+ | `back_urls` | `object` | URLs to redirect the user after payment. |
429
+ | └─ `success` | `string` | Redirect URL after successful payment. |
430
+ | └─ `pending` | `string` | Redirect URL after pending payment. |
431
+ | └─ `failure` | `string` | Redirect URL after failed/canceled payment. |
432
+ | `auto_return` | `"approved"` \| `"all"` | Enables auto redirection after payment completion. |
433
+ | `payment_methods` | `object` | Payment method restrictions and preferences. |
434
+ | └─ `excluded_payment_methods[]` | `array` | List of payment methods to exclude. |
435
+ | └─ `excluded_payment_methods[].id` | `string` | ID of payment method to exclude (e.g., "visa"). |
436
+ | └─ `excluded_payment_types[]` | `array` | List of payment types to exclude. |
437
+ | └─ `excluded_payment_types[].id` | `string` | ID of payment type to exclude (e.g., "ticket"). |
438
+ | └─ `default_payment_method_id` | `string` | Default payment method (e.g., "master"). |
439
+ | └─ `installments` | `number` | Max number of installments allowed. |
440
+ | └─ `default_installments` | `number` | Default number of installments suggested. |
441
+ | `expires` | `boolean` | Whether the preference has expiration. |
442
+ | `expiration_date_from` | `string` (ISO 8601) | Start of validity period (e.g. `"2025-01-01T12:00:00-05:00"`). |
443
+ | `expiration_date_to` | `string` (ISO 8601) | End of validity period. |
444
+ | `differential_pricing` | `object` | Configuration for differential pricing. |
445
+ | └─ `id` | `number` | ID of the differential pricing strategy. |
446
+ | `marketplace` | `string` | Marketplace identifier (default: "NONE"). |
447
+ | `marketplace_fee` | `number` | Fee to collect as marketplace commission. |
448
+ | `tracks[]` | `array` | Ad tracking configurations. |
449
+ | └─ `type` | `"google_ad"` \| `"facebook_ad"` | Type of tracker. |
450
+ | └─ `values.conversion_id` | `string` | Google Ads conversion ID. |
451
+ | └─ `values.conversion_label` | `string` | Google Ads label. |
452
+ | └─ `values.pixel_id` | `string` | Facebook Pixel ID. |
453
+ | `statement_descriptor` | `string` | Text on payer’s card statement (max 16 characters). |
454
+ | `shipments` | `object` | Shipping configuration. |
455
+ | └─ `mode` | `"custom"` \| `"me2"` \| `"not_specified"` | Type of shipping mode. |
456
+ | └─ `local_pickup` | `boolean` | Enable pickup at local branch (for `me2`). |
457
+ | └─ `dimensions` | `string` | Package dimensions (e.g. `10x10x10,500`). |
458
+ | └─ `default_shipping_method` | `number` | Default shipping method (for `me2`). |
459
+ | └─ `free_methods[]` | `array` | Shipping methods offered for free (for `me2`). |
460
+ | └─ `free_methods[].id` | `number` | ID of free shipping method. |
461
+ | └─ `cost` | `number` | Shipping cost (only for `custom` mode). |
462
+ | └─ `free_shipping` | `boolean` | If `true`, shipping is free (`custom` only). |
463
+ | └─ `receiver_address` | `object` | Shipping address. |
464
+ | └─ `receiver_address.zip_code` | `string` | ZIP or postal code. |
465
+ | └─ `receiver_address.street_name` | `string` | Street name. |
466
+ | └─ `receiver_address.street_number` | `number` | Street number. |
467
+ | └─ `receiver_address.city_name` | `string` | City name. |
468
+ | └─ `receiver_address.state_name` | `string` | State name. |
469
+ | └─ `receiver_address.country_name` | `string` | Country name. |
470
+ | └─ `receiver_address.floor` | `string` | Floor (optional). |
471
+ | └─ `receiver_address.apartment` | `string` | Apartment or unit (optional). |
472
+ </details>
416
473
 
417
474
  ```javascript
418
475
  const paymentData = {
@@ -426,6 +483,10 @@ const paymentData = {
426
483
  postCode: "12345",
427
484
  email: "john.doe@example.com",
428
485
  phone: "1234567890",
486
+ identification:{
487
+ type: "CPF",
488
+ number: "19119119100"
489
+ }
429
490
  },
430
491
  cart: {
431
492
  total: "100.00",
@@ -446,6 +507,8 @@ const paymentData = {
446
507
  metadata: {
447
508
  order_id: "ORDER123",
448
509
  },
510
+ // apm_config: {} // Optional, only for APMs like Mercado Pago, Oxxo Pay
511
+
449
512
  };
450
513
  ```
451
514
 
@@ -458,6 +521,105 @@ const paymentData = {
458
521
  - `removeCheckout()`: Removes the checkout from the DOM and cleans up associated resources.
459
522
  - `setPaymentData(data)`: Set the payment data, such as customer, cart, and metadata. This is useful when using the default Tonder payment button `renderPaymentButton`.
460
523
 
524
+ ## Events
525
+ The SDK provides event handling capabilities for card form input fields, supporting both Full/Enrollment SDK implementations.
526
+
527
+ ### Event Types
528
+ Each event object supports:
529
+ - `onChange`: Called when input value changes
530
+ - `onFocus`: Called when input receives focus
531
+ - `onBlur`: Called when input loses focus
532
+ <details>
533
+ <summary>View Interface</summary>
534
+
535
+ ```typescript
536
+ export interface IEvents {
537
+ onChange?: (event: IEventSecureInput) => void;
538
+ onFocus?: (event: IEventSecureInput) => void;
539
+ onBlur?: (event: IEventSecureInput) => void;
540
+ }
541
+ ```
542
+ </details>
543
+
544
+ ### Input event properties
545
+
546
+ | Property | Type | Description |
547
+ |-------------|---------|-------------------------------------------------------------------------------------------------------------|
548
+ | elementType | string | Type of input element (e.g. 'CARDHOLDER_NAME', 'CARD_NUMBER', 'EXPIRATION_YEAR', 'EXPIRATION_MONTH', 'CVV') |
549
+ | isEmpty | boolean | Whether the input field has a value |
550
+ | isFocused | boolean | Whether the input field currently has focus |
551
+ | isValid | boolean | Whether the input value passes validation rules |
552
+
553
+ <details>
554
+ <summary>View Interface</summary>
555
+
556
+ ```typescript
557
+ export interface IEventSecureInput {
558
+ elementType: string;
559
+ isEmpty: boolean;
560
+ isFocused: boolean;
561
+ isValid: boolean;
562
+ }
563
+ ```
564
+ </details>
565
+
566
+
567
+ ### Full/Enrollment SDK Events
568
+ Events are configured during SDK initialization.
569
+
570
+ #### Available Events
571
+ | Event Object | Description |
572
+ |------------------|-----------------------------------|
573
+ | cardHolderEvents | Events for cardholder name input |
574
+ | cardNumberEvents | Events for card number input |
575
+ | cvvEvents | Events for CVV input |
576
+ | monthEvents | Events for expiration month input |
577
+ | yearEvents | Events for expiration year input |
578
+
579
+ <details>
580
+ <summary>View Interface</summary>
581
+
582
+ ```typescript
583
+ export interface IEvents {
584
+ cardHolderEvents?: IEvents;
585
+ cardNumberEvents?: IEvents;
586
+ cvvEvents?: IEvents;
587
+ monthEvents?: IEvents;
588
+ yearEvents?: IEvents;
589
+ }
590
+ ```
591
+ </details>
592
+
593
+ #### Example
594
+ ```typescript
595
+ const inlineCheckout = new InlineCheckout({
596
+ events: {
597
+ cardHolderEvents: {
598
+ onChange: (event) => {
599
+ console.log('Card holder change event', event);
600
+ },
601
+ onFocus: (event) => {
602
+ console.log('Card holder focus event', event);
603
+ },
604
+ onBlur: (event) => {
605
+ console.log('Card holder blur event', event);
606
+ }
607
+ },
608
+ cvvEvents: {
609
+ onChange: (event) => {
610
+ console.log('Cvv change event', event);
611
+ },
612
+ onFocus: (event) => {
613
+ console.log('Cvv focus event', event);
614
+ },
615
+ onBlur: (event) => {
616
+ console.log('Cvv blur event', event);
617
+ }
618
+ }
619
+ }
620
+ });
621
+ ```
622
+
461
623
  ## Examples
462
624
 
463
625
  Here are examples of how to implement Tonder SDK:
package/dist/classes/checkout.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { CheckoutType } from "../types/commons";
2
+ export declare class Checkout {
3
+ url: string;
4
+ apiKey?: string;
5
+ type: string;
6
+ backgroundColor: string;
7
+ color: string;
8
+ params: string;
9
+ order: any;
10
+ buttonText: string;
11
+ cb: (params: any) => void;
12
+ tonderButton: any;
13
+ constructor({ apiKey, type, backgroundColor, color, cb, url }: CheckoutType);
14
+ generateButton: (buttonText: string) => void;
15
+ getButton: ({ buttonText }: {
16
+ buttonText: string;
17
+ }) => any;
18
+ mountButton: ({ buttonText }: {
19
+ buttonText: string;
20
+ }) => void;
21
+ stylishButton: (element: HTMLElement) => void;
22
+ setOrder: ({ products, email, shippingCost }: {
23
+ products: any;
24
+ email: string;
25
+ shippingCost: string;
26
+ }) => any;
27
+ openTabListener: (tab: any, button: HTMLButtonElement) => void;
28
+ openCheckout: () => void;
29
+ getUrlParams: () => string;
30
+ receiveMessage(event: any): void;
31
+ }
package/dist/classes/inlineCheckout.d.ts CHANGED
@@ -26,7 +26,7 @@ export declare class InlineCheckout extends BaseInlineCheckout<IInlineCustomizat
26
26
  radioChecked: string | null;
27
27
  isOpenPaySandbox: boolean;
28
28
  isEnrollmentCard: boolean;
29
- constructor({ apiKey, returnUrl, renderPaymentButton, callBack, styles, containerId, collectorIds, isOpenPaySandbox, isEnrollmentCard, renderSaveCardButton, mode, customization, }: IInlineCheckoutOptions);
29
+ constructor({ apiKey, returnUrl, renderPaymentButton, callBack, styles, containerId, collectorIds, isOpenPaySandbox, isEnrollmentCard, renderSaveCardButton, mode, customization, events }: IInlineCheckoutOptions);
30
30
  setCustomerEmail(email: string): void;
31
31
  setPaymentData(data: IProcessPaymentRequest): void;
32
32
  injectCheckout(): Promise<void>;
package/dist/helpers/skyflow.d.ts CHANGED
@@ -2,9 +2,9 @@ import CollectElement from "skyflow-js/types/core/external/collect/collect-eleme
2
2
  import { CollectorIds } from "./template";
3
3
  import RevealElement from "skyflow-js/types/core/external/reveal/reveal-element";
4
4
  import ComposableElement from "skyflow-js/types/core/external/collect/compose-collect-element";
5
- import { InCollectorContainer } from "../types/commons";
6
- export declare function initSkyflow(vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any | undefined, collectorIds: CollectorIds, apiKey: string): Promise<InCollectorContainer>;
7
- export declare function initUpdateSkyflow(skyflowId: string, vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any | undefined, collectorIds: CollectorIds, apiKey: string): Promise<{
5
+ import { IEvents, InCollectorContainer } from "../types/commons";
6
+ export declare function initSkyflow(vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any | undefined, collectorIds: CollectorIds, apiKey: string, events?: IEvents): Promise<InCollectorContainer>;
7
+ export declare function initUpdateSkyflow(skyflowId: string, vaultId: string, vaultUrl: string, baseUrl: string, signal: AbortSignal, customStyles: any | undefined, collectorIds: CollectorIds, apiKey: string, events?: IEvents): Promise<{
8
8
  container: import("skyflow-js/types/core/external/collect/collect-container").default | import("skyflow-js/types/core/external/collect/compose-collect-container").default | import("skyflow-js/types/core/external/reveal/reveal-container").default;
9
9
  elements: {
10
10
  cvvElement: CollectElement | ComposableElement | RevealElement;