@tokelia/pay-widget 13.0.45-tokelia.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.html ADDED
@@ -0,0 +1,1799 @@
1
+ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {
2
+ max-width: 980px;
3
+ margin: 16px auto;
4
+ }
5
+
6
+ body .markdown-body
7
+ {
8
+ padding: 45px;
9
+ }
10
+
11
+ @font-face {
12
+ font-family: fontawesome-mini;
13
+ src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
14
+ }
15
+
16
+ .markdown-body {
17
+ font-family: sans-serif;
18
+ -ms-text-size-adjust: 100%;
19
+ -webkit-text-size-adjust: 100%;
20
+ color: #333333;
21
+ overflow: hidden;
22
+ font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
23
+ font-size: 16px;
24
+ line-height: 1.6;
25
+ word-wrap: break-word;
26
+ }
27
+
28
+ .markdown-body a {
29
+ background: transparent;
30
+ }
31
+
32
+ .markdown-body a:active,
33
+ .markdown-body a:hover {
34
+ outline: 0;
35
+ }
36
+
37
+ .markdown-body b,
38
+ .markdown-body strong {
39
+ font-weight: bold;
40
+ }
41
+
42
+ .markdown-body mark {
43
+ background: #ff0;
44
+ color: #000;
45
+ font-style: italic;
46
+ font-weight: bold;
47
+ }
48
+
49
+ .markdown-body sub,
50
+ .markdown-body sup {
51
+ font-size: 75%;
52
+ line-height: 0;
53
+ position: relative;
54
+ vertical-align: baseline;
55
+ }
56
+ .markdown-body sup {
57
+ top: -0.5em;
58
+ }
59
+ .markdown-body sub {
60
+ bottom: -0.25em;
61
+ }
62
+
63
+ .markdown-body h1 {
64
+ font-size: 2em;
65
+ margin: 0.67em 0;
66
+ }
67
+
68
+ .markdown-body img {
69
+ border: 0;
70
+ }
71
+
72
+ .markdown-body hr {
73
+ -moz-box-sizing: content-box;
74
+ box-sizing: content-box;
75
+ height: 0;
76
+ }
77
+
78
+ .markdown-body pre {
79
+ overflow: auto;
80
+ }
81
+
82
+ .markdown-body code,
83
+ .markdown-body kbd,
84
+ .markdown-body pre,
85
+ .markdown-body samp {
86
+ font-family: monospace, monospace;
87
+ font-size: 1em;
88
+ }
89
+
90
+ .markdown-body input {
91
+ color: inherit;
92
+ font: inherit;
93
+ margin: 0;
94
+ }
95
+
96
+ .markdown-body html input[disabled] {
97
+ cursor: default;
98
+ }
99
+
100
+ .markdown-body input {
101
+ line-height: normal;
102
+ }
103
+
104
+ .markdown-body input[type="checkbox"] {
105
+ box-sizing: border-box;
106
+ padding: 0;
107
+ }
108
+
109
+ .markdown-body table {
110
+ border-collapse: collapse;
111
+ border-spacing: 0;
112
+ }
113
+
114
+ .markdown-body td,
115
+ .markdown-body th {
116
+ padding: 0;
117
+ }
118
+
119
+ .markdown-body .codehilitetable,
120
+ .markdown-body .highlighttable {
121
+ border: 0;
122
+ border-spacing: 0;
123
+ }
124
+
125
+ .markdown-body .codehilitetable tr,
126
+ .markdown-body .highlighttable {
127
+ border: 0;
128
+ }
129
+
130
+ .markdown-body .codehilitetable pre,
131
+ .markdown-body .codehilitetable div.codehilite,
132
+ .markdown-body .highlighttable pre,
133
+ .markdown-body .highlighttable div.highlight {
134
+ margin: 0;
135
+ }
136
+
137
+ .markdown-body .linenos,
138
+ .markdown-body .code,
139
+ .markdown-body .codehilitetable td,
140
+ .markdown-body .highlighttable td {
141
+ border: 0;
142
+ padding: 0;
143
+ }
144
+
145
+ .markdown-body td:not(.linenos) .linenodiv {
146
+ padding: 0 !important;
147
+ }
148
+
149
+ .markdown-body .code {
150
+ width: 100%;
151
+ }
152
+
153
+ .markdown-body .linenos div pre,
154
+ .markdown-body .linenodiv pre,
155
+ .markdown-body .linenodiv {
156
+ border: 0;
157
+ -webkit-border-radius: 0;
158
+ -moz-border-radius: 0;
159
+ border-radius: 0;
160
+ -webkit-border-top-left-radius: 3px;
161
+ -webkit-border-bottom-left-radius: 3px;
162
+ -moz-border-radius-topleft: 3px;
163
+ -moz-border-radius-bottomleft: 3px;
164
+ border-top-left-radius: 3px;
165
+ border-bottom-left-radius: 3px;
166
+ }
167
+
168
+ .markdown-body .code div pre,
169
+ .markdown-body .code div {
170
+ border: 0;
171
+ -webkit-border-radius: 0;
172
+ -moz-border-radius: 0;
173
+ border-radius: 0;
174
+ -webkit-border-top-right-radius: 3px;
175
+ -webkit-border-bottom-right-radius: 3px;
176
+ -moz-border-radius-topright: 3px;
177
+ -moz-border-radius-bottomright: 3px;
178
+ border-top-right-radius: 3px;
179
+ border-bottom-right-radius: 3px;
180
+ }
181
+
182
+ .markdown-body * {
183
+ -moz-box-sizing: border-box;
184
+ box-sizing: border-box;
185
+ }
186
+
187
+ .markdown-body input {
188
+ font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
189
+ line-height: 1.4;
190
+ }
191
+
192
+ .markdown-body a {
193
+ color: #4183c4;
194
+ text-decoration: none;
195
+ }
196
+
197
+ .markdown-body a:hover,
198
+ .markdown-body a:focus,
199
+ .markdown-body a:active {
200
+ text-decoration: underline;
201
+ }
202
+
203
+ .markdown-body hr {
204
+ height: 0;
205
+ margin: 15px 0;
206
+ overflow: hidden;
207
+ background: transparent;
208
+ border: 0;
209
+ border-bottom: 1px solid #ddd;
210
+ }
211
+
212
+ .markdown-body hr:before,
213
+ .markdown-body hr:after {
214
+ display: table;
215
+ content: " ";
216
+ }
217
+
218
+ .markdown-body hr:after {
219
+ clear: both;
220
+ }
221
+
222
+ .markdown-body h1,
223
+ .markdown-body h2,
224
+ .markdown-body h3,
225
+ .markdown-body h4,
226
+ .markdown-body h5,
227
+ .markdown-body h6 {
228
+ margin-top: 15px;
229
+ margin-bottom: 15px;
230
+ line-height: 1.1;
231
+ }
232
+
233
+ .markdown-body h1 {
234
+ font-size: 30px;
235
+ }
236
+
237
+ .markdown-body h2 {
238
+ font-size: 21px;
239
+ }
240
+
241
+ .markdown-body h3 {
242
+ font-size: 16px;
243
+ }
244
+
245
+ .markdown-body h4 {
246
+ font-size: 14px;
247
+ }
248
+
249
+ .markdown-body h5 {
250
+ font-size: 12px;
251
+ }
252
+
253
+ .markdown-body h6 {
254
+ font-size: 11px;
255
+ }
256
+
257
+ .markdown-body blockquote {
258
+ margin: 0;
259
+ }
260
+
261
+ .markdown-body ul,
262
+ .markdown-body ol {
263
+ padding: 0;
264
+ margin-top: 0;
265
+ margin-bottom: 0;
266
+ }
267
+
268
+ .markdown-body ol ol,
269
+ .markdown-body ul ol {
270
+ list-style-type: lower-roman;
271
+ }
272
+
273
+ .markdown-body ul ul ol,
274
+ .markdown-body ul ol ol,
275
+ .markdown-body ol ul ol,
276
+ .markdown-body ol ol ol {
277
+ list-style-type: lower-alpha;
278
+ }
279
+
280
+ .markdown-body dd {
281
+ margin-left: 0;
282
+ }
283
+
284
+ .markdown-body code,
285
+ .markdown-body pre,
286
+ .markdown-body samp {
287
+ font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
288
+ font-size: 12px;
289
+ }
290
+
291
+ .markdown-body pre {
292
+ margin-top: 0;
293
+ margin-bottom: 0;
294
+ }
295
+
296
+ .markdown-body kbd {
297
+ background-color: #e7e7e7;
298
+ background-image: -moz-linear-gradient(#fefefe, #e7e7e7);
299
+ background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);
300
+ background-image: linear-gradient(#fefefe, #e7e7e7);
301
+ background-repeat: repeat-x;
302
+ border-radius: 2px;
303
+ border: 1px solid #cfcfcf;
304
+ color: #000;
305
+ padding: 3px 5px;
306
+ line-height: 10px;
307
+ font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
308
+ display: inline-block;
309
+ }
310
+
311
+ .markdown-body>*:first-child {
312
+ margin-top: 0 !important;
313
+ }
314
+
315
+ .markdown-body>*:last-child {
316
+ margin-bottom: 0 !important;
317
+ }
318
+
319
+ .markdown-body .headerlink {
320
+ font: normal 400 16px fontawesome-mini;
321
+ vertical-align: middle;
322
+ margin-left: -16px;
323
+ float: left;
324
+ display: inline-block;
325
+ text-decoration: none;
326
+ opacity: 0;
327
+ color: #333;
328
+ }
329
+
330
+ .markdown-body .headerlink:focus {
331
+ outline: none;
332
+ }
333
+
334
+ .markdown-body h1 .headerlink {
335
+ margin-top: 0.8rem;
336
+ }
337
+
338
+ .markdown-body h2 .headerlink,
339
+ .markdown-body h3 .headerlink {
340
+ margin-top: 0.6rem;
341
+ }
342
+
343
+ .markdown-body h4 .headerlink {
344
+ margin-top: 0.2rem;
345
+ }
346
+
347
+ .markdown-body h5 .headerlink,
348
+ .markdown-body h6 .headerlink {
349
+ margin-top: 0;
350
+ }
351
+
352
+ .markdown-body .headerlink:hover,
353
+ .markdown-body h1:hover .headerlink,
354
+ .markdown-body h2:hover .headerlink,
355
+ .markdown-body h3:hover .headerlink,
356
+ .markdown-body h4:hover .headerlink,
357
+ .markdown-body h5:hover .headerlink,
358
+ .markdown-body h6:hover .headerlink {
359
+ opacity: 1;
360
+ text-decoration: none;
361
+ }
362
+
363
+ .markdown-body h1 {
364
+ padding-bottom: 0.3em;
365
+ font-size: 2.25em;
366
+ line-height: 1.2;
367
+ border-bottom: 1px solid #eee;
368
+ }
369
+
370
+ .markdown-body h2 {
371
+ padding-bottom: 0.3em;
372
+ font-size: 1.75em;
373
+ line-height: 1.225;
374
+ border-bottom: 1px solid #eee;
375
+ }
376
+
377
+ .markdown-body h3 {
378
+ font-size: 1.5em;
379
+ line-height: 1.43;
380
+ }
381
+
382
+ .markdown-body h4 {
383
+ font-size: 1.25em;
384
+ }
385
+
386
+ .markdown-body h5 {
387
+ font-size: 1em;
388
+ }
389
+
390
+ .markdown-body h6 {
391
+ font-size: 1em;
392
+ color: #777;
393
+ }
394
+
395
+ .markdown-body p,
396
+ .markdown-body blockquote,
397
+ .markdown-body ul,
398
+ .markdown-body ol,
399
+ .markdown-body dl,
400
+ .markdown-body table,
401
+ .markdown-body pre,
402
+ .markdown-body .admonition {
403
+ margin-top: 0;
404
+ margin-bottom: 16px;
405
+ }
406
+
407
+ .markdown-body hr {
408
+ height: 4px;
409
+ padding: 0;
410
+ margin: 16px 0;
411
+ background-color: #e7e7e7;
412
+ border: 0 none;
413
+ }
414
+
415
+ .markdown-body ul,
416
+ .markdown-body ol {
417
+ padding-left: 2em;
418
+ }
419
+
420
+ .markdown-body ul ul,
421
+ .markdown-body ul ol,
422
+ .markdown-body ol ol,
423
+ .markdown-body ol ul {
424
+ margin-top: 0;
425
+ margin-bottom: 0;
426
+ }
427
+
428
+ .markdown-body li>p {
429
+ margin-top: 16px;
430
+ }
431
+
432
+ .markdown-body dl {
433
+ padding: 0;
434
+ }
435
+
436
+ .markdown-body dl dt {
437
+ padding: 0;
438
+ margin-top: 16px;
439
+ font-size: 1em;
440
+ font-style: italic;
441
+ font-weight: bold;
442
+ }
443
+
444
+ .markdown-body dl dd {
445
+ padding: 0 16px;
446
+ margin-bottom: 16px;
447
+ }
448
+
449
+ .markdown-body blockquote {
450
+ padding: 0 15px;
451
+ color: #777;
452
+ border-left: 4px solid #ddd;
453
+ }
454
+
455
+ .markdown-body blockquote>:first-child {
456
+ margin-top: 0;
457
+ }
458
+
459
+ .markdown-body blockquote>:last-child {
460
+ margin-bottom: 0;
461
+ }
462
+
463
+ .markdown-body table {
464
+ display: block;
465
+ width: 100%;
466
+ overflow: auto;
467
+ word-break: normal;
468
+ word-break: keep-all;
469
+ }
470
+
471
+ .markdown-body table th {
472
+ font-weight: bold;
473
+ }
474
+
475
+ .markdown-body table th,
476
+ .markdown-body table td {
477
+ padding: 6px 13px;
478
+ border: 1px solid #ddd;
479
+ }
480
+
481
+ .markdown-body table tr {
482
+ background-color: #fff;
483
+ border-top: 1px solid #ccc;
484
+ }
485
+
486
+ .markdown-body table tr:nth-child(2n) {
487
+ background-color: #f8f8f8;
488
+ }
489
+
490
+ .markdown-body img {
491
+ max-width: 100%;
492
+ -moz-box-sizing: border-box;
493
+ box-sizing: border-box;
494
+ }
495
+
496
+ .markdown-body code,
497
+ .markdown-body samp {
498
+ padding: 0;
499
+ padding-top: 0.2em;
500
+ padding-bottom: 0.2em;
501
+ margin: 0;
502
+ font-size: 85%;
503
+ border-radius: 3px;
504
+ }
505
+
506
+ .markdown-body code:not(.highlight):not(.codehilite), .markdown-body samp {
507
+ background-color: rgba(0,0,0,0.04);
508
+ }
509
+
510
+ .markdown-body code:before,
511
+ .markdown-body code:after {
512
+ letter-spacing: -0.2em;
513
+ content: "\00a0";
514
+ }
515
+
516
+ .markdown-body pre>code {
517
+ padding: 0;
518
+ margin: 0;
519
+ font-size: 100%;
520
+ word-break: normal;
521
+ white-space: pre;
522
+ background: transparent;
523
+ border: 0;
524
+ }
525
+
526
+ .markdown-body .codehilite,
527
+ .markdown-body .highlight {
528
+ margin-bottom: 16px;
529
+ }
530
+
531
+ .markdown-body .codehilite pre,
532
+ .markdown-body .highlight pre,
533
+ .markdown-body pre {
534
+ padding: 16px;
535
+ overflow: auto;
536
+ font-size: 85%;
537
+ line-height: 1.45;
538
+ }
539
+
540
+ .markdown-body .codehilite,
541
+ .markdown-body .highlight,
542
+ .markdown-body pre {
543
+ border-radius: 3px;
544
+ }
545
+
546
+ .markdown-body :not(.highlight) > pre {
547
+ background-color: #f7f7f7;
548
+ }
549
+
550
+ .markdown-body .codehilite pre,
551
+ .markdown-body .highlight pre {
552
+ margin-bottom: 0;
553
+ word-break: normal;
554
+ }
555
+
556
+ .markdown-body pre {
557
+ word-wrap: normal;
558
+ }
559
+
560
+ .markdown-body pre code {
561
+ display: inline;
562
+ max-width: initial;
563
+ padding: 0;
564
+ margin: 0;
565
+ overflow: initial;
566
+ line-height: inherit;
567
+ word-wrap: normal;
568
+ background-color: transparent;
569
+ border: 0;
570
+ }
571
+
572
+ .markdown-body pre code:before,
573
+ .markdown-body pre code:after {
574
+ content: normal;
575
+ }
576
+
577
+ /* Admonition */
578
+ .markdown-body .admonition {
579
+ -webkit-border-radius: 3px;
580
+ -moz-border-radius: 3px;
581
+ position: relative;
582
+ border-radius: 3px;
583
+ border: 1px solid #e0e0e0;
584
+ border-left: 6px solid #333;
585
+ padding: 10px 10px 10px 30px;
586
+ }
587
+
588
+ .markdown-body .admonition table {
589
+ color: #333;
590
+ }
591
+
592
+ .markdown-body .admonition p {
593
+ padding: 0;
594
+ }
595
+
596
+ .markdown-body .admonition-title {
597
+ font-weight: bold;
598
+ margin: 0;
599
+ }
600
+
601
+ .markdown-body .admonition>.admonition-title {
602
+ color: #333;
603
+ }
604
+
605
+ .markdown-body .attention>.admonition-title {
606
+ color: #a6d796;
607
+ }
608
+
609
+ .markdown-body .caution>.admonition-title {
610
+ color: #d7a796;
611
+ }
612
+
613
+ .markdown-body .hint>.admonition-title {
614
+ color: #96c6d7;
615
+ }
616
+
617
+ .markdown-body .danger>.admonition-title {
618
+ color: #c25f77;
619
+ }
620
+
621
+ .markdown-body .question>.admonition-title {
622
+ color: #96a6d7;
623
+ }
624
+
625
+ .markdown-body .note>.admonition-title {
626
+ color: #d7c896;
627
+ }
628
+
629
+ .markdown-body .admonition:before,
630
+ .markdown-body .attention:before,
631
+ .markdown-body .caution:before,
632
+ .markdown-body .hint:before,
633
+ .markdown-body .danger:before,
634
+ .markdown-body .question:before,
635
+ .markdown-body .note:before {
636
+ font: normal normal 16px fontawesome-mini;
637
+ -moz-osx-font-smoothing: grayscale;
638
+ -webkit-user-select: none;
639
+ -moz-user-select: none;
640
+ -ms-user-select: none;
641
+ user-select: none;
642
+ line-height: 1.5;
643
+ color: #333;
644
+ position: absolute;
645
+ left: 0;
646
+ top: 0;
647
+ padding-top: 10px;
648
+ padding-left: 10px;
649
+ }
650
+
651
+ .markdown-body .admonition:before {
652
+ content: "\f056\00a0";
653
+ color: 333;
654
+ }
655
+
656
+ .markdown-body .attention:before {
657
+ content: "\f058\00a0";
658
+ color: #a6d796;
659
+ }
660
+
661
+ .markdown-body .caution:before {
662
+ content: "\f06a\00a0";
663
+ color: #d7a796;
664
+ }
665
+
666
+ .markdown-body .hint:before {
667
+ content: "\f05a\00a0";
668
+ color: #96c6d7;
669
+ }
670
+
671
+ .markdown-body .danger:before {
672
+ content: "\f057\00a0";
673
+ color: #c25f77;
674
+ }
675
+
676
+ .markdown-body .question:before {
677
+ content: "\f059\00a0";
678
+ color: #96a6d7;
679
+ }
680
+
681
+ .markdown-body .note:before {
682
+ content: "\f040\00a0";
683
+ color: #d7c896;
684
+ }
685
+
686
+ .markdown-body .admonition::after {
687
+ content: normal;
688
+ }
689
+
690
+ .markdown-body .attention {
691
+ border-left: 6px solid #a6d796;
692
+ }
693
+
694
+ .markdown-body .caution {
695
+ border-left: 6px solid #d7a796;
696
+ }
697
+
698
+ .markdown-body .hint {
699
+ border-left: 6px solid #96c6d7;
700
+ }
701
+
702
+ .markdown-body .danger {
703
+ border-left: 6px solid #c25f77;
704
+ }
705
+
706
+ .markdown-body .question {
707
+ border-left: 6px solid #96a6d7;
708
+ }
709
+
710
+ .markdown-body .note {
711
+ border-left: 6px solid #d7c896;
712
+ }
713
+
714
+ .markdown-body .admonition>*:first-child {
715
+ margin-top: 0 !important;
716
+ }
717
+
718
+ .markdown-body .admonition>*:last-child {
719
+ margin-bottom: 0 !important;
720
+ }
721
+
722
+ /* progress bar*/
723
+ .markdown-body .progress {
724
+ display: block;
725
+ width: 300px;
726
+ margin: 10px 0;
727
+ height: 24px;
728
+ -webkit-border-radius: 3px;
729
+ -moz-border-radius: 3px;
730
+ border-radius: 3px;
731
+ background-color: #ededed;
732
+ position: relative;
733
+ box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .1);
734
+ }
735
+
736
+ .markdown-body .progress-label {
737
+ position: absolute;
738
+ text-align: center;
739
+ font-weight: bold;
740
+ width: 100%; margin: 0;
741
+ line-height: 24px;
742
+ color: #333;
743
+ text-shadow: 1px 1px 0 #fefefe, -1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px -1px 0 #fefefe, 0 1px 0 #fefefe, 0 -1px 0 #fefefe, 1px 0 0 #fefefe, -1px 0 0 #fefefe, 1px 1px 2px #000;
744
+ -webkit-font-smoothing: antialiased !important;
745
+ white-space: nowrap;
746
+ overflow: hidden;
747
+ }
748
+
749
+ .markdown-body .progress-bar {
750
+ height: 24px;
751
+ float: left;
752
+ -webkit-border-radius: 3px;
753
+ -moz-border-radius: 3px;
754
+ border-radius: 3px;
755
+ background-color: #96c6d7;
756
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .1);
757
+ background-size: 30px 30px;
758
+ background-image: -webkit-linear-gradient(
759
+ 135deg, rgba(255, 255, 255, .4) 27%,
760
+ transparent 27%,
761
+ transparent 52%, rgba(255, 255, 255, .4) 52%,
762
+ rgba(255, 255, 255, .4) 77%,
763
+ transparent 77%, transparent
764
+ );
765
+ background-image: -moz-linear-gradient(
766
+ 135deg,
767
+ rgba(255, 255, 255, .4) 27%, transparent 27%,
768
+ transparent 52%, rgba(255, 255, 255, .4) 52%,
769
+ rgba(255, 255, 255, .4) 77%, transparent 77%,
770
+ transparent
771
+ );
772
+ background-image: -ms-linear-gradient(
773
+ 135deg,
774
+ rgba(255, 255, 255, .4) 27%, transparent 27%,
775
+ transparent 52%, rgba(255, 255, 255, .4) 52%,
776
+ rgba(255, 255, 255, .4) 77%, transparent 77%,
777
+ transparent
778
+ );
779
+ background-image: -o-linear-gradient(
780
+ 135deg,
781
+ rgba(255, 255, 255, .4) 27%, transparent 27%,
782
+ transparent 52%, rgba(255, 255, 255, .4) 52%,
783
+ rgba(255, 255, 255, .4) 77%, transparent 77%,
784
+ transparent
785
+ );
786
+ background-image: linear-gradient(
787
+ 135deg,
788
+ rgba(255, 255, 255, .4) 27%, transparent 27%,
789
+ transparent 52%, rgba(255, 255, 255, .4) 52%,
790
+ rgba(255, 255, 255, .4) 77%, transparent 77%,
791
+ transparent
792
+ );
793
+ }
794
+
795
+ .markdown-body .progress-100plus .progress-bar {
796
+ background-color: #a6d796;
797
+ }
798
+
799
+ .markdown-body .progress-80plus .progress-bar {
800
+ background-color: #c6d796;
801
+ }
802
+
803
+ .markdown-body .progress-60plus .progress-bar {
804
+ background-color: #d7c896;
805
+ }
806
+
807
+ .markdown-body .progress-40plus .progress-bar {
808
+ background-color: #d7a796;
809
+ }
810
+
811
+ .markdown-body .progress-20plus .progress-bar {
812
+ background-color: #d796a6;
813
+ }
814
+
815
+ .markdown-body .progress-0plus .progress-bar {
816
+ background-color: #c25f77;
817
+ }
818
+
819
+ .markdown-body .candystripe-animate .progress-bar{
820
+ -webkit-animation: animate-stripes 3s linear infinite;
821
+ -moz-animation: animate-stripes 3s linear infinite;
822
+ animation: animate-stripes 3s linear infinite;
823
+ }
824
+
825
+ @-webkit-keyframes animate-stripes {
826
+ 0% {
827
+ background-position: 0 0;
828
+ }
829
+
830
+ 100% {
831
+ background-position: 60px 0;
832
+ }
833
+ }
834
+
835
+ @-moz-keyframes animate-stripes {
836
+ 0% {
837
+ background-position: 0 0;
838
+ }
839
+
840
+ 100% {
841
+ background-position: 60px 0;
842
+ }
843
+ }
844
+
845
+ @keyframes animate-stripes {
846
+ 0% {
847
+ background-position: 0 0;
848
+ }
849
+
850
+ 100% {
851
+ background-position: 60px 0;
852
+ }
853
+ }
854
+
855
+ .markdown-body .gloss .progress-bar {
856
+ box-shadow:
857
+ inset 0 4px 12px rgba(255, 255, 255, .7),
858
+ inset 0 -12px 0 rgba(0, 0, 0, .05);
859
+ }
860
+
861
+ /* MultiMarkdown Critic Blocks */
862
+ .markdown-body .critic_mark {
863
+ background: #ff0;
864
+ }
865
+
866
+ .markdown-body .critic_delete {
867
+ color: #c82829;
868
+ text-decoration: line-through;
869
+ }
870
+
871
+ .markdown-body .critic_insert {
872
+ color: #718c00 ;
873
+ text-decoration: underline;
874
+ }
875
+
876
+ .markdown-body .critic_comment {
877
+ color: #8e908c;
878
+ font-style: italic;
879
+ }
880
+
881
+ .markdown-body .headeranchor {
882
+ font: normal normal 16px fontawesome-mini;
883
+ line-height: 1;
884
+ display: inline-block;
885
+ text-decoration: none;
886
+ -webkit-font-smoothing: antialiased;
887
+ -moz-osx-font-smoothing: grayscale;
888
+ -webkit-user-select: none;
889
+ -moz-user-select: none;
890
+ -ms-user-select: none;
891
+ user-select: none;
892
+ }
893
+
894
+ .headeranchor:before {
895
+ content: '\e157';
896
+ }
897
+
898
+ .markdown-body .task-list-item {
899
+ list-style-type: none;
900
+ }
901
+
902
+ .markdown-body .task-list-item+.task-list-item {
903
+ margin-top: 3px;
904
+ }
905
+
906
+ .markdown-body .task-list-item input {
907
+ margin: 0 4px 0.25em -20px;
908
+ vertical-align: middle;
909
+ }
910
+
911
+ .markdown-body diagram-div, .markdown-body div.uml-sequence-diagram, .markdown-body, div.uml-flowchart {
912
+ overflow: auto;
913
+ }
914
+
915
+ /* Media */
916
+ @media only screen and (min-width: 480px) {
917
+ .markdown-body {
918
+ font-size:14px;
919
+ }
920
+ }
921
+
922
+ @media only screen and (min-width: 768px) {
923
+ .markdown-body {
924
+ font-size:16px;
925
+ }
926
+ }
927
+
928
+ @media print {
929
+ .markdown-body * {
930
+ background: transparent !important;
931
+ color: black !important;
932
+ filter:none !important;
933
+ -ms-filter: none !important;
934
+ }
935
+
936
+ .markdown-body {
937
+ font-size:12pt;
938
+ max-width:100%;
939
+ outline:none;
940
+ border: 0;
941
+ }
942
+
943
+ .markdown-body a,
944
+ .markdown-body a:visited {
945
+ text-decoration: underline;
946
+ }
947
+
948
+ .markdown-body .headeranchor-link {
949
+ display: none;
950
+ }
951
+
952
+ .markdown-body a[href]:after {
953
+ content: " (" attr(href) ")";
954
+ }
955
+
956
+ .markdown-body abbr[title]:after {
957
+ content: " (" attr(title) ")";
958
+ }
959
+
960
+ .markdown-body .ir a:after,
961
+ .markdown-body a[href^="javascript:"]:after,
962
+ .markdown-body a[href^="#"]:after {
963
+ content: "";
964
+ }
965
+
966
+ .markdown-body pre {
967
+ white-space: pre;
968
+ white-space: pre-wrap;
969
+ word-wrap: break-word;
970
+ }
971
+
972
+ .markdown-body pre,
973
+ .markdown-body blockquote {
974
+ border: 1px solid #999;
975
+ padding-right: 1em;
976
+ page-break-inside: avoid;
977
+ }
978
+
979
+ .markdown-body .progress,
980
+ .markdown-body .progress-bar {
981
+ -moz-box-shadow: none;
982
+ -webkit-box-shadow: none;
983
+ box-shadow: none;
984
+ }
985
+
986
+ .markdown-body .progress {
987
+ border: 1px solid #ddd;
988
+ }
989
+
990
+ .markdown-body .progress-bar {
991
+ height: 22px;
992
+ border-right: 1px solid #ddd;
993
+ }
994
+
995
+ .markdown-body tr,
996
+ .markdown-body img {
997
+ page-break-inside: avoid;
998
+ }
999
+
1000
+ .markdown-body img {
1001
+ max-width: 100% !important;
1002
+ }
1003
+
1004
+ .markdown-body p,
1005
+ .markdown-body h2,
1006
+ .markdown-body h3 {
1007
+ orphans: 3;
1008
+ widows: 3;
1009
+ }
1010
+
1011
+ .markdown-body h2,
1012
+ .markdown-body h3 {
1013
+ page-break-after: avoid;
1014
+ }
1015
+ }
1016
+ </style><style>/*GitHub*/
1017
+ .highlight {background-color:#f7f7f7;color:#333333;}
1018
+ .highlight .hll {background-color:#ffffcc;}
1019
+ .highlight .c{color:#999988;font-style:italic}
1020
+ .highlight .err{color:#a61717;background-color:#e3d2d2}
1021
+ .highlight .k{font-weight:bold}
1022
+ .highlight .o{font-weight:bold}
1023
+ .highlight .cm{color:#999988;font-style:italic}
1024
+ .highlight .cp{color:#999999;font-weight:bold}
1025
+ .highlight .c1{color:#999988;font-style:italic}
1026
+ .highlight .cs{color:#999999;font-weight:bold;font-style:italic}
1027
+ .highlight .gd{color:#000000;background-color:#ffdddd}
1028
+ .highlight .ge{font-style:italic}
1029
+ .highlight .gr{color:#aa0000}
1030
+ .highlight .gh{color:#999999}
1031
+ .highlight .gi{color:#000000;background-color:#ddffdd}
1032
+ .highlight .go{color:#888888}
1033
+ .highlight .gp{color:#555555}
1034
+ .highlight .gs{font-weight:bold}
1035
+ .highlight .gu{color:#800080;font-weight:bold}
1036
+ .highlight .gt{color:#aa0000}
1037
+ .highlight .kc{font-weight:bold}
1038
+ .highlight .kd{font-weight:bold}
1039
+ .highlight .kn{font-weight:bold}
1040
+ .highlight .kp{font-weight:bold}
1041
+ .highlight .kr{font-weight:bold}
1042
+ .highlight .kt{color:#445588;font-weight:bold}
1043
+ .highlight .m{color:#009999}
1044
+ .highlight .s{color:#dd1144}
1045
+ .highlight .n{color:#333333}
1046
+ .highlight .na{color:teal}
1047
+ .highlight .nb{color:#0086b3}
1048
+ .highlight .nc{color:#445588;font-weight:bold}
1049
+ .highlight .no{color:teal}
1050
+ .highlight .ni{color:purple}
1051
+ .highlight .ne{color:#990000;font-weight:bold}
1052
+ .highlight .nf{color:#990000;font-weight:bold}
1053
+ .highlight .nn{color:#555555}
1054
+ .highlight .nt{color:navy}
1055
+ .highlight .nv{color:teal}
1056
+ .highlight .ow{font-weight:bold}
1057
+ .highlight .w{color:#bbbbbb}
1058
+ .highlight .mf{color:#009999}
1059
+ .highlight .mh{color:#009999}
1060
+ .highlight .mi{color:#009999}
1061
+ .highlight .mo{color:#009999}
1062
+ .highlight .sb{color:#dd1144}
1063
+ .highlight .sc{color:#dd1144}
1064
+ .highlight .sd{color:#dd1144}
1065
+ .highlight .s2{color:#dd1144}
1066
+ .highlight .se{color:#dd1144}
1067
+ .highlight .sh{color:#dd1144}
1068
+ .highlight .si{color:#dd1144}
1069
+ .highlight .sx{color:#dd1144}
1070
+ .highlight .sr{color:#009926}
1071
+ .highlight .s1{color:#dd1144}
1072
+ .highlight .ss{color:#990073}
1073
+ .highlight .bp{color:#999999}
1074
+ .highlight .vc{color:teal}
1075
+ .highlight .vg{color:teal}
1076
+ .highlight .vi{color:teal}
1077
+ .highlight .il{color:#009999}
1078
+ .highlight .gc{color:#999;background-color:#EAF2F5}
1079
+ </style><title>README</title></head><body><article class="markdown-body"><h1 id="tokelia-pay-widget">tokelia-pay widget<a class="headerlink" href="#tokelia-pay-widget" title="Permanent link"></a></h1>
1080
+ <p>Derivado de <a href="https://github.com/DePayFi/widgets">@depay/widgets</a> (MIT).</p>
1081
+ <h2 id="installation">📦 Installation<a class="headerlink" href="#installation" title="Permanent link"></a></h2>
1082
+ <div class="highlight"><pre>npm install @tokelia/pay-widget
1083
+ </pre></div>
1084
+
1085
+ <p>CDN (jsDelivr, sirve el bundle publicado en npm):</p>
1086
+ <div class="highlight"><pre>&lt;script src="https://cdn.jsdelivr.net/npm/@tokelia/pay-widget@13/dist/umd/index.bundle.js"&gt;&lt;/script&gt;
1087
+ </pre></div>
1088
+
1089
+ <p>Global UMD: <code>TokeliaPay</code>. Por ejemplo <code>TokeliaPay.Payment({ integration, apiUrl, ... })</code>.</p>
1090
+ <h3 id="opciones-propias-de-tokelia-pay">Opciones propias de tokelia-pay<a class="headerlink" href="#opciones-propias-de-tokelia-pay" title="Permanent link"></a></h3>
1091
+ <table>
1092
+ <thead>
1093
+ <tr>
1094
+ <th>Opción</th>
1095
+ <th>Tipo</th>
1096
+ <th>Descripción</th>
1097
+ </tr>
1098
+ </thead>
1099
+ <tbody>
1100
+ <tr>
1101
+ <td><code>apiUrl</code></td>
1102
+ <td><code>string</code></td>
1103
+ <td>Base del servicio tokelia-pay (sin barra final). Obligatoria con <code>integration</code>.</td>
1104
+ </tr>
1105
+ <tr>
1106
+ <td><code>endpoints</code></td>
1107
+ <td><code>EndpointOptions</code></td>
1108
+ <td>Plantillas por endpoint (<code>configuration</code>, <code>attempts</code>, <code>attempt</code>, <code>fiatRate</code>, <code>routesAll</code>, <code>routesBest</code>, <code>validationSocket</code>) para sobrescribir las rutas por defecto. Ver <code>src/index.d.ts</code>.</td>
1109
+ </tr>
1110
+ <tr>
1111
+ <td><code>publicKey</code></td>
1112
+ <td><code>string</code></td>
1113
+ <td>PEM para verificar la cabecera <code>x-signature</code> de la configuración. Sin ella no se verifica.</td>
1114
+ </tr>
1115
+ <tr>
1116
+ <td><code>walletConnectProjectId</code></td>
1117
+ <td><code>string</code></td>
1118
+ <td>Project ID de Reown Cloud para WalletConnect. Sin él, WalletConnect no está disponible (MetaMask, Coinbase Wallet y las wallets de navegador funcionan igual).</td>
1119
+ </tr>
1120
+ <tr>
1121
+ <td><code>providers</code></td>
1122
+ <td><code>{[cadena]: string[]}</code></td>
1123
+ <td>RPC por cadena. Si no se pasa, el widget usa las URL de <code>chains</code> que entrega el servicio (proxy JSON-RPC del checkout).</td>
1124
+ </tr>
1125
+ </tbody>
1126
+ </table>
1127
+ <p>Rutas por defecto (relativas a <code>apiUrl</code>, montadas por tokelia-pay bajo <code>/v1/public</code>):</p>
1128
+ <ul>
1129
+ <li><code>configuration</code>: <code>/v1/public/checkouts/{id}</code></li>
1130
+ <li><code>attempts</code>: <code>/v1/public/checkouts/{id}/attempts</code></li>
1131
+ <li><code>attempt</code>: <code>/v1/public/attempts/{id}</code></li>
1132
+ <li><code>fiatRate</code>: <code>/v1/public/rates/usd/{currency}</code></li>
1133
+ <li><code>routesAll</code>: <code>/v1/public/checkouts/{id}/routes/all</code></li>
1134
+ <li><code>routesBest</code>: <code>/v1/public/checkouts/{id}/routes/best</code></li>
1135
+ </ul>
1136
+ <p>Sin <code>apiUrl</code> (modo no gestionado con <code>accept</code>) hay que pasar <code>endpoints.routesAll</code> y <code>endpoints.routesBest</code>: el widget no calcula rutas por sí mismo ni consulta a DePay.</p>
1137
+ <h3 id="redes-de-pruebas">Redes de pruebas<a class="headerlink" href="#redes-de-pruebas" title="Permanent link"></a></h3>
1138
+ <p><code>basesepolia</code> (Base Sepolia, chainId 84532) está soportada para QA con el router de tokelia-pay. El resumen del pago muestra la etiqueta &quot;Red de pruebas&quot;. El servicio solo la activa para inquilinos en <code>mode: &quot;test&quot;</code>.</p>
1139
+ <h2 id="import-in-your-javascript-files">Import in your JavaScript files<a class="headerlink" href="#import-in-your-javascript-files" title="Permanent link"></a></h2>
1140
+ <div class="highlight"><pre>import TokeliaPay from &#39;@tokelia/pay-widget&#39;
1141
+ </pre></div>
1142
+
1143
+ <h2 id="server-side-rendering-ssr">Server-Side Rendering (SSR)<a class="headerlink" href="#server-side-rendering-ssr" title="Permanent link"></a></h2>
1144
+ <p>If you&rsquo;re using SSR frameworks like Next.js, make sure to only load DePay Widgets on the client side.</p>
1145
+ <p>Guide: <a href="https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa">https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa</a></p>
1146
+ <h2 id="demos">Demos<a class="headerlink" href="#demos" title="Permanent link"></a></h2>
1147
+ <p>Configurator UI: <a href="https://app.depay.com/integrations/new">https://app.depay.com/integrations/new</a></p>
1148
+ <p>Technical Demo: <a href="https://depayfi.github.io/widgets/demo.bundle.html">https://depayfi.github.io/widgets/demo.bundle.html</a></p>
1149
+ <h2 id="support">Support<a class="headerlink" href="#support" title="Permanent link"></a></h2>
1150
+ <h3 id="platforms">Platforms<a class="headerlink" href="#platforms" title="Permanent link"></a></h3>
1151
+ <p>Este paquete es solo EVM (Ethereum Virtual Machine).<br />
1152
+ Se distribuye como un único build; no hay empaquetado específico por plataforma (sin variantes EVM/SVM).</p>
1153
+ <h3 id="blockchains">Blockchains<a class="headerlink" href="#blockchains" title="Permanent link"></a></h3>
1154
+ <ul>
1155
+ <li><a href="https://ethereum.org">Ethereum</a></li>
1156
+ <li><a href="https://www.binance.org/smartChain">BNB Smart Chain</a></li>
1157
+ <li><a href="https://polygon.technology">Polygon</a></li>
1158
+ <li><a href="https://arbitrum.io">Arbitrum</a></li>
1159
+ <li><a href="https://www.optimism.io">Optimism</a></li>
1160
+ <li><a href="https://base.org">Base</a></li>
1161
+ <li><a href="https://docs.base.org/base-chain/quickstart/network-information">Base Sepolia</a> (testnet)</li>
1162
+ <li><a href="https://www.avax.network">Avalanche</a></li>
1163
+ <li><a href="https://gnosis.io">Gnosis</a></li>
1164
+ </ul>
1165
+ <h3 id="wallets">Wallets<a class="headerlink" href="#wallets" title="Permanent link"></a></h3>
1166
+ <p>DePay supports <a href="https://depay.com/wallets">most crypto wallets</a>.</p>
1167
+ <h2 id="payment-widget">Payment Widget<a class="headerlink" href="#payment-widget" title="Permanent link"></a></h2>
1168
+ <p>DePay Payments allows you to accept and perform seamless crypto payments.</p>
1169
+ <h3 id="integration">Integration<a class="headerlink" href="#integration" title="Permanent link"></a></h3>
1170
+ <p><code>integration</code></p>
1171
+ <p>Connects the widget to a DePay integration managed via <a href="https://app.depay.com">https://app.depay.com</a>:</p>
1172
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1173
+ <span class="nx">integration</span><span class="o">:</span> <span class="s1">&#39;fe690fbc-1740-4894-b12c-23a72abec54d&#39;</span>
1174
+ <span class="p">})</span>
1175
+ </pre></div>
1176
+
1177
+ <p>The configuration of the integration managed via <a href="https://app.depay.com">https://app.depay.com</a> will be fetched and applied before applying any additional local configurations.</p>
1178
+ <p>You can fully manage an integration via <a href="https://app.depay.com">https://app.depay.com</a>. Passing any additional configuration is not necessary.</p>
1179
+ <blockquote>
1180
+ <p>[!IMPORTANT]
1181
+ Locally applied configurations overwrite remotely stored configurations.</p>
1182
+ </blockquote>
1183
+ <p>If your integration relies on processing dynamic from your backend (e.g. pricing), and you are not managing a fixed configuration via <a href="https://app.depay.com">https://app.depay.com</a>,
1184
+ you need to pass the data that is supposed to be forwarded to your backend for dynamic configurations to the widget:</p>
1185
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1186
+ <span class="nx">integration</span><span class="o">:</span> <span class="s1">&#39;fe690fbc-1740-4894-b12c-23a72abec54d&#39;</span><span class="p">,</span>
1187
+ <span class="nx">payload</span><span class="o">:</span> <span class="p">{</span>
1188
+ <span class="nx">whatever</span><span class="o">:</span> <span class="s1">&#39;you want to forward to your backend for dynamic configurations&#39;</span>
1189
+ <span class="p">}</span>
1190
+ <span class="p">})</span>
1191
+ </pre></div>
1192
+
1193
+ <p>This will forward:</p>
1194
+ <div class="highlight"><pre>{
1195
+ whatever: &#39;you want to forward to your backend for dynamic configurations&#39;
1196
+ }
1197
+ </pre></div>
1198
+
1199
+ <p>to your backend in order to receive a payment configuration for the widget.</p>
1200
+ <blockquote>
1201
+ <p>[!CAUTION]
1202
+ You have the option to utilize managed integrations along with the <code>integration</code> attribute for payment validations (refer to the previous section). Alternatively, if payment validations are not necessary, you may opt for basic configurations using <code>accept</code> (see next section). However, it&rsquo;s important to note that <code>integration</code> and <code>accept</code> cannot be used simultaneously.</p>
1203
+ </blockquote>
1204
+ <h3 id="configuration">Configuration<a class="headerlink" href="#configuration" title="Permanent link"></a></h3>
1205
+ <blockquote>
1206
+ <p>[!CAUTION]
1207
+ To manage your payment integration via app.depay.com, do not pass payment configuration locally. Instead, use app.depay.com exclusively to configure all payment-related settings.</p>
1208
+ </blockquote>
1209
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1210
+ <span class="nx">accept</span><span class="o">:</span> <span class="p">[{</span>
1211
+ <span class="nx">blockchain</span><span class="o">:</span> <span class="s1">&#39;ethereum&#39;</span><span class="p">,</span>
1212
+ <span class="nx">amount</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
1213
+ <span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb&#39;</span><span class="p">,</span>
1214
+ <span class="nx">receiver</span><span class="o">:</span> <span class="s1">&#39;0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02&#39;</span>
1215
+ <span class="p">}]</span>
1216
+ <span class="p">});</span>
1217
+ </pre></div>
1218
+
1219
+ <p>You can also accept multiple payments on multiple blockchains:</p>
1220
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1221
+ <span class="nx">accept</span><span class="o">:</span> <span class="p">[</span>
1222
+ <span class="p">{</span> <span class="c1">// 20 USDT on ethereum</span>
1223
+ <span class="nx">blockchain</span><span class="o">:</span> <span class="s1">&#39;ethereum&#39;</span><span class="p">,</span>
1224
+ <span class="nx">amount</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
1225
+ <span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;0xdac17f958d2ee523a2206206994597c13d831ec7&#39;</span><span class="p">,</span>
1226
+ <span class="nx">receiver</span><span class="o">:</span> <span class="s1">&#39;0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02&#39;</span>
1227
+ <span class="p">},{</span> <span class="c1">// 20 BUSD on bsc</span>
1228
+ <span class="nx">blockchain</span><span class="o">:</span> <span class="s1">&#39;bsc&#39;</span><span class="p">,</span>
1229
+ <span class="nx">amount</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
1230
+ <span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;0xe9e7cea3dedca5984780bafc599bd69add087d56&#39;</span><span class="p">,</span>
1231
+ <span class="nx">receiver</span><span class="o">:</span> <span class="s1">&#39;0x552C2a5a774CcaEeC036d41c983808E3c76477e6&#39;</span>
1232
+ <span class="p">},{</span> <span class="c1">// 20 USDC on polygon</span>
1233
+ <span class="nx">blockchain</span><span class="o">:</span> <span class="s1">&#39;polygon&#39;</span><span class="p">,</span>
1234
+ <span class="nx">amount</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
1235
+ <span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;0x2791bca1f2de4661ed88a30c99a7a9449aa84174&#39;</span><span class="p">,</span>
1236
+ <span class="nx">receiver</span><span class="o">:</span> <span class="s1">&#39;0x552C2a5a774CcaEeC036d41c983808E3c76477e6&#39;</span>
1237
+ <span class="p">}</span>
1238
+ <span class="p">]</span>
1239
+ <span class="p">});</span>
1240
+ </pre></div>
1241
+
1242
+ <h4 id="accept">accept<a class="headerlink" href="#accept" title="Permanent link"></a></h4>
1243
+ <p><code>blockchain</code></p>
1244
+ <p>The blockchain you want to receive the payment on.</p>
1245
+ <p><code>token</code></p>
1246
+ <p>The address of the token you want to receive.</p>
1247
+ <p><code>amount</code> (Optional)</p>
1248
+ <p>The amount of tokens you want to receive. Needs to be passed as a human readable number e.g. <code>20</code>.</p>
1249
+ <p>The <code>BigNumber</code> of that amount will be calculated internally including finding the right amount of decimals for the given token.
1250
+ So please just pass the amount in a human readable form as Number/Decimal: e.g. <code>20</code> for 20 USDT or <code>20.25</code> etc.</p>
1251
+ <p>If you do not pass an amount, the user will be able to select an amount within the widget.</p>
1252
+ <p><code>receiver</code></p>
1253
+ <p>The address receiving the payment. Always double check that you&rsquo;ve set the right address.</p>
1254
+ <h4 id="amount">amount<a class="headerlink" href="#amount" title="Permanent link"></a></h4>
1255
+ <h5 id="fixed-currency-amounts">fixed currency amounts<a class="headerlink" href="#fixed-currency-amounts" title="Permanent link"></a></h5>
1256
+ <p>If you want the widget to fix a payment amount in a currency, use <code>currency</code> and <code>fix</code>:</p>
1257
+ <p><code>currency</code>: </p>
1258
+ <p>Example (charge US$5.20):</p>
1259
+ <div class="highlight"><pre>{
1260
+ amount: {
1261
+ currency: &#39;USD&#39;,
1262
+ fix: 5.20
1263
+ }
1264
+ }
1265
+ </pre></div>
1266
+
1267
+ <p>Make sure to not pass any amounts to <code>accept</code> if you use fix currency amounts.</p>
1268
+ <p>The widget will still display local currency conversions to users. If you want to change this see <code>currency</code> configuration.</p>
1269
+ <h5 id="amount-selection-changeable-amounts">amount selection (changeable amounts)<a class="headerlink" href="#amount-selection-changeable-amounts" title="Permanent link"></a></h5>
1270
+ <p>When you want to control how the amount selection behaves, pass the <code>amount</code> configuration object,
1271
+ alongside values for <code>start</code>, <code>min</code> and <code>step</code>.</p>
1272
+ <p><code>start</code>: The amount that is initially selected.</p>
1273
+ <p><code>min</code>: The minimum amount selectable.</p>
1274
+ <p><code>step</code>: The number by which to increment/decrement changes to the amount.</p>
1275
+ <h4 id="fee">fee<a class="headerlink" href="#fee" title="Permanent link"></a></h4>
1276
+ <p>You can configure a fee which will be applied to every payment with its own dedicated fee receiver address.</p>
1277
+ <p>The fee will be taken from the target token and target amount (after swap, depending on your <code>accept</code> configuration).</p>
1278
+ <p><code>amount</code>: Either percentage (e.g. <code>5%</code>, or absolute amount as BigNumber string (&lsquo;100000000000000000&rsquo;) or pure number (2.5)</p>
1279
+ <p><code>receiver</code>: The address that is supposed to receive the fee.</p>
1280
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1281
+ <span class="nx">accept</span><span class="o">:</span> <span class="p">[</span>
1282
+ <span class="p">{...</span>
1283
+
1284
+ <span class="nx">fee</span><span class="o">:</span> <span class="p">{</span>
1285
+ <span class="nx">amount</span><span class="o">:</span> <span class="s1">&#39;3%&#39;</span><span class="p">,</span>
1286
+ <span class="nx">receiver</span><span class="o">:</span> <span class="s1">&#39;0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02&#39;</span>
1287
+ <span class="p">}</span>
1288
+ <span class="p">}</span>
1289
+ <span class="p">],</span>
1290
+ <span class="p">});</span>
1291
+ </pre></div>
1292
+
1293
+ <h5 id="fee2">fee2<a class="headerlink" href="#fee2" title="Permanent link"></a></h5>
1294
+ <p>You can configure up to 2 fees that will be paid out as part of the payment:</p>
1295
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1296
+ <span class="nx">accept</span><span class="o">:</span> <span class="p">[</span>
1297
+ <span class="p">{...</span>
1298
+
1299
+ <span class="nx">fee</span><span class="o">:</span> <span class="p">{...},</span>
1300
+ <span class="nx">fee2</span><span class="o">:</span> <span class="p">{,</span>
1301
+ <span class="nx">amount</span><span class="o">:</span> <span class="s1">&#39;5%&#39;</span><span class="p">,</span>
1302
+ <span class="nx">receiver</span><span class="o">:</span> <span class="s1">&#39;0x08B277154218CCF3380CAE48d630DA13462E3950&#39;</span>
1303
+ <span class="p">}</span>
1304
+ <span class="p">}</span>
1305
+ <span class="p">],</span>
1306
+ <span class="p">});</span>
1307
+ </pre></div>
1308
+
1309
+ <h5 id="protocolfee">protocolFee<a class="headerlink" href="#protocolfee" title="Permanent link"></a></h5>
1310
+ <p>The fee paid to the protocol:</p>
1311
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1312
+
1313
+ <span class="nx">protocolFee</span><span class="o">:</span> <span class="s1">&#39;1.5%&#39;</span><span class="p">,</span>
1314
+
1315
+ <span class="p">});</span>
1316
+ </pre></div>
1317
+
1318
+ <h4 id="title">title<a class="headerlink" href="#title" title="Permanent link"></a></h4>
1319
+ <p><code>title</code></p>
1320
+ <p>Allows you to change the title of the widget:</p>
1321
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1322
+
1323
+ <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Donation&#39;</span>
1324
+
1325
+ <span class="c1">//...</span>
1326
+ <span class="p">})</span>
1327
+ </pre></div>
1328
+
1329
+ <h4 id="wallets_1">wallets<a class="headerlink" href="#wallets_1" title="Permanent link"></a></h4>
1330
+ <p>You can sort and allow (list) wallets displayed during the initial wallet selection step as follows:</p>
1331
+ <h5 id="walletssort">wallets.sort<a class="headerlink" href="#walletssort" title="Permanent link"></a></h5>
1332
+ <div class="highlight"><pre>{
1333
+ wallets: {
1334
+ sort: [
1335
+ &#39;Uniswap&#39;,
1336
+ &#39;Coinbase&#39;
1337
+ ]
1338
+ }
1339
+ }
1340
+ </pre></div>
1341
+
1342
+ <p>This configuration would display Uniswap and Coinbase first, then would list all the others.</p>
1343
+ <h5 id="walletsallow">wallets.allow<a class="headerlink" href="#walletsallow" title="Permanent link"></a></h5>
1344
+ <div class="highlight"><pre>{
1345
+ wallets: {
1346
+ allow: [
1347
+ &#39;Uniswap&#39;,
1348
+ &#39;Coinbase&#39;,
1349
+ &#39;Rainbow&#39;
1350
+ ]
1351
+ }
1352
+ }
1353
+ </pre></div>
1354
+
1355
+ <p>This configuration would only display Uniswap, Coinbase and Rainbow. No other options/wallets are displayed.</p>
1356
+ <h4 id="wallet">wallet<a class="headerlink" href="#wallet" title="Permanent link"></a></h4>
1357
+ <p><code>wallet</code></p>
1358
+ <p>Allows to pass an already connected wallet instance (to skip the &ldquo;Connect Wallet&rdquo; flow):</p>
1359
+ <div class="highlight"><pre><span class="kd">let</span> <span class="p">{</span> <span class="nx">wallet</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Connect</span><span class="p">({})</span>
1360
+
1361
+ <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1362
+
1363
+ <span class="nx">wallet</span><span class="o">:</span> <span class="nx">wallet</span>
1364
+
1365
+ <span class="p">})</span>
1366
+ </pre></div>
1367
+
1368
+ <h4 id="walletconnectprojectid">walletConnectProjectId<a class="headerlink" href="#walletconnectprojectid" title="Permanent link"></a></h4>
1369
+ <p><code>walletConnectProjectId</code></p>
1370
+ <p>Project ID de <a href="https://cloud.reown.com">Reown Cloud</a> para habilitar WalletConnect. Sin él, WalletConnect no está disponible (MetaMask, Coinbase Wallet y las wallets de navegador siguen funcionando igual):</p>
1371
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1372
+
1373
+ <span class="nx">walletConnectProjectId</span><span class="o">:</span> <span class="s1">&#39;YOUR_PROJECT_ID&#39;</span>
1374
+
1375
+ <span class="p">})</span>
1376
+ </pre></div>
1377
+
1378
+ <h4 id="providers">providers<a class="headerlink" href="#providers" title="Permanent link"></a></h4>
1379
+ <p>Allows to set providers to be used for making RPC calls to the individual blockchains:</p>
1380
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1381
+
1382
+ <span class="nx">providers</span><span class="o">:</span> <span class="p">{</span>
1383
+ <span class="nx">ethereum</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;http://localhost:8545&#39;</span><span class="p">],</span>
1384
+ <span class="nx">bsc</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;http://localhost:8545&#39;</span><span class="p">],</span>
1385
+ <span class="nx">polygon</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;http://localhost:8545&#39;</span><span class="p">]</span>
1386
+ <span class="p">}</span>
1387
+ <span class="p">})</span>
1388
+ </pre></div>
1389
+
1390
+ <p>Si no se pasa <code>providers</code> para una cadena, el widget usa las URL de <code>chains[*].rpcUrls</code> que entrega el checkout de tokelia-pay (el proxy JSON-RPC del servicio).</p>
1391
+
1392
+ <h4 id="currency">currency<a class="headerlink" href="#currency" title="Permanent link"></a></h4>
1393
+ <p>Allows you to enforce displayed local currency (instead of automatically detecting it):</p>
1394
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1395
+
1396
+ <span class="nx">currency</span><span class="o">:</span> <span class="s1">&#39;USD&#39;</span>
1397
+
1398
+ <span class="p">})</span>
1399
+ </pre></div>
1400
+
1401
+ <h4 id="allow-list">allow (list)<a class="headerlink" href="#allow-list" title="Permanent link"></a></h4>
1402
+ <p>Allows only the configured tokens to be eligible as means of payment:</p>
1403
+ <div class="highlight"><pre>TokeliaPay.Payment({
1404
+
1405
+ allow: {
1406
+ ethereum: [
1407
+ &#39;0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE&#39;, // ETH
1408
+ &#39;0xdac17f958d2ee523a2206206994597c13d831ec7&#39;, // USDT
1409
+ &#39;0x6b175474e89094c44da98b954eedeac495271d0f&#39; // DAI
1410
+ ],
1411
+ bsc: [
1412
+ &#39;0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE&#39;, // BNB
1413
+ &#39;0xe9e7cea3dedca5984780bafc599bd69add087d56&#39;, // BUSD
1414
+ &#39;0x55d398326f99059ff775485246999027b3197955&#39; // BSC-USD
1415
+ ],
1416
+ polygon: [
1417
+ &#39;0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE&#39;, // MATIC
1418
+ &#39;0x2791bca1f2de4661ed88a30c99a7a9449aa84174&#39;, // USDC
1419
+ ]
1420
+ }
1421
+
1422
+ })
1423
+ </pre></div>
1424
+
1425
+ <h4 id="deny">deny<a class="headerlink" href="#deny" title="Permanent link"></a></h4>
1426
+ <p>Allows to deny tokens so that they will not be suggested as means of payment:</p>
1427
+ <div class="highlight"><pre>TokeliaPay.Payment({
1428
+
1429
+ deny: {
1430
+ ethereum: [
1431
+ &#39;0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67&#39;, // akSwap
1432
+ &#39;0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF&#39;, // JNTR/e
1433
+ &#39;0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E&#39;, // KICK
1434
+ ],
1435
+ bsc: [
1436
+ &#39;0x119e2ad8f0c85c6f61afdf0df69693028cdc10be&#39;, // Zepe
1437
+ &#39;0xb0557906c617f0048a700758606f64b33d0c41a6&#39;, // Zepe
1438
+ &#39;0x5190b01965b6e3d786706fd4a999978626c19880&#39;, // TheEver
1439
+ &#39;0x68d1569d1a6968f194b4d93f8d0b416c123a599f&#39;, // AABek
1440
+ &#39;0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d&#39;, // AAX
1441
+ &#39;0xbc6675de91e3da8eac51293ecb87c359019621cf&#39;, // AIR
1442
+ &#39;0x5558447b06867ffebd87dd63426d61c868c45904&#39;, // BNBW
1443
+ &#39;0x569b2cf0b745ef7fad04e8ae226251814b3395f9&#39;, // BSCTOKEN
1444
+ &#39;0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e&#39;, // ALPACA
1445
+ &#39;0x7269163f2b060fb90101f58cf724737a2759f0bb&#39;, // PUPDOGE
1446
+ &#39;0xb16600c510b0f323dee2cb212924d90e58864421&#39;, // FLUX
1447
+ &#39;0x2df0b14ee90671021b016dab59f2300fb08681fa&#39;, // SAFEMOON.is
1448
+ &#39;0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf&#39;, // MNEB
1449
+ &#39;0xfc646d0b564bf191b3d3adf2b620a792e485e6da&#39;, // PIZA
1450
+ &#39;0xa58950f05fea2277d2608748412bf9f802ea4901&#39;, // WSG
1451
+ &#39;0x12e34cdf6a031a10fe241864c32fb03a4fdad739&#39; // FREE
1452
+ ]
1453
+ }
1454
+ })
1455
+ </pre></div>
1456
+
1457
+ <h4 id="container">container<a class="headerlink" href="#container" title="Permanent link"></a></h4>
1458
+ <p><code>container</code></p>
1459
+ <p>Allows you to pass a container element that is supposed to contain the widget:</p>
1460
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1461
+ <span class="nx">container</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;my-container&#39;</span><span class="p">)</span>
1462
+ <span class="p">})</span>
1463
+ </pre></div>
1464
+
1465
+ <p>Make sure to set the css value <code>position: relative;</code> for the container element. Otherwise it can not contain the widget.</p>
1466
+ <p>React example:</p>
1467
+ <div class="highlight"><pre><span class="kd">let</span> <span class="nx">CustomComponentWithWidget</span> <span class="o">=</span> <span class="p">(</span><span class="nx">props</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1468
+ <span class="kd">let</span> <span class="nx">container</span> <span class="o">=</span> <span class="nx">useRef</span><span class="p">()</span>
1469
+
1470
+ <span class="nx">useEffect</span><span class="p">(()</span><span class="o">=&gt;</span><span class="p">{</span>
1471
+ <span class="k">if</span><span class="p">(</span><span class="nx">container</span><span class="p">.</span><span class="nx">current</span><span class="p">)</span> <span class="p">{</span>
1472
+ <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span> <span class="p">...</span><span class="nx">defaultArguments</span><span class="p">,</span> <span class="nb">document</span><span class="p">,</span>
1473
+ <span class="nx">container</span><span class="o">:</span> <span class="nx">container</span><span class="p">.</span><span class="nx">current</span>
1474
+ <span class="p">})</span>
1475
+ <span class="p">}</span>
1476
+ <span class="p">},</span> <span class="p">[</span><span class="nx">container</span><span class="p">])</span>
1477
+
1478
+ <span class="k">return</span><span class="p">(</span>
1479
+ <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">container</span><span class="p">}</span> <span class="nx">style</span><span class="o">=</span><span class="p">{{</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">&#39;relative&#39;</span><span class="p">,</span> <span class="nx">border</span><span class="o">:</span> <span class="s1">&#39;1px solid black&#39;</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="s2">&quot;600px&quot;</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span> <span class="s2">&quot;600px&quot;</span> <span class="p">}}</span><span class="o">&gt;&lt;</span><span class="err">/div&gt;</span>
1480
+ <span class="p">)</span>
1481
+ <span class="p">}</span>
1482
+ </pre></div>
1483
+
1484
+ <h4 id="style">style<a class="headerlink" href="#style" title="Permanent link"></a></h4>
1485
+ <p><code>style</code></p>
1486
+ <p>Allows you to change the style of the widget.</p>
1487
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1488
+ <span class="nx">style</span><span class="o">:</span> <span class="p">{</span>
1489
+ <span class="nx">colors</span><span class="o">:</span> <span class="p">{</span>
1490
+ <span class="nx">primary</span><span class="o">:</span> <span class="s1">&#39;#ffd265&#39;</span><span class="p">,</span>
1491
+ <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;#e1b64a&#39;</span><span class="p">,</span>
1492
+ <span class="nx">buttonText</span><span class="o">:</span> <span class="s1">&#39;#000000&#39;</span><span class="p">,</span>
1493
+ <span class="p">},</span>
1494
+ <span class="nx">fontFamily</span><span class="o">:</span> <span class="s1">&#39;&quot;Cardo&quot;, serif !important&#39;</span><span class="p">,</span>
1495
+ <span class="nx">css</span><span class="o">:</span> <span class="err">`</span>
1496
+ <span class="err">@</span><span class="kr">import</span> <span class="nx">url</span><span class="p">(</span><span class="s2">&quot;https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&amp;display=swap&quot;</span><span class="p">);</span>
1497
+
1498
+ <span class="p">.</span><span class="nx">ReactDialogBackground</span> <span class="p">{</span>
1499
+ <span class="nx">background</span><span class="o">:</span> <span class="nx">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mf">0.8</span><span class="p">);</span>
1500
+ <span class="p">}</span>
1501
+ <span class="err">`</span>
1502
+ <span class="p">}</span>
1503
+ <span class="p">})</span>
1504
+ </pre></div>
1505
+
1506
+ <h5 id="colors">colors<a class="headerlink" href="#colors" title="Permanent link"></a></h5>
1507
+ <p><code>colors</code></p>
1508
+ <p>Allows you to set color values:</p>
1509
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1510
+
1511
+ <span class="nx">style</span><span class="o">:</span> <span class="p">{</span>
1512
+ <span class="nx">colors</span><span class="o">:</span> <span class="p">{</span>
1513
+ <span class="nx">primary</span><span class="o">:</span> <span class="s1">&#39;#ffd265&#39;</span><span class="p">,</span>
1514
+ <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;#ffd265&#39;</span><span class="p">,</span>
1515
+ <span class="nx">buttonText</span><span class="o">:</span> <span class="s1">&#39;#000000&#39;</span><span class="p">,</span>
1516
+ <span class="nx">icons</span><span class="o">:</span> <span class="s1">&#39;#ffd265&#39;</span>
1517
+ <span class="p">}</span>
1518
+ <span class="p">}</span>
1519
+ <span class="p">})</span>
1520
+ </pre></div>
1521
+
1522
+ <h5 id="colorsdarkmode">colorsDarkMode<a class="headerlink" href="#colorsdarkmode" title="Permanent link"></a></h5>
1523
+ <p>You can pass colors applicable to dark mode:</p>
1524
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1525
+
1526
+ <span class="nx">style</span><span class="o">:</span> <span class="p">{</span>
1527
+ <span class="nx">colorsDarkMode</span><span class="o">:</span> <span class="p">{</span>
1528
+ <span class="nx">primary</span><span class="o">:</span> <span class="s1">&#39;#000265&#39;</span><span class="p">,</span>
1529
+ <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;#000265&#39;</span><span class="p">,</span>
1530
+ <span class="nx">buttonText</span><span class="o">:</span> <span class="s1">&#39;#FFFFFF&#39;</span><span class="p">,</span>
1531
+ <span class="nx">icons</span><span class="o">:</span> <span class="s1">&#39;#000265&#39;</span>
1532
+ <span class="p">}</span>
1533
+ <span class="p">}</span>
1534
+ <span class="p">})</span>
1535
+ </pre></div>
1536
+
1537
+ <h5 id="fontfamily">fontFamily<a class="headerlink" href="#fontfamily" title="Permanent link"></a></h5>
1538
+ <p><code>fontFamily</code></p>
1539
+ <p>Allows you to set the font-family:</p>
1540
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1541
+
1542
+ <span class="nx">style</span><span class="o">:</span> <span class="p">{</span>
1543
+ <span class="nx">fontFamily</span><span class="o">:</span> <span class="s1">&#39;&quot;Cardo&quot;, serif !important&#39;</span>
1544
+ <span class="p">}</span>
1545
+ <span class="p">})</span>
1546
+ </pre></div>
1547
+
1548
+ <h5 id="css">css<a class="headerlink" href="#css" title="Permanent link"></a></h5>
1549
+ <p><code>css</code></p>
1550
+ <p>Allows you to inject CSS:</p>
1551
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1552
+
1553
+ <span class="nx">style</span><span class="o">:</span> <span class="p">{</span>
1554
+ <span class="nx">css</span><span class="o">:</span> <span class="err">`</span>
1555
+ <span class="err">@</span><span class="kr">import</span> <span class="nx">url</span><span class="p">(</span><span class="s2">&quot;https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&amp;display=swap&quot;</span><span class="p">);</span>
1556
+
1557
+ <span class="p">.</span><span class="nx">ReactDialogBackground</span> <span class="p">{</span>
1558
+ <span class="nx">background</span><span class="o">:</span> <span class="nx">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mf">0.8</span><span class="p">);</span>
1559
+ <span class="p">}</span>
1560
+ <span class="err">`</span>
1561
+ <span class="p">}</span>
1562
+ <span class="p">})</span>
1563
+ </pre></div>
1564
+
1565
+ <h6 id="cssdarkmode">cssDarkMode<a class="headerlink" href="#cssdarkmode" title="Permanent link"></a></h6>
1566
+ <p>Allows you to inject css to adjust darkMode:</p>
1567
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({</span>
1568
+
1569
+ <span class="nx">style</span><span class="o">:</span> <span class="p">{</span>
1570
+ <span class="nx">cssDarkMode</span><span class="o">:</span> <span class="err">`</span>
1571
+ <span class="err">@</span><span class="kr">import</span> <span class="nx">url</span><span class="p">(</span><span class="s2">&quot;https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&amp;display=swap&quot;</span><span class="p">);</span>
1572
+
1573
+ <span class="p">.</span><span class="nx">ReactDialogBackground</span> <span class="p">{</span>
1574
+ <span class="nx">background</span><span class="o">:</span> <span class="nx">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mf">0.8</span><span class="p">);</span>
1575
+ <span class="p">}</span>
1576
+ <span class="err">`</span>
1577
+ <span class="p">}</span>
1578
+ <span class="p">})</span>
1579
+ </pre></div>
1580
+
1581
+ <h4 id="unmount">unmount<a class="headerlink" href="#unmount" title="Permanent link"></a></h4>
1582
+ <p><code>unmount</code></p>
1583
+ <p>Allows you to unmount (the React safe way) the entire widget from the outside:</p>
1584
+ <div class="highlight"><pre><span class="kd">let</span> <span class="p">{</span> <span class="nx">unmount</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({})</span>
1585
+
1586
+ <span class="nx">unmount</span><span class="p">()</span>
1587
+ </pre></div>
1588
+
1589
+ <h2 id="connect-widget">Connect Widget<a class="headerlink" href="#connect-widget" title="Permanent link"></a></h2>
1590
+ <p>DePay Connect allows you to have your users connect their crypto wallet to your dApp or website.</p>
1591
+ <p>Returns connected <code>account</code> and <code>wallet</code> in return. </p>
1592
+ <div class="highlight"><pre><span class="kd">let</span> <span class="p">{</span> <span class="nx">account</span><span class="p">,</span> <span class="nx">wallet</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Connect</span><span class="p">()</span>
1593
+ </pre></div>
1594
+
1595
+ <p>See <a href="https://github.com/depayfi/web3-wallets">web3-wallets</a> for more details about the returned <code>wallet</code>.</p>
1596
+ <h3 id="rejections">Rejections<a class="headerlink" href="#rejections" title="Permanent link"></a></h3>
1597
+ <ol>
1598
+ <li>Rejects if user just closes the dialog without connecting any wallet:</li>
1599
+ </ol>
1600
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Connect</span><span class="p">().</span><span class="nx">then</span><span class="p">(()</span><span class="o">=&gt;</span><span class="p">{}).</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1601
+ <span class="nx">error</span> <span class="c1">// &quot;USER_CLOSED_DIALOG&quot;</span>
1602
+ <span class="p">})</span>
1603
+ </pre></div>
1604
+
1605
+ <h2 id="login-widget">Login Widget<a class="headerlink" href="#login-widget" title="Permanent link"></a></h2>
1606
+ <p>DePay Login allows you to perform web3 wallet logins with ease.</p>
1607
+ <p>Returns <code>account</code> if successfully signed and recovered log in message.</p>
1608
+ <div class="highlight"><pre><span class="kd">let</span> <span class="nx">message</span> <span class="o">=</span> <span class="s2">&quot;Sign to login&quot;</span>
1609
+ <span class="kd">let</span> <span class="p">{</span> <span class="nx">account</span><span class="p">,</span> <span class="nx">wallet</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Login</span><span class="p">({</span> <span class="nx">message</span> <span class="p">})</span>
1610
+ </pre></div>
1611
+
1612
+ <p>Connects wallet and instructs connected wallet to sign <code>message</code>, afterwards sends <code>signature</code> and <code>message</code> to <code>POST /login</code> (or <code>endpoint</code> if defined):</p>
1613
+ <div class="highlight"><pre>POST /login
1614
+ BODY
1615
+ {
1616
+ &quot;message&quot;: &quot;Sign to login&quot;,
1617
+ &quot;signature&quot;: &quot;0x123456&quot; // raw signature
1618
+ }
1619
+ </pre></div>
1620
+
1621
+ <p>The <code>/login</code> endpoint needs to recover the address for <code>message</code> and <code>signature</code>.</p>
1622
+ <p>e.g. your backend could use node + ethers.js to recover the signature</p>
1623
+ <div class="highlight"><pre><span class="kr">const</span> <span class="nx">ethers</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;ethers&#39;</span><span class="p">)</span>
1624
+ <span class="kr">const</span> <span class="nx">hashedMessage</span> <span class="o">=</span> <span class="nx">ethers</span><span class="p">.</span><span class="nx">utils</span><span class="p">.</span><span class="nx">hashMessage</span><span class="p">(</span><span class="nx">inputs</span><span class="p">.</span><span class="nx">message</span><span class="p">)</span>
1625
+ <span class="kr">const</span> <span class="nx">address</span> <span class="o">=</span> <span class="nx">ethers</span><span class="p">.</span><span class="nx">utils</span><span class="p">.</span><span class="nx">recoverAddress</span><span class="p">(</span><span class="nx">hashedMessage</span><span class="p">,</span> <span class="nx">inputs</span><span class="p">.</span><span class="nx">signature</span><span class="p">)</span>
1626
+ <span class="k">return</span> <span class="nx">address</span>
1627
+ </pre></div>
1628
+
1629
+ <p>make sure you return the recovered address back to the widget:</p>
1630
+ <div class="highlight"><pre>POST /login
1631
+ RESPONSE
1632
+ &quot;0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045&quot;
1633
+ </pre></div>
1634
+
1635
+ <p>Which will resolve the <code>TokeliaPay.Login</code> request to the resolved account:</p>
1636
+ <div class="highlight"><pre><span class="nx">account</span> <span class="c1">// 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045</span>
1637
+ </pre></div>
1638
+
1639
+ <p>You can also pass a <code>recover</code> function that takes care of signature recovery:</p>
1640
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Login</span><span class="p">({</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">recover</span><span class="o">:</span> <span class="p">({</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">signature</span> <span class="p">})</span><span class="o">=&gt;</span><span class="p">{</span>
1641
+ <span class="k">return</span> <span class="k">new</span> <span class="nx">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1642
+ <span class="nx">fetch</span><span class="p">(</span><span class="s1">&#39;https://example.com/login&#39;</span><span class="p">,</span> <span class="p">{</span>
1643
+ <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span>
1644
+ <span class="nx">body</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span> <span class="nx">message</span><span class="p">,</span> <span class="nx">signature</span> <span class="p">})</span>
1645
+ <span class="p">})</span>
1646
+ <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1647
+ <span class="k">if</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span> <span class="o">==</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span>
1648
+ <span class="nx">response</span><span class="p">.</span><span class="nx">text</span><span class="p">().</span><span class="nx">then</span><span class="p">((</span><span class="nx">account</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1649
+ <span class="nx">resolve</span><span class="p">(</span><span class="nx">account</span><span class="p">)</span>
1650
+ <span class="p">}).</span><span class="k">catch</span><span class="p">(</span><span class="nx">reject</span><span class="p">)</span>
1651
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
1652
+ <span class="nx">response</span><span class="p">.</span><span class="nx">text</span><span class="p">().</span><span class="nx">then</span><span class="p">((</span><span class="nx">text</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1653
+ <span class="nx">reject</span><span class="p">(</span><span class="nx">text</span> <span class="o">||</span> <span class="s1">&#39;Recovering login signature failed!&#39;</span><span class="p">)</span>
1654
+ <span class="p">}).</span><span class="k">catch</span><span class="p">(</span><span class="nx">reject</span><span class="p">)</span>
1655
+ <span class="p">}</span>
1656
+ <span class="p">})</span>
1657
+ <span class="p">})</span>
1658
+ <span class="p">}</span>
1659
+ <span class="p">})</span>
1660
+ </pre></div>
1661
+
1662
+ <h3 id="sign-message-containing-the-account-address">Sign message containing the account address<a class="headerlink" href="#sign-message-containing-the-account-address" title="Permanent link"></a></h3>
1663
+ <p>In case you want to include the wallet account identifier in the to be signed message, pass a callback function returning a string to <code>message</code>:</p>
1664
+ <div class="highlight"><pre><span class="kd">let</span> <span class="p">{</span> <span class="nx">account</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Login</span><span class="p">({</span>
1665
+ <span class="nx">message</span><span class="o">:</span> <span class="p">(</span><span class="nx">account</span><span class="p">)</span><span class="o">=&gt;</span><span class="err">`</span><span class="nx">Click</span> <span class="nx">to</span> <span class="nx">log</span> <span class="k">in</span> <span class="nx">to</span> <span class="nx">DePay</span> <span class="nx">and</span> <span class="nx">to</span> <span class="nx">accept</span> <span class="nx">DePay</span><span class="err">&#39;</span><span class="nx">s</span> <span class="nx">Terms</span> <span class="nx">of</span> <span class="nx">Service</span><span class="o">:</span> <span class="nx">https</span><span class="o">:</span><span class="c1">//depay.com/legal/terms\n${dateTime}\n${account}`</span>
1666
+ <span class="p">})</span>
1667
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Logged in via signature&quot;</span><span class="p">,</span> <span class="nx">account</span><span class="p">)</span>
1668
+ </pre></div>
1669
+
1670
+ <h3 id="rejections_1">Rejections<a class="headerlink" href="#rejections_1" title="Permanent link"></a></h3>
1671
+ <ol>
1672
+ <li>Rejects if user just closes the dialog without connecting any wallet:</li>
1673
+ </ol>
1674
+ <div class="highlight"><pre><span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Login</span><span class="p">().</span><span class="nx">then</span><span class="p">(()</span><span class="o">=&gt;</span><span class="p">{}).</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1675
+ <span class="nx">error</span> <span class="c1">// &quot;USER_CLOSED_DIALOG&quot;</span>
1676
+ <span class="p">})</span>
1677
+ </pre></div>
1678
+
1679
+ <h2 id="select-widget">Select Widget<a class="headerlink" href="#select-widget" title="Permanent link"></a></h2>
1680
+ <p>DePay Select widget allows you to open a dialog that allows you to select things like tokens, etc.</p>
1681
+ <h3 id="select-token">Select Token<a class="headerlink" href="#select-token" title="Permanent link"></a></h3>
1682
+ <p>Resolves with what has been selected by the user.</p>
1683
+ <div class="highlight"><pre><span class="kd">let</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Select</span><span class="p">({</span> <span class="nx">what</span><span class="o">:</span> <span class="s1">&#39;token&#39;</span> <span class="p">})</span>
1684
+
1685
+ <span class="c1">// {</span>
1686
+ <span class="c1">// address: &quot;0xa0bed124a09ac2bd941b10349d8d224fe3c955eb&quot;</span>
1687
+ <span class="c1">// blockchain: &quot;ethereum&quot;</span>
1688
+ <span class="c1">// decimals: 18</span>
1689
+ <span class="c1">// logo: &quot;https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb/logo.png&quot;</span>
1690
+ <span class="c1">// name: &quot;DePay&quot;</span>
1691
+ <span class="c1">// symbol: &quot;DEPAY&quot;,</span>
1692
+ <span class="c1">// routable: true // information if token is routable through DePay Payment router</span>
1693
+ <span class="c1">// }</span>
1694
+ </pre></div>
1695
+
1696
+ <h3 id="select-nft">Select NFT<a class="headerlink" href="#select-nft" title="Permanent link"></a></h3>
1697
+ <p>Resolves with what has been selected by the user.</p>
1698
+ <p>This only resolves to a single contract on a single blockchain.</p>
1699
+ <p>As NFT collections could span over multiple blockchains, users would need to make one selection per contract address &amp; blockchain.</p>
1700
+ <div class="highlight"><pre><span class="kd">let</span> <span class="nx">collection</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Select</span><span class="p">({</span> <span class="nx">what</span><span class="o">:</span> <span class="s1">&#39;nft&#39;</span> <span class="p">})</span>
1701
+
1702
+ <span class="c1">// {</span>
1703
+ <span class="c1">// address: &quot;0xba30E5F9Bb24caa003E9f2f0497Ad287FDF95623&quot;,</span>
1704
+ <span class="c1">// blockchain: &quot;ethereum&quot;,</span>
1705
+ <span class="c1">// createdAt: &quot;2021-06-18T21:32:25.355263+00:00&quot;,</span>
1706
+ <span class="c1">// image: &quot;https://i.seadn.io/gae/l1wZXP2hHFUQ3turU5VQ9PpgVVasyQ79-ChvCgjoU5xKkBA50OGoJqKZeMOR-qLrzqwIfd1HpYmiv23JWm0EZ14owiPYaufqzmj1?w=500&amp;auto=format&quot;,</span>
1707
+ <span class="c1">// link: &quot;https://opensea.io/collection/bored-ape-kennel-club&quot;,</span>
1708
+ <span class="c1">// name: &quot;BoredApeKennelClub&quot;,</span>
1709
+ <span class="c1">// type: &quot;721&quot;,</span>
1710
+ <span class="c1">// }</span>
1711
+ </pre></div>
1712
+
1713
+ <p>If the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:</p>
1714
+ <div class="highlight"><pre><span class="c1">// {</span>
1715
+ <span class="c1">// address: &quot;0x495f947276749Ce646f68AC8c248420045cb7b5e&quot;,</span>
1716
+ <span class="c1">// blockchain: &quot;ethereum&quot;,</span>
1717
+ <span class="c1">// id: &quot;35347623114821255323888368639026081793120226253597860997754787918389704654849&quot;,</span>
1718
+ <span class="c1">// image: &quot;https://i.seadn.io/gae/IIFck1wOESXNMfCN6nEhFIXReUaSyI68MXNPjvFapbjQXc42ARIcG8k-nEKJjXs1GdCY75ej4qArfy7LDbgGOFSR6zzBIOG-yEw04Q?w=500&amp;auto=format&quot;,</span>
1719
+ <span class="c1">// link: &quot;https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/35347623114821255323888368639026081793120226253597860997754787918389704654849&quot;,</span>
1720
+ <span class="c1">// name: &quot;Genesis Block - 100,000 BC&quot;,</span>
1721
+ <span class="c1">// type: &quot;1155&quot;</span>
1722
+ <span class="c1">// }</span>
1723
+ </pre></div>
1724
+
1725
+ <p>If NFT is a list of mints on solana:</p>
1726
+ <p>If the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:</p>
1727
+ <div class="highlight"><pre><span class="c1">// {</span>
1728
+ <span class="c1">// addresses: [&quot;4RYP3yX52g3BawgS4ShHwJqbrm8FcUF8PPA4oP1eP6Cv&quot;, &quot;5GAse3WFPMCmbrw5x1RVdRaBttReBrgFLkw7yyqbSqtn&quot;],</span>
1729
+ <span class="c1">// blockchain: &quot;solana&quot;,</span>
1730
+ <span class="c1">// image: &quot;https://img-cdn.magiceden.dev/rs:fill:400:400:0:0/plain/https%3A%2F%2Farweave.net%2FevHbhPvYxPn3NgtzeHg3WPS-QFwGdibQwTvY8chccrA%3Fext%3Dpng&quot;,</span>
1731
+ <span class="c1">// link: &quot;https://magiceden.io/marketplace/depay&quot;,</span>
1732
+ <span class="c1">// name: &quot;SOL - AD 2020&quot;,</span>
1733
+ <span class="c1">// type: &quot;metaplex&quot;</span>
1734
+ <span class="c1">// }</span>
1735
+ </pre></div>
1736
+
1737
+ <h2 id="examples">Examples<a class="headerlink" href="#examples" title="Permanent link"></a></h2>
1738
+ <h3 id="react">React<a class="headerlink" href="#react" title="Permanent link"></a></h3>
1739
+ <h4 id="payment-widget_1">Payment Widget<a class="headerlink" href="#payment-widget_1" title="Permanent link"></a></h4>
1740
+ <div class="highlight"><pre><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
1741
+ <span class="kr">import</span> <span class="nx">TokeliaPay</span> <span class="nx">from</span> <span class="s1">&#39;@tokelia/pay-widget&#39;</span>
1742
+
1743
+ <span class="kr">export</span> <span class="k">default</span> <span class="p">(</span><span class="nx">props</span><span class="p">)</span><span class="o">=&gt;</span><span class="p">{</span>
1744
+
1745
+ <span class="kd">let</span> <span class="nx">unmount</span>
1746
+
1747
+ <span class="kr">const</span> <span class="nx">openPaymentWidget</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span><span class="o">=&gt;</span><span class="p">{</span>
1748
+ <span class="p">(</span>
1749
+ <span class="p">{</span> <span class="nx">unmount</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">TokeliaPay</span><span class="p">.</span><span class="nx">Payment</span><span class="p">({...})</span>
1750
+ <span class="p">)</span>
1751
+ <span class="p">}</span>
1752
+
1753
+ <span class="nx">useEffect</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
1754
+ <span class="k">return</span> <span class="p">()</span><span class="o">=&gt;</span><span class="p">{</span>
1755
+ <span class="c1">// make sure an open widgets gets closed/unmounted as part of this component</span>
1756
+ <span class="k">if</span><span class="p">(</span><span class="nx">unmount</span><span class="p">)</span> <span class="p">{</span> <span class="nx">unmount</span><span class="p">()</span> <span class="p">}</span>
1757
+ <span class="p">}</span>
1758
+ <span class="p">},</span> <span class="p">[])</span>
1759
+
1760
+ <span class="k">return</span><span class="p">(</span>
1761
+ <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span> <span class="nx">openPaymentWidget</span> <span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span><span class="o">&gt;</span>
1762
+ <span class="nx">Pay</span>
1763
+ <span class="o">&lt;</span><span class="err">/button&gt;</span>
1764
+ <span class="p">)</span>
1765
+ <span class="p">}</span>
1766
+ </pre></div>
1767
+
1768
+ <h2 id="web3-payments">Web3 Payments<a class="headerlink" href="#web3-payments" title="Permanent link"></a></h2>
1769
+ <p>The future is <a href="https://depay.com/web3-payments">Web3 Payments</a>.</p>
1770
+ <p>Blockchains hold the potential to faster, simpler and smarter payments.</p>
1771
+ <p>Web3 Payments are borderless, peer-to-peer, and support multiple tokens and blockchains.</p>
1772
+ <p>Accept any asset type that your customers already have in their wallet. <a href="https://depay.com">DePay</a> is blockchain agnostic and can at any time be extended on any blockchain-specific plugin. Interoperability, scalability &amp; flexibility are the cornerstones of our protocol. Accepting any asset that users already have in their wallets no matter which blockchain these are held on, reduces friction when performing decentralized payments.</p>
1773
+ <h3 id="chain-agnostic-multichain">Chain Agnostic (Multichain)<a class="headerlink" href="#chain-agnostic-multichain" title="Permanent link"></a></h3>
1774
+ <p>Interoperability is the key principle on which our infrastructure is built. <a href="https://depay.com">DePay</a> is extensible around any blockchain, ensuring a competitive cross-chain future.</p>
1775
+ <h3 id="permissionless">Permissionless<a class="headerlink" href="#permissionless" title="Permanent link"></a></h3>
1776
+ <p>Interoperability is the key principle on which our infrastructure is built. <a href="https://depay.com">DePay</a> is extensible around any blockchain, ensuring a competitive cross-chain future.</p>
1777
+ <h3 id="trustless">Trustless<a class="headerlink" href="#trustless" title="Permanent link"></a></h3>
1778
+ <p>Most Web3 Payment providers &amp; processors receive payments to wallets that they manage themselves. Only in a further intermediate step are the payments paid out to sellers. <a href="https://depay.com">DePay</a> does not act as an intermediary. Every intermediate step is replaced by smart contracts which are connected to decentralized liquidity pools. As a result, trust is no longer required.</p>
1779
+ <h3 id="easy-to-use">Easy to use<a class="headerlink" href="#easy-to-use" title="Permanent link"></a></h3>
1780
+ <p>Our ambition was to create an even easier user experience than you&rsquo;re used to from shopping in current non-crypto e-commerce stores. We think we&rsquo;ve done a good job of that.</p>
1781
+ <h3 id="open-source">Open Source<a class="headerlink" href="#open-source" title="Permanent link"></a></h3>
1782
+ <p>Feel free to use &amp; contribute to our codebase at. We&rsquo;re happy to have you look under our hood. The <a href="https://depay.com">DePay</a> protocol will always remain open source.</p>
1783
+ <h3 id="multichain">Multichain<a class="headerlink" href="#multichain" title="Permanent link"></a></h3>
1784
+ <p><a href="https://depay.com">DePay</a> calculates payment routes on multiple blockchains simultaneously despite what your wallet is currently connected to. Our software automatically detects &amp; switches the network if required.</p>
1785
+ <h2 id="development">Development<a class="headerlink" href="#development" title="Permanent link"></a></h2>
1786
+ <h3 id="quick-start">Quick start<a class="headerlink" href="#quick-start" title="Permanent link"></a></h3>
1787
+ <div class="highlight"><pre>yarn install
1788
+ yarn dev
1789
+ </pre></div>
1790
+
1791
+ <h3 id="testing">Testing<a class="headerlink" href="#testing" title="Permanent link"></a></h3>
1792
+ <h4 id="debug-cypress">Debug Cypress<a class="headerlink" href="#debug-cypress" title="Permanent link"></a></h4>
1793
+ <p>Starts cypress in <code>--headed</code> and <code>--no-exit</code></p>
1794
+ <div class="highlight"><pre>test:cypress:debug
1795
+ </pre></div>
1796
+
1797
+ <p>Test and debug single cypress file:</p>
1798
+ <div class="highlight"><pre>yarn test:cypress:debug --spec &quot;cypress/e2e/bundle.js&quot;
1799
+ </pre></div></article></body></html>