@tonder.io/ionic-full-sdk 0.0.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 (37) hide show
  1. package/.gitlab-ci.yml +19 -0
  2. package/README.md +197 -0
  3. package/cypress.config.js +9 -0
  4. package/dist/classes/3dsHandler.d.ts +20 -0
  5. package/dist/classes/checkout.d.ts +39 -0
  6. package/dist/classes/inlineCheckout.d.ts +66 -0
  7. package/dist/data/api.d.ts +18 -0
  8. package/dist/helpers/skyflow.d.ts +5 -0
  9. package/dist/helpers/styles.d.ts +1 -0
  10. package/dist/helpers/template.d.ts +18 -0
  11. package/dist/helpers/utils.d.ts +7 -0
  12. package/dist/index.d.ts +3 -0
  13. package/dist/index.js +1 -0
  14. package/dist/types/commons-ds.d.ts +40 -0
  15. package/dist/types/commons.d.ts +40 -0
  16. package/dist/types/skyflow.d.ts +39 -0
  17. package/dist/types/skyflow.ds.d.ts +39 -0
  18. package/index.js.example +50 -0
  19. package/package.json +27 -0
  20. package/rollup.config.js +15 -0
  21. package/src/classes/3dsHandler.ts +103 -0
  22. package/src/classes/checkout.ts +148 -0
  23. package/src/classes/inlineCheckout.ts +440 -0
  24. package/src/helpers/skyflow.ts +146 -0
  25. package/src/helpers/styles.ts +60 -0
  26. package/src/helpers/template.ts +194 -0
  27. package/src/helpers/utils.ts +106 -0
  28. package/src/images/amex.png +0 -0
  29. package/src/images/master.png +0 -0
  30. package/src/images/other.png +0 -0
  31. package/src/images/visa.png +0 -0
  32. package/src/index-dev.js +120 -0
  33. package/src/index.html +57 -0
  34. package/src/index.ts +7 -0
  35. package/src/types/commons.ts +43 -0
  36. package/src/types/skyflow.ts +41 -0
  37. package/tsconfig.json +23 -0
package/src/images/amex.png ADDED
Binary file
package/src/images/master.png ADDED
Binary file
package/src/images/other.png ADDED
Binary file
package/src/images/visa.png ADDED
Binary file
package/src/index-dev.js ADDED
@@ -0,0 +1,120 @@
1
+ import { InlineCheckout } from './classes/inlineCheckout'
2
+
3
+ const customStyles = {
4
+ inputStyles: {
5
+ base: {
6
+ border: "2px dashed #4a90e2",
7
+ padding: "12px 8px",
8
+ borderRadius: "8px",
9
+ color: "#333333",
10
+ backgroundColor: "#f0f0f0",
11
+ fontFamily: '"Arial", sans-serif',
12
+ fontSize: '14px',
13
+ '&::placeholder': {
14
+ color: "#888888",
15
+ },
16
+ },
17
+ cardIcon: {
18
+ position: 'absolute',
19
+ left: '6px',
20
+ bottom: 'calc(50% - 12px)',
21
+ },
22
+ complete: {
23
+ color: "#4caf50",
24
+ },
25
+ empty: {},
26
+ focus: {},
27
+ invalid: {
28
+ border: "1px solid #f44336",
29
+ },
30
+ global: {
31
+ '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
32
+ }
33
+ },
34
+ labelStyles: {
35
+ base: {
36
+ fontSize: '14px',
37
+ fontWeight: 'bold',
38
+ fontFamily: '"Inter", sans-serif',
39
+ color: "#4a90e2",
40
+ },
41
+ },
42
+ errorTextStyles: {
43
+ base: {
44
+ fontSize: '12px',
45
+ fontWeight: '500',
46
+ color: "#e74c3c",
47
+ fontFamily: '"Inter", sans-serif',
48
+ },
49
+ },
50
+ labels: {
51
+ cardLabel: 'Número de Tarjeta Personalizado',
52
+ cvvLabel: 'Código de Seguridad',
53
+ expiryMonthLabel: 'Mes de Expiración',
54
+ expiryYearLabel: 'Año de Expiración'
55
+ },
56
+ placeholders: {
57
+ cardPlaceholder: '0000 0000 0000 0000',
58
+ cvvPlaceholder: '123',
59
+ expiryMonthPlaceholder: 'MM',
60
+ expiryYearPlaceholder: 'AA'
61
+ }
62
+ }
63
+
64
+ const checkoutData = {
65
+ customer: {
66
+ firstName: "Adrian",
67
+ lastName: "Martinez",
68
+ country: "Mexico",
69
+ address: "Pinos 507, Col El Tecuan",
70
+ city: "Durango",
71
+ state: "Durango",
72
+ postCode: "34105",
73
+ email: "adrian@email.com",
74
+ phone: "8161234567",
75
+ },
76
+ currency: 'mxn',
77
+ cart: {
78
+ total: 399,
79
+ items: [
80
+ {
81
+ description: "Black T-Shirt",
82
+ quantity: 1,
83
+ price_unit: 1,
84
+ discount: 0,
85
+ taxes: 0,
86
+ product_reference: 1,
87
+ name: "T-Shirt",
88
+ amount_total: 399,
89
+ },
90
+ ]
91
+ }
92
+ };
93
+
94
+ const apiKey = "4c87c36e697e65ddfe288be0afbe7967ea0ab865";
95
+ const returnUrl = "http://localhost:8080/"
96
+ const successUrl = "http://localhost:8080/sucess"
97
+ const inlineCheckout = new InlineCheckout({
98
+ apiKey,
99
+ returnUrl,
100
+ successUrl,
101
+ styles: customStyles
102
+ });
103
+
104
+ inlineCheckout.injectCheckout();
105
+
106
+ document.addEventListener('DOMContentLoaded', function() {
107
+ const payButton = document.getElementById('pay-button');
108
+ payButton.addEventListener('click', async function() {
109
+ try {
110
+ payButton.textContent = 'Procesando...';
111
+ const response = await inlineCheckout.payment(checkoutData);
112
+ console.log(response)
113
+ alert('Pago realizado con éxito');
114
+ } catch (error) {
115
+ alert('Error al realizar el pago')
116
+ } finally {
117
+ payButton.textContent = 'Pagar';
118
+ }
119
+ });
120
+ });
package/src/index.html ADDED
@@ -0,0 +1,57 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <style>
8
+ #checkout-container {
9
+ display: flex;
10
+ justify-content: center;
11
+ }
12
+ #pay-button {
13
+ padding: 10px 20px;
14
+ margin-top: 30px;
15
+ background-color: #4a90e2;
16
+ color: white;
17
+ border: none;
18
+ border-radius: 5px;
19
+ font-size: 16px;
20
+ cursor: pointer;
21
+ transition: background-color 0.3s;
22
+ }
23
+ #payButton:hover {
24
+ background-color: #357abd;
25
+ }
26
+ .cart-details {
27
+ font-size: 3rem;
28
+ font-weight: bold;
29
+ padding: 2rem;
30
+ display: flex;
31
+ justify-content: center;
32
+ }
33
+ .button-container {
34
+ width: 100%;
35
+ display: flex;
36
+ justify-content: center;
37
+ }
38
+ </style>
39
+ </head>
40
+
41
+ <body>
42
+ <div class="checkout-container">
43
+ <div class="cart-details">
44
+ <span>Total&nbsp</span>
45
+ <div id="cart-total">$399</div>
46
+ </div>
47
+ <form id="payment-form">
48
+ <div id="tonder-checkout"></div>
49
+ </form>
50
+ <div class="button-container">
51
+ <button id="pay-button">Pagar</button>
52
+ </div>
53
+ </div>
54
+ </body>
55
+ <script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
56
+ <script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
57
+ </html>
package/src/index.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Checkout } from './classes/checkout'
2
+ import { InlineCheckout } from './classes/inlineCheckout'
3
+
4
+ export {
5
+ Checkout,
6
+ InlineCheckout
7
+ }
package/src/types/commons.ts ADDED
@@ -0,0 +1,43 @@
1
+ export type Customer = {
2
+ firstName: string
3
+ lastName: string
4
+ country: string
5
+ street: string
6
+ city: string
7
+ state: string
8
+ postCode: string
9
+ email: string
10
+ phone: string
11
+ }
12
+
13
+ export type Business = {
14
+ vault_id: string,
15
+ vault_url: string,
16
+ openpay_keys: {
17
+ merchant_id: string,
18
+ public_key: string
19
+ },
20
+ reference: string,
21
+ business: {
22
+ pk: string
23
+ }
24
+ }
25
+
26
+ export type OrderItem = {
27
+ description: string,
28
+ quantity: number,
29
+ price_unit: number,
30
+ discount: number,
31
+ taxes: number,
32
+ product_reference: number,
33
+ name: string,
34
+ amount_total: number
35
+ }
36
+
37
+ export type PaymentData = {
38
+ customer: Customer,
39
+ cart: {
40
+ total: string | number,
41
+ items: OrderItem[]
42
+ }
43
+ }
package/src/types/skyflow.ts ADDED
@@ -0,0 +1,41 @@
1
+ type SkyflowRecord = {
2
+ method: string;
3
+ quorum?: boolean;
4
+ tableName: string;
5
+ fields?: {
6
+ [key: string]: string;
7
+ },
8
+ ID?: string,
9
+ tokenization?: boolean,
10
+ batchID?: string,
11
+ redaction?: "DEFAULT" | "REDACTED" | "MASKED" | "PLAIN_TEXT",
12
+ downloadURL?: boolean,
13
+ upsert?: string,
14
+ tokens?: {
15
+ [key: string]: string;
16
+ }
17
+ }
18
+
19
+ export type VaultRequest = {
20
+ records: SkyflowRecord[],
21
+ continueOnError?: boolean,
22
+ byot?: "DISABLE" | "ENABLE" | "ENABLE_STRICT"
23
+ }
24
+
25
+ export type TokensRequest = {
26
+ baseUrl: string,
27
+ vault_id: string,
28
+ vault_url: string,
29
+ apiKey: string,
30
+ signal: AbortSignal,
31
+ data: {
32
+ [key: string]: any;
33
+ }
34
+ }
35
+
36
+ export type TokensResponse = {
37
+ vaultID: string,
38
+ responses: {
39
+ [key: string]: string;
40
+ }[]
41
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "compilerOptions": {
3
+
4
+ /* Language and Environment */
5
+ "target": "es2015", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
6
+
7
+ /* Modules */
8
+ "module": "esnext", /* Specify what module code is generated. */
9
+ "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
10
+ /* Emit */
11
+ "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
12
+ "outDir": "./dist", /* Specify an output folder for all emitted files. */
13
+ "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
14
+ "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
15
+ /* Type Checking */
16
+ "strict": true,
17
+ "skipLibCheck": true, /* Skip type checking all .d.ts files. */
18
+ "paths": {
19
+ "@tonder/ionic-lite-sdk": ["E:\\@tonder\\ionic\\lite-sdk"]
20
+ },
21
+ "baseUrl": "./",
22
+ }
23
+ }