@paykka/card-checkout-ui 0.6.0 → 0.8.0

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 (177) hide show
  1. package/dist/card-checkout-ui.js +19 -19
  2. package/dist/card-checkout-ui.umd.cjs +19 -19
  3. package/dist/es/api/index.js +0 -2
  4. package/dist/es/api/modules/checkout/index.js +1 -15
  5. package/dist/es/api/modules/checkout/map.js +31 -3
  6. package/dist/es/api/modules/index.js +0 -2
  7. package/dist/es/components/AccountNameField/index.js +0 -3
  8. package/dist/es/components/AddressField/index.js +2 -7
  9. package/dist/es/components/AliPay/index.js +45 -34
  10. package/dist/es/components/ApplePay/index.js +19 -13
  11. package/dist/es/components/Card/index.js +334 -155
  12. package/dist/es/components/CardBrands/index.js +0 -2
  13. package/dist/es/components/CardExpireDateField/index.js +1 -4
  14. package/dist/es/components/CardHolderNameField/index.js +3 -5
  15. package/dist/es/components/CardIBANField/index.js +0 -3
  16. package/dist/es/components/CardNo/index.js +0 -2
  17. package/dist/es/components/CardNumberField/index.js +1 -4
  18. package/dist/es/components/CardSecurityCodeField/index.js +1 -4
  19. package/dist/es/components/CardSelector/index.js +0 -3
  20. package/dist/es/components/CombinedCardInfo/index.js +99 -0
  21. package/dist/es/components/DropIn/index.js +210 -0
  22. package/dist/es/components/EmailField/EmailField.js +0 -3
  23. package/dist/es/components/EncryptedCard/index.js +35 -75
  24. package/dist/es/components/GooglePay/index.js +69 -28
  25. package/dist/es/components/RecurringTip/index.js +0 -2
  26. package/dist/es/components/SecuredFieldsProvider/index.js +230 -1
  27. package/dist/es/components/SecuredIframe/index.js +3 -1
  28. package/dist/es/components/Sepa/index.js +26 -30
  29. package/dist/es/components/SubmitButton/index.js +0 -2
  30. package/dist/es/components/ThreeDS/index.js +94 -0
  31. package/dist/es/components/WechatPay/index.js +48 -38
  32. package/dist/es/components/index.js +2 -3
  33. package/dist/es/components/internal/Button/Button.js +0 -2
  34. package/dist/es/components/internal/Button/index.js +0 -2
  35. package/dist/es/components/internal/CheckBox/CheckBox.js +0 -2
  36. package/dist/es/components/internal/CheckBox/index.js +0 -2
  37. package/dist/es/components/internal/Form/type.js +0 -2
  38. package/dist/es/components/internal/Info/Info.js +0 -2
  39. package/dist/es/components/internal/Info/index.js +0 -2
  40. package/dist/es/components/internal/Input/Input.js +2 -2
  41. package/dist/es/components/internal/Input/type.js +0 -2
  42. package/dist/es/components/internal/LoadingCheck/LoadingCheck.js +0 -2
  43. package/dist/es/components/internal/LoadingCheck/index.js +0 -2
  44. package/dist/es/components/internal/Modal/Modal.js +40 -0
  45. package/dist/es/components/internal/Modal/modal2.js +1 -0
  46. package/dist/es/components/internal/Select/Select.js +0 -2
  47. package/dist/es/components/internal/Select/SelectMenu.js +0 -2
  48. package/dist/es/components/internal/Select/SelectMenuItem.js +0 -2
  49. package/dist/es/components/internal/icons/Icon3DSFail.js +3 -0
  50. package/dist/es/components/internal/icons/Icon3DSInfo.js +62 -0
  51. package/dist/es/components/internal/icons/Icon3DSSuccess.js +3 -0
  52. package/dist/es/components/internal/icons/IconCard.js +42 -0
  53. package/dist/es/config.js +0 -2
  54. package/dist/es/constant.js +13 -2
  55. package/dist/es/core/PayKKaCheckout.js +106 -42
  56. package/dist/es/core/Session.js +7 -6
  57. package/dist/es/core/environment.js +26 -0
  58. package/dist/es/core/error.js +21 -0
  59. package/dist/es/core/index.js +0 -2
  60. package/dist/es/core/query.js +0 -2
  61. package/dist/es/core.js +34 -34
  62. package/dist/es/hooks/index.js +0 -2
  63. package/dist/es/hooks/useBreakpoints.js +57 -0
  64. package/dist/es/hooks/useI18n.js +1 -2
  65. package/dist/es/hooks/usePayState.js +20 -24
  66. package/dist/es/i18n/index.js +0 -2
  67. package/dist/es/i18n/locales/de-DE.js +14 -1
  68. package/dist/es/i18n/locales/en-GB.js +14 -1
  69. package/dist/es/i18n/locales/es-ES.js +14 -1
  70. package/dist/es/i18n/locales/fr-FR.js +14 -1
  71. package/dist/es/i18n/locales/index.js +8 -6
  72. package/dist/es/i18n/locales/ja-JP.js +14 -1
  73. package/dist/es/i18n/locales/ko-KR.js +14 -1
  74. package/dist/es/i18n/locales/pt-PT.js +14 -1
  75. package/dist/es/i18n/locales/ru-RU.js +14 -1
  76. package/dist/es/i18n/locales/zh-CN.js +14 -1
  77. package/dist/es/i18n/locales/zh-HK.js +14 -1
  78. package/dist/es/i18n/locales/zh-TW.js +14 -1
  79. package/dist/es/i18n/util.js +22 -8
  80. package/dist/es/index.js +8 -2
  81. package/dist/es/style.css +289 -11
  82. package/dist/es/types/message.js +28 -0
  83. package/dist/es/utils/card-brand/brands.js +12 -10
  84. package/dist/es/utils/card-brand/index.js +3 -2
  85. package/dist/es/utils/iframe.js +23 -0
  86. package/dist/es/utils/index.js +0 -1
  87. package/dist/es/utils/style.js +47 -0
  88. package/dist/style.css +1 -1
  89. package/dist/types/api/modules/checkout/map.d.ts +2 -1
  90. package/dist/types/api/modules/checkout/type.d.ts +24 -2
  91. package/dist/types/api/modules/get-browser-params.d.ts +1 -1
  92. package/dist/types/components/AddressField/type.d.ts +1 -0
  93. package/dist/types/components/AliPay/AliPay.d.ts +2 -1
  94. package/dist/types/components/AliPay/type.d.ts +2 -1
  95. package/dist/types/components/ApplePay/ApplePay.d.ts +2 -1
  96. package/dist/types/components/ApplePay/type.d.ts +9 -5
  97. package/dist/types/components/Card/Card.d.ts +2 -1
  98. package/dist/types/components/Card/type.d.ts +55 -9
  99. package/dist/types/components/CardHolderNameField/type.d.ts +1 -1
  100. package/dist/types/components/CombinedCardInfo/CombinedCardInfo.d.ts +5 -0
  101. package/dist/types/components/CombinedCardInfo/index.d.ts +2 -0
  102. package/dist/types/components/{CombinedEncryptedField → CombinedCardInfo}/type.d.ts +3 -2
  103. package/dist/types/components/DropIn/DropIn.d.ts +6 -0
  104. package/dist/types/components/DropIn/components/PaymentTabs/PaymentTabs.d.ts +3 -0
  105. package/dist/types/components/DropIn/components/PaymentTabs/index.d.ts +2 -0
  106. package/dist/types/components/DropIn/components/PaymentTabs/type.d.ts +11 -0
  107. package/dist/types/components/DropIn/index.d.ts +2 -0
  108. package/dist/types/components/DropIn/type.d.ts +49 -0
  109. package/dist/types/components/GooglePay/GooglePay.d.ts +2 -1
  110. package/dist/types/components/GooglePay/type.d.ts +20 -8
  111. package/dist/types/components/SecuredFieldsProvider/index.d.ts +1 -0
  112. package/dist/types/components/SecuredFieldsProvider/type.d.ts +1 -153
  113. package/dist/types/components/SecuredFieldsProvider/utils/index.d.ts +1 -1
  114. package/dist/types/components/SecuredIframe/useSecuredInput.d.ts +2 -1
  115. package/dist/types/components/Sepa/Sepa.d.ts +2 -1
  116. package/dist/types/components/Sepa/type.d.ts +2 -1
  117. package/dist/types/components/ThreeDS/components/ThreeDSAuth/ThreeDSAuth.d.ts +3 -0
  118. package/dist/types/components/ThreeDS/components/ThreeDSAuth/index.d.ts +2 -0
  119. package/dist/types/components/ThreeDS/components/ThreeDSAuth/type.d.ts +17 -0
  120. package/dist/types/components/ThreeDS/components/ThreeDSIframe/ThreeDSIframe.d.ts +2 -0
  121. package/dist/types/components/ThreeDS/components/ThreeDSIframe/index.d.ts +1 -0
  122. package/dist/types/components/ThreeDS/components/ThreeDSIframe/output.d.ts +1 -0
  123. package/dist/types/components/ThreeDS/components/ThreeDSIframe/type.d.ts +5 -0
  124. package/dist/types/components/ThreeDS/components/ThreeDSStatus/ThreeDSStatus.d.ts +3 -0
  125. package/dist/types/components/ThreeDS/components/ThreeDSStatus/output.d.ts +1 -0
  126. package/dist/types/components/ThreeDS/components/ThreeDSStatus/type.d.ts +6 -0
  127. package/dist/types/components/ThreeDS/index.d.ts +1 -0
  128. package/dist/types/components/WechatPay/WechatPay.d.ts +2 -1
  129. package/dist/types/components/WechatPay/type.d.ts +2 -1
  130. package/dist/types/components/index.d.ts +2 -1
  131. package/dist/types/components/internal/Input/type.d.ts +1 -0
  132. package/dist/types/components/internal/Loading/Loading.d.ts +1 -0
  133. package/dist/types/components/internal/Loading/index.d.ts +1 -0
  134. package/dist/types/components/internal/Modal/Modal.d.ts +5 -0
  135. package/dist/types/components/internal/Modal/index.d.ts +2 -0
  136. package/dist/types/components/internal/Modal/type.d.ts +20 -0
  137. package/dist/types/components/internal/icons/Icon3DSFail.d.ts +2 -0
  138. package/dist/types/components/internal/icons/Icon3DSInfo.d.ts +2 -0
  139. package/dist/types/components/internal/icons/Icon3DSSuccess.d.ts +2 -0
  140. package/dist/types/components/internal/icons/IconCard.d.ts +2 -0
  141. package/dist/types/components/internal/icons/index.d.ts +4 -0
  142. package/dist/types/constant.d.ts +17 -2
  143. package/dist/types/core/PayKKaCheckout.d.ts +23 -6
  144. package/dist/types/core/Session.d.ts +1 -1
  145. package/dist/types/core/context.d.ts +1 -0
  146. package/dist/types/core/environment.d.ts +4 -0
  147. package/dist/types/core/error.d.ts +16 -0
  148. package/dist/types/core/index.d.ts +1 -0
  149. package/dist/types/hooks/index.d.ts +1 -0
  150. package/dist/types/hooks/useBreakpoints.d.ts +15 -0
  151. package/dist/types/hooks/usePayState.d.ts +3 -6
  152. package/dist/types/i18n/locales/de-DE.d.ts +10 -0
  153. package/dist/types/i18n/locales/en-GB.d.ts +10 -0
  154. package/dist/types/i18n/locales/es-ES.d.ts +10 -0
  155. package/dist/types/i18n/locales/fr-FR.d.ts +10 -0
  156. package/dist/types/i18n/locales/index.d.ts +2 -2
  157. package/dist/types/i18n/locales/ja-JP.d.ts +10 -0
  158. package/dist/types/i18n/locales/ko-KR.d.ts +10 -0
  159. package/dist/types/i18n/locales/pt-PT.d.ts +10 -0
  160. package/dist/types/i18n/locales/ru-RU.d.ts +10 -0
  161. package/dist/types/i18n/locales/zh-CN.d.ts +10 -0
  162. package/dist/types/i18n/locales/zh-HK.d.ts +10 -0
  163. package/dist/types/i18n/locales/zh-TW.d.ts +10 -0
  164. package/dist/types/i18n/util.d.ts +5 -0
  165. package/dist/types/index.d.ts +1 -1
  166. package/dist/types/types/index.d.ts +59 -8
  167. package/dist/types/types/message.d.ts +170 -0
  168. package/dist/types/utils/card-brand/brands.d.ts +1 -8
  169. package/dist/types/utils/card-brand/index.d.ts +2 -2
  170. package/dist/types/utils/index.d.ts +1 -0
  171. package/dist/types/utils/style.d.ts +12 -0
  172. package/package.json +2 -2
  173. package/dist/es/components/CombinedEncryptedField/index.js +0 -75
  174. package/dist/es/components/SecuredFieldsProvider/SecuredFieldsProvider.js +0 -268
  175. package/dist/types/components/CombinedEncryptedField/CombinedEncryptedField.d.ts +0 -4
  176. package/dist/types/components/CombinedEncryptedField/index.d.ts +0 -2
  177. /package/dist/types/{components/SecuredFieldsProvider/utils → utils}/iframe.d.ts +0 -0
package/dist/es/style.css CHANGED
@@ -68,17 +68,13 @@
68
68
  border-radius: 8px;
69
69
  border: 1px solid #E1E1E5;
70
70
  transition: border 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
71
- caret-color: var(--paykka-card-checkout-input-color, #4F43DF) .paykka-card-checkout-input__input-wrapper --success;
72
- caret-color-border-bottom: 1px solid #00B42A;
73
- }
74
-
75
- .paykka-card-checkout-input__input-wrapper--error {
76
- border: 1px solid #F53F3F;
71
+ caret-color: var(--paykka-card-checkout-input-color, #4F43DF) .paykka-card-checkout-input__input-wrapper --error;
72
+ caret-color-border: 1px solid #F53F3F;
77
73
  }
78
74
 
79
75
  .paykka-card-checkout-input__input-wrapper:active, .paykka-card-checkout-input__input-wrapper--focus, .paykka-card-checkout-input__input-wrapper:focus {
80
76
  border: 1px solid var(--paykka-card-checkout-input-color, #4F43DF);
81
- box-shadow: 0 0 0 2px var(--paykka-card-checkout-input-color, #4F43DF);
77
+ box-shadow: 0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF);
82
78
  }
83
79
 
84
80
  .paykka-card-checkout-input__input-wrapper-disabled {
@@ -96,16 +92,21 @@
96
92
  border: none;
97
93
  height: 100%;
98
94
  width: 100%;
99
- border-radius: 12px;
95
+ border-radius: 8px;
100
96
  caret-color: var(--paykka-card-checkout-input-color, #4F43DF);
101
97
  font-size: 16px;
102
98
  padding-left: 12px;
99
+ background-color: transparent;
103
100
  }
104
101
 
105
102
  .paykka-card-checkout-input__input::placeholder {
106
103
  color: #C2C2C2;
107
104
  }
108
105
 
106
+ .paykka-card-checkout-input__input:-webkit-autofill, .paykka-card-checkout-input__input:-internal-autofill-selected {
107
+ background-color: transparent !important;
108
+ }
109
+
109
110
  .paykka-card-checkout-input__right-icon {
110
111
  padding-right: 12px;
111
112
  display: flex;
@@ -707,12 +708,163 @@
707
708
  display: none !important;
708
709
  }
709
710
 
711
+ .paykka-card-checkout-modal {
712
+ position: fixed;
713
+ left: 0px;
714
+ right: 0px;
715
+ top: 0px;
716
+ bottom: 0px;
717
+ z-index: 9999;
718
+ display: flex;
719
+ flex-direction: column;
720
+ align-items: center;
721
+ justify-content: center;
722
+ }
723
+
724
+ .paykka-card-checkout-modal__mask {
725
+ position: fixed;
726
+ left: 0;
727
+ right: 0;
728
+ top: 0;
729
+ bottom: 0;
730
+ background-color: rgba(0, 0, 0, 0.4);
731
+ }
732
+
733
+ .paykka-card-checkout-modal__content {
734
+ position: relative;
735
+ z-index: 9999;
736
+ border-radius: 8px;
737
+ background-color: rgb(255, 255, 255);
738
+ box-shadow: 0px 8px 16px -8px rgba(0, 0, 0, 0.08), 0px 12px 32px 0px rgba(0, 0, 0, 0.06), 0px 16px 48px 16px rgba(0, 0, 0, 0.04);
739
+ display: flex;
740
+ flex-direction: column;
741
+ }
742
+
743
+ .paykka-card-checkout-modal__close {
744
+ cursor: pointer;
745
+ right: 0px;
746
+ position: absolute;
747
+ transform: translate(0, -150%);
748
+ color: #d2d2d2;
749
+ }
750
+
751
+ .paykka-card-checkout-modal__close:hover {
752
+ color: #FFFFFF;
753
+ }
754
+
755
+ .paykka-card-checkout-modal__body {
756
+ flex: 1;
757
+ padding-left: 28px;
758
+ padding-right: 28px;
759
+ padding-top: 36px;
760
+ padding-bottom: 24px;
761
+ }::-webkit-scrollbar {
762
+ height: 6px;
763
+ width: 6px;
764
+ }
765
+
766
+ ::-webkit-scrollbar-thumb {
767
+ background-color: rgba(0, 0, 0, 0.25);
768
+ border-radius: 4px;
769
+ }
770
+
771
+ ::-webkit-scrollbar-button {
772
+ display: none !important;
773
+ }
774
+
775
+ ::-moz-scrollbar-button {
776
+ display: none !important;
777
+ }
778
+
779
+ .paykka-card-checkout-three-ds-auth__content {
780
+ height: 100%;
781
+ }
782
+
783
+ .paykka-card-checkout-three-ds-auth__last-three-ds {
784
+ width: 100%;
785
+ height: 100%;
786
+ display: flex;
787
+ align-items: center;
788
+ justify-content: center;
789
+ flex-direction: column;
790
+ }
791
+
792
+ .paykka-card-checkout-three-ds-auth__last-three-ds-title {
793
+ margin-top: 20px;
794
+ margin-bottom: 40px;
795
+ color: #1f1f1f;
796
+ font-size: 20px;
797
+ font-weight: 700;
798
+ text-align: center;
799
+ }::-webkit-scrollbar {
800
+ height: 6px;
801
+ width: 6px;
802
+ }
803
+
804
+ ::-webkit-scrollbar-thumb {
805
+ background-color: rgba(0, 0, 0, 0.25);
806
+ border-radius: 4px;
807
+ }
808
+
809
+ ::-webkit-scrollbar-button {
810
+ display: none !important;
811
+ }
812
+
813
+ ::-moz-scrollbar-button {
814
+ display: none !important;
815
+ }
816
+
817
+ .paykka-card-checkout-combined-card-info {
818
+ width: 100%;
819
+ height: 100%;
820
+ display: flex;
821
+ }
822
+
823
+ .paykka-card-checkout-combined-card-info__card-number {
824
+ flex: 1;
825
+ }
826
+
827
+ .paykka-card-checkout-combined-card-info__expire-date {
828
+ width: 100px;
829
+ }
830
+
831
+ .paykka-card-checkout-combined-card-info__cvv {
832
+ width: 60px;
833
+ }
834
+
835
+ .paykka-card-checkout-combined-card-info__blank-icon {
836
+ width: 16px;
837
+ height: 16px;
838
+ }::-webkit-scrollbar {
839
+ height: 6px;
840
+ width: 6px;
841
+ }
842
+
843
+ ::-webkit-scrollbar-thumb {
844
+ background-color: rgba(0, 0, 0, 0.25);
845
+ border-radius: 4px;
846
+ }
847
+
848
+ ::-webkit-scrollbar-button {
849
+ display: none !important;
850
+ }
851
+
852
+ ::-moz-scrollbar-button {
853
+ display: none !important;
854
+ }
855
+
710
856
  .paykka-card-checkout-card {
711
857
  min-width: 280px;
712
858
  }
713
859
 
714
860
  .paykka-card-checkout-card__field {
715
- margin-bottom: 24px;
861
+ margin-bottom: 16px;
862
+ }
863
+
864
+ @media (min-width: 480px) {
865
+ .paykka-card-checkout-card__field {
866
+ margin-bottom: 20px;
867
+ }
716
868
  }
717
869
 
718
870
  .paykka-card-checkout-card__center {
@@ -731,13 +883,23 @@
731
883
  }
732
884
  }
733
885
 
886
+ .paykka-card-checkout-card__card-info {
887
+ margin-bottom: 16px;
888
+ }
889
+
890
+ @media (min-width: 480px) {
891
+ .paykka-card-checkout-card__card-info {
892
+ margin-bottom: 20px;
893
+ }
894
+ }
895
+
734
896
  .paykka-card-checkout-card__holder-name {
735
- padding-bottom: 16px;
897
+ margin-bottom: 16px;
736
898
  }
737
899
 
738
900
  @media (min-width: 480px) {
739
901
  .paykka-card-checkout-card__holder-name {
740
- padding-bottom: 20px;
902
+ margin-bottom: 20px;
741
903
  }
742
904
  }
743
905
 
@@ -774,6 +936,26 @@
774
936
  .paykka-card-checkout-card__card-selector-wrapper {
775
937
  display: flex;
776
938
  justify-content: space-between;
939
+ }
940
+
941
+ .paykka-card-checkout-card__address {
942
+ margin-bottom: 16px;
943
+ }
944
+
945
+ @media (min-width: 480px) {
946
+ .paykka-card-checkout-card__address {
947
+ margin-bottom: 20px;
948
+ }
949
+ }
950
+
951
+ .paykka-card-checkout-card__store-checkbox {
952
+ margin-top: 16px;
953
+ }
954
+
955
+ @media (min-width: 480px) {
956
+ .paykka-card-checkout-card__store-checkbox {
957
+ margin-top: 20px;
958
+ }
777
959
  }::-webkit-scrollbar {
778
960
  height: 6px;
779
961
  width: 6px;
@@ -819,6 +1001,102 @@
819
1001
  display: none !important;
820
1002
  }
821
1003
 
1004
+ .paykka-card-checkout-payment-tabs {
1005
+ display: flex;
1006
+ flex-wrap: nowrap;
1007
+ justify-content: start;
1008
+ column-gap: 6px;
1009
+ }
1010
+
1011
+ .paykka-card-checkout-payment-tabs__tab {
1012
+ border: 2px solid #E1E1E5;
1013
+ padding: 12px;
1014
+ border-radius: 12px;
1015
+ width: calc((100% - 12px) / 3);
1016
+ }
1017
+
1018
+ @media (min-width: 480px) {
1019
+ .paykka-card-checkout-payment-tabs__tab {
1020
+ padding: 16px;
1021
+ }
1022
+ }
1023
+
1024
+ .paykka-card-checkout-payment-tabs__name {
1025
+ color: #626266;
1026
+ }::-webkit-scrollbar {
1027
+ height: 6px;
1028
+ width: 6px;
1029
+ }
1030
+
1031
+ ::-webkit-scrollbar-thumb {
1032
+ background-color: rgba(0, 0, 0, 0.25);
1033
+ border-radius: 4px;
1034
+ }
1035
+
1036
+ ::-webkit-scrollbar-button {
1037
+ display: none !important;
1038
+ }
1039
+
1040
+ ::-moz-scrollbar-button {
1041
+ display: none !important;
1042
+ }
1043
+
1044
+ .paykka-card-checkout-drop-in__header-payment {
1045
+ margin-bottom: 10px;
1046
+ }
1047
+
1048
+ .paykka-card-checkout-drop-in__other {
1049
+ display: flex;
1050
+ justify-content: center;
1051
+ align-items: center;
1052
+ margin-top: 14px;
1053
+ }
1054
+
1055
+ @media (min-width: 480px) {
1056
+ .paykka-card-checkout-drop-in__other {
1057
+ margin-top: 30px;
1058
+ }
1059
+ }
1060
+
1061
+ .paykka-card-checkout-drop-in__other-text {
1062
+ margin: 0 14px;
1063
+ color: #6E6E7E;
1064
+ }
1065
+
1066
+ .paykka-card-checkout-drop-in__other-line {
1067
+ background-color: #DFDFE5;
1068
+ flex-grow: 0.5;
1069
+ height: 1px;
1070
+ }
1071
+
1072
+ .paykka-card-checkout-drop-in__tabs-wrapper {
1073
+ margin-top: 16px;
1074
+ margin-bottom: 16px;
1075
+ }
1076
+
1077
+ @media (min-width: 480px) {
1078
+ .paykka-card-checkout-drop-in__tabs-wrapper {
1079
+ margin-top: 24px;
1080
+ margin-bottom: 24px;
1081
+ }
1082
+ }::-webkit-scrollbar {
1083
+ height: 6px;
1084
+ width: 6px;
1085
+ }
1086
+
1087
+ ::-webkit-scrollbar-thumb {
1088
+ background-color: rgba(0, 0, 0, 0.25);
1089
+ border-radius: 4px;
1090
+ }
1091
+
1092
+ ::-webkit-scrollbar-button {
1093
+ display: none !important;
1094
+ }
1095
+
1096
+ ::-moz-scrollbar-button {
1097
+ display: none !important;
1098
+ }
1099
+
822
1100
  .paykka-card-checkout-sepa {
823
1101
  min-width: 280px;
824
1102
  }
@@ -0,0 +1,28 @@
1
+ var MessageAction = /* @__PURE__ */ ((MessageAction2) => {
2
+ MessageAction2["INIT"] = "init";
3
+ MessageAction2["ACTIVATED"] = "Activated";
4
+ MessageAction2["HIDDEN_IFRAME_READY"] = "hiddenIframeReady";
5
+ MessageAction2["FOCUS"] = "focus";
6
+ MessageAction2["BIN_VALUE"] = "binValue";
7
+ MessageAction2["BRAND"] = "brand";
8
+ MessageAction2["VALID_WITH_VALUE"] = "validWithValue";
9
+ MessageAction2["PAYMENT"] = "payment";
10
+ MessageAction2["AFTER_PAYMENT"] = "afterPayment";
11
+ MessageAction2["PAYMENT_ERROR"] = "paymentError";
12
+ MessageAction2["PAYMENT_TIMEOUT"] = "paymentTimeout";
13
+ MessageAction2["VALID_STATUS_CHANGED"] = "validStatusChanged";
14
+ MessageAction2["VALIDATE"] = "validate";
15
+ MessageAction2["VALIDATED"] = "validated";
16
+ MessageAction2["SET_CONFIG"] = "setConfig";
17
+ MessageAction2["AUTHORIZED"] = "authorized";
18
+ MessageAction2["ENCRYPT_CARD"] = "encryptCard";
19
+ MessageAction2["CARD_ENCRYPTED"] = "cardEncrypted";
20
+ MessageAction2["CARD_ENCRYPTION_FAILED"] = "cardEncryptionFailed";
21
+ MessageAction2["CHECK_THREE_DS"] = "checkThreeDS";
22
+ MessageAction2["THREE_DS_STATUS_INIT"] = "threeDSStatusInit";
23
+ MessageAction2["THREE_DS_STATUS_CONFIG"] = "threeDSStatusConfig";
24
+ return MessageAction2;
25
+ })(MessageAction || {});
26
+ export {
27
+ MessageAction
28
+ };
@@ -1,12 +1,12 @@
1
1
  import { IconAmex } from "../../components/internal/icons/IconAmex.js";
2
2
  import "../../core.js";
3
3
  import "../system-info/get-browser-info.js";
4
+ import { CardBrandCode } from "../../types/index.js";
4
5
  import { IconDinnersClub } from "../../components/internal/icons/IconDinnersClub.js";
5
6
  import { IconDiscover } from "../../components/internal/icons/IconDiscover.js";
6
7
  import { IconJcb } from "../../components/internal/icons/IconJcb.js";
7
8
  import { IconMasterCard } from "../../components/internal/icons/IconMasterCard.js";
8
9
  import { IconVisa } from "../../components/internal/icons/IconVisa.js";
9
- import { CardBrandCode } from "../../types/index.js";
10
10
  const cardBrandCodes = Object.values(CardBrandCode);
11
11
  const cardBrands = [
12
12
  {
@@ -52,13 +52,15 @@ const cardBrands = [
52
52
  order: 5
53
53
  }
54
54
  ];
55
- const cardBrandIconMap = {
56
- [CardBrandCode.VISA]: IconVisa,
57
- [CardBrandCode.MASTER_CARD]: IconMasterCard,
58
- [CardBrandCode.JCB]: IconJcb,
59
- [CardBrandCode.AMEX]: IconAmex,
60
- [CardBrandCode.DISCOVER]: IconDiscover,
61
- [CardBrandCode.DINERS_CLUB]: IconDinnersClub
55
+ const getCardBrandIconMap = (code) => {
56
+ return {
57
+ [CardBrandCode.VISA]: IconVisa,
58
+ [CardBrandCode.MASTER_CARD]: IconMasterCard,
59
+ [CardBrandCode.JCB]: IconJcb,
60
+ [CardBrandCode.AMEX]: IconAmex,
61
+ [CardBrandCode.DISCOVER]: IconDiscover,
62
+ [CardBrandCode.DINERS_CLUB]: IconDinnersClub
63
+ }[code];
62
64
  };
63
65
  [
64
66
  ...cardBrands.reduce((acc, cur) => {
@@ -68,6 +70,6 @@ const cardBrandIconMap = {
68
70
  ];
69
71
  export {
70
72
  cardBrandCodes,
71
- cardBrandIconMap,
72
- cardBrands
73
+ cardBrands,
74
+ getCardBrandIconMap
73
75
  };
@@ -1,4 +1,4 @@
1
- import { cardBrands, cardBrandIconMap } from "./brands.js";
1
+ import { cardBrands, getCardBrandIconMap } from "./brands.js";
2
2
  function getSupportedCardBrands(supportedCardBrands) {
3
3
  return supportedCardBrands ? cardBrands.filter((brand) => supportedCardBrands.includes(brand.code)).sort((a, b) => a.order - b.order) : [];
4
4
  }
@@ -10,6 +10,7 @@ function findCardBrand(number, brands = cardBrands) {
10
10
  }
11
11
  }
12
12
  function findCardBrandInfo(number, brands = cardBrands) {
13
+ console.log(number, brands);
13
14
  for (const item of brands) {
14
15
  if (item.pattern.test(number)) {
15
16
  return getCardBrandInfo(item);
@@ -19,7 +20,7 @@ function findCardBrandInfo(number, brands = cardBrands) {
19
20
  function getCardBrandInfo(brand) {
20
21
  return {
21
22
  ...brand,
22
- icon: cardBrandIconMap[brand.code]
23
+ icon: getCardBrandIconMap(brand.code)
23
24
  };
24
25
  }
25
26
  function finCardBrandInfoByCode(code) {
@@ -0,0 +1,23 @@
1
+ import { SECURED_IFRAME_CLASS_NAME } from "../components/SecuredFieldsProvider/index.js";
2
+ const createIframe = (src) => {
3
+ const iframeEl = document.createElement("iframe");
4
+ iframeEl.setAttribute("src", src);
5
+ iframeEl.classList.add(SECURED_IFRAME_CLASS_NAME);
6
+ iframeEl.setAttribute("allowtransparency", "true");
7
+ iframeEl.setAttribute("referrerpolicy", "origin");
8
+ Object.defineProperty(iframeEl, "src", { configurable: false, writable: false });
9
+ const noIframeElContent = document.createTextNode("<p>Your browser does not support iframes.</p>");
10
+ iframeEl.appendChild(noIframeElContent);
11
+ return iframeEl;
12
+ };
13
+ const postMessageToIframe = (data, iframe, targetOrigin = "*") => {
14
+ if (!iframe) {
15
+ return;
16
+ }
17
+ const dataStr = JSON.stringify(data);
18
+ iframe == null ? void 0 : iframe.postMessage(dataStr, { targetOrigin });
19
+ };
20
+ export {
21
+ createIframe,
22
+ postMessageToIframe
23
+ };
@@ -17,7 +17,6 @@ const safeParse = (dataStr, defaultValue = {}) => {
17
17
  try {
18
18
  return JSON.parse(dataStr);
19
19
  } catch (error) {
20
- console.log(error);
21
20
  return defaultValue;
22
21
  }
23
22
  };
@@ -1,3 +1,4 @@
1
+ import { inputStyleAttrs } from "../types/index.js";
1
2
  const style2String = (style = {}) => {
2
3
  return Object.entries(style).map(([key, value]) => {
3
4
  const kebabKey = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -29,9 +30,55 @@ const createPlaceholderStyle = (selector, style = {}) => {
29
30
  `;
30
31
  return placeholderStyle;
31
32
  };
33
+ const separateInputStyle = (styles) => {
34
+ const { input } = styles;
35
+ let inputWrapper = {};
36
+ let inputStyle = {};
37
+ if (input) {
38
+ inputWrapper = JSON.parse(JSON.stringify(input));
39
+ Reflect.deleteProperty(inputWrapper, "placeholder");
40
+ Reflect.deleteProperty(inputWrapper, "hover");
41
+ inputStyle = {
42
+ placeholder: input == null ? void 0 : input.placeholder,
43
+ hover: input == null ? void 0 : input.hover
44
+ };
45
+ const statusList = Object.keys(inputWrapper);
46
+ statusList.forEach((key) => {
47
+ if (key === "placeholder" || key === "hover") {
48
+ return;
49
+ }
50
+ const style = inputWrapper[key];
51
+ if (!style) {
52
+ return;
53
+ }
54
+ inputStyleAttrs.forEach((attr) => {
55
+ if (!inputStyle[key]) {
56
+ inputStyle[key] = {};
57
+ }
58
+ if (style[attr]) {
59
+ inputStyle[key][attr] = style[attr];
60
+ Reflect.deleteProperty(style, attr);
61
+ }
62
+ });
63
+ });
64
+ }
65
+ return {
66
+ ...styles,
67
+ inputWrapper,
68
+ input: inputStyle
69
+ };
70
+ };
71
+ const genComponentStyle = (list = []) => {
72
+ const style = list.map(({ selector, style: style2 }) => {
73
+ return `${selector} { ${style2String(style2)} }`;
74
+ });
75
+ return style.join("\n");
76
+ };
32
77
  export {
33
78
  createPlaceholderStyle,
79
+ genComponentStyle,
34
80
  generateClassNameMap,
35
81
  loadStyle,
82
+ separateInputStyle,
36
83
  style2String
37
84
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .paykka-card-checkout,.paykka-card-checkout *{box-sizing:border-box}@media (min-width: 480px){.paykka-card-checkout-ali-pay__email{padding-bottom:20px}}.paykka-card-checkout-ali-pay__error{margin-top:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-ali-pay__error{margin-top:20px}}.paykka-card-checkout-ali-pay__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-ali-pay__button{margin-top:20px}}.paykka-card-checkout-address-field__first-item .paykka-card-checkout-input__input-wrapper{padding:8px 0;border-bottom-right-radius:0;border-bottom-left-radius:0}.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper{padding:8px 0;border-radius:0;border-top:0}.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper:active,.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper--focus,.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper:focus{border-top:1px solid var(--paykka-card-checkout-input-color, #4F43DF);box-shadow:0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF)}.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper{padding:8px 0;border-top-right-radius:0;border-top-left-radius:0;border-top:0}.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper:active,.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper--focus,.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper:focus{border-top:1px solid var(--paykka-card-checkout-input-color, #4F43DF);box-shadow:0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF)}.paykka-card-checkout-form-item{font-size:16px}.paykka-card-checkout-form-item__label{margin-bottom:8px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}@media (min-width: 480px){.paykka-card-checkout-form-item__label{margin-bottom:10px}}.paykka-card-checkout-form-item__error-text{margin-top:4px;color:#f53f3f;font-size:14px}.paykka-card-checkout-input{position:relative;box-sizing:border-box;font-size:16px}.paykka-card-checkout-input__input-wrapper{display:flex;align-items:center;height:44px;width:100%;border-radius:8px;border:1px solid #E1E1E5;transition:border .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);caret-color:var(--paykka-card-checkout-input-color, #4F43DF) .paykka-card-checkout-input__input-wrapper --success;caret-color-border-bottom:1px solid #00B42A}.paykka-card-checkout-input__input-wrapper--error{border:1px solid #F53F3F}.paykka-card-checkout-input__input-wrapper:active,.paykka-card-checkout-input__input-wrapper--focus,.paykka-card-checkout-input__input-wrapper:focus{border:1px solid var(--paykka-card-checkout-input-color, #4F43DF);box-shadow:0 0 0 2px var(--paykka-card-checkout-input-color, #4F43DF)}.paykka-card-checkout-input__input-wrapper-disabled{cursor:not-allowed;background:#f5f5f7}.paykka-card-checkout-input__input-wrapper-disabled:active,.paykka-card-checkout-input__input-wrapper-disabled--focus,.paykka-card-checkout-input__input-wrapper-disabled:focus{border:1px solid #F5F5F7;box-shadow:0 0 0 2px #f5f5f7}.paykka-card-checkout-input__input{outline:none;border:none;height:100%;width:100%;border-radius:12px;caret-color:var(--paykka-card-checkout-input-color, #4F43DF);font-size:16px;padding-left:12px}.paykka-card-checkout-input__input::placeholder{color:#c2c2c2}.paykka-card-checkout-input__right-icon{padding-right:12px;display:flex;align-items:center;flex-shrink:0;margin-left:12px}.paykka-card-checkout-input__left-icon{padding-left:12px;display:flex;align-items:center;flex-shrink:0;margin-right:12px}.paykka-card-checkout-select__wrapper{width:100%;position:relative;cursor:pointer}.paykka-card-checkout-select__render-label{position:absolute;top:0;line-height:44px;height:44px;padding:0 16px;display:flex}.paykka-card-checkout-select__render-label--placeholder{color:#c2c2c2}.paykka-card-checkout-select__render-label--hidden{visibility:hidden}.paykka-card-checkout-select__menu{margin-top:4px;width:100%;max-height:260px;background:#fff;box-shadow:0 4px 14px #0000001a;border-radius:4px;border:1px solid #EBEBEF;overflow-y:auto;z-index:999;position:absolute}.paykka-card-checkout-select__menu-item{padding:6px 12px;line-height:32px;color:#626266;cursor:pointer;display:flex;justify-content:space-between}.paykka-card-checkout-select__menu-item:hover,.paykka-card-checkout-select__menu-item:active,.paykka-card-checkout-select__menu-item--selected,.paykka-card-checkout-select__menu-item:focus{color:#1f1f1f;background:#f3f3f5}.paykka-card-checkout-select__menu-item-icon{margin-left:10px;display:flex;align-items:center}.paykka-card-checkout-select__menu-no-data{height:200px;display:flex;justify-content:center;align-items:center;color:#c2c2c2}.paykka-card-checkout-info{display:flex;align-items:center;padding:10px 14px;border-radius:4px}.paykka-card-checkout-info--error{background-color:#ffece8}.paykka-card-checkout-info__icon{margin-right:8px;height:1.3em;display:flex;align-items:center}.paykka-card-checkout-info__content{text-align:justify;word-break:break-all}.paykka-card-checkout-recurring-tip{display:flex;color:#a9a9a9}.paykka-card-checkout-recurring-tip__icon{width:20px;display:flex;padding-top:4px;padding-right:4px}.paykka-card-checkout-submit-button--success{opacity:1!important;background-color:#00b42a!important}.paykka-card-checkout-submit-button__text{line-height:1}.paykka-card-checkout-submit-button__text--not-verified{color:#fff9}.paykka-card-checkout-button{display:flex;align-items:center;justify-content:center;width:100%;height:44px;padding:0 14px;border-radius:8px;border:0;background-color:var(--paykka-card-checkout-button-bg-color, #4F43DF);color:var(--paykka-card-checkout-button-text-color, #fff);font-size:16px;cursor:pointer;text-decoration:none;transition:background-color .3s cubic-bezier(.4,0,.2,1)}.paykka-card-checkout-button:not(.paykka-card-checkout-button--loading).paykka-card-checkout-button:not(.paykka-card-checkout-button--disabled).paykka-card-checkout-button:not(.paykka-card-checkout-button--dashed):hover{background-color:var(--paykka-card-checkout-button-bg-color-hover, #3f33bb)}.paykka-card-checkout-button:not(.paykka-card-checkout-button--loading).paykka-card-checkout-button:not(.paykka-card-checkout-button--disabled).paykka-card-checkout-button:not(.paykka-card-checkout-button--dashed):active{background-color:var(--paykka-card-checkout-button-bg-color-active, #312498)}.paykka-card-checkout-button--loading{cursor:wait}.paykka-card-checkout-button--disabled{cursor:not-allowed;opacity:.5}.paykka-card-checkout-button--dashed{border:1px dashed #DFDFE5;color:#1f1f1f;background-color:transparent}.paykka-card-checkout-button__icon{display:flex;align-items:center;margin-right:12px}.paykka-card-checkout-loading-check{display:inline-flex;align-items:center;overflow:hidden;--circle-transition-time: .3s;--check-dashoffset: 50}.paykka-card-checkout-loading-check__circle{transition:stroke-dasharray var(--circle-transition-time) linear}.paykka-card-checkout-loading-check__circle--loading{animation:spin 1s infinite linear;transform-origin:center}.paykka-card-checkout-loading-check__check{stroke-dasharray:var(--check-dashoffset);stroke-dashoffset:var(--check-dashoffset);animation:tick .5s ease-out;animation-fill-mode:forwards;animation-delay:var(--circle-transition-time)}@keyframes tick{0%{stroke-dashoffset:var(--check-dashoffset)}to{stroke-dashoffset:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.paykka-card-checkout-card{min-width:280px}.paykka-card-checkout-card__field{margin-bottom:24px}.paykka-card-checkout-card__center{display:flex;justify-content:space-between}.paykka-card-checkout-card__center>div{width:calc((100% - 20px)/2);transition:width .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-card__center>div{width:calc((100% - 32px)/2)}}.paykka-card-checkout-card__holder-name{padding-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-card__holder-name{padding-bottom:20px}}.paykka-card-checkout-card__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-card__button{margin-top:20px}}.paykka-card-checkout-card__card-brands{margin-top:8px}.paykka-card-checkout-card__card-number-wrapper{position:relative}.paykka-card-checkout-card__change-box{display:flex;align-items:center;color:#4f43df;font-size:14px;position:absolute;top:0;right:0;cursor:pointer}.paykka-card-checkout-card__card-selector-wrapper{display:flex;justify-content:space-between}.paykka-card-checkout-card-brands{display:flex;flex-wrap:wrap;gap:6px}.paykka-card-checkout-card-brands__more{line-height:32px;font-size:13px;color:#687282}.paykka-card-checkout-card-selector__action{padding:8px 12px}.paykka-card-checkout-card-selector__label{display:flex;align-items:center}.paykka-card-checkout-card-selector__card-no{margin-left:12px}.paykka-card-checkout-card-selector__change{display:flex;align-items:center;color:#4f43df;font-size:14px}.paykka-card-checkout-card-no__wrapper{display:flex;align-items:center}.paykka-card-checkout-card-no__dot{width:4px;height:4px;background:currentColor;margin-right:4px;border-radius:50%}.paykka-card-checkout-card-no__card-no{margin-left:4px}.paykka-card-checkout-check-box{display:inline-flex;align-items:center;font-size:14px;background-color:transparent;cursor:pointer}.paykka-card-checkout-check-box:hover .paykka-card-checkout-check-box__inner{border-color:#4f43df}.paykka-card-checkout-check-box--checked .paykka-card-checkout-check-box__inner{border-color:#4f43df;background-color:#4f43df}.paykka-card-checkout-check-box__inner{width:14px;height:14px;border:1px solid #E1E1E5;border-radius:2px;margin-right:8px;transition:border-color .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}@media (min-width: 480px){.paykka-card-checkout-wechat-pay__email{padding-bottom:20px}}.paykka-card-checkout-wechat-pay__error{margin-top:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-wechat-pay__error{margin-top:20px}}.paykka-card-checkout-wechat-pay__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-wechat-pay__button{margin-top:20px}}.paykka-card-checkout-apple-pay__error{margin-bottom:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-apple-pay__error{margin-bottom:20px}}.paykka-card-checkout-apple-pay__button{width:100%;display:flex;align-items:center;justify-content:center;height:44px;--apple-pay-button-width: 100%;--apple-pay-button-height: 44px;--apple-pay-button-border-radius: 8px;--apple-pay-button-padding: 0px 0px;--apple-pay-button-box-sizing: border-box}.paykka-card-checkout-google-pay__error{margin-bottom:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-google-pay__error{margin-bottom:20px}}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:4px}::-webkit-scrollbar-button{display:none!important}::-moz-scrollbar-button{display:none!important}.paykka-card-checkout-sepa{min-width:280px}.paykka-card-checkout-sepa__field{margin-bottom:24px}.paykka-card-checkout-sepa__holder-name{padding-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-sepa__holder-name{padding-bottom:20px}}.paykka-card-checkout-sepa__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-sepa__button{margin-top:20px}}
1
+ .paykka-card-checkout,.paykka-card-checkout *{box-sizing:border-box}@media (min-width: 480px){.paykka-card-checkout-ali-pay__email{padding-bottom:20px}}.paykka-card-checkout-ali-pay__error{margin-top:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-ali-pay__error{margin-top:20px}}.paykka-card-checkout-ali-pay__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-ali-pay__button{margin-top:20px}}.paykka-card-checkout-address-field__first-item .paykka-card-checkout-input__input-wrapper{padding:8px 0;border-bottom-right-radius:0;border-bottom-left-radius:0}.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper{padding:8px 0;border-radius:0;border-top:0}.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper:active,.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper--focus,.paykka-card-checkout-address-field__mid-item .paykka-card-checkout-input__input-wrapper:focus{border-top:1px solid var(--paykka-card-checkout-input-color, #4F43DF);box-shadow:0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF)}.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper{padding:8px 0;border-top-right-radius:0;border-top-left-radius:0;border-top:0}.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper:active,.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper--focus,.paykka-card-checkout-address-field__last-item .paykka-card-checkout-input__input-wrapper:focus{border-top:1px solid var(--paykka-card-checkout-input-color, #4F43DF);box-shadow:0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF)}.paykka-card-checkout-form-item{font-size:16px}.paykka-card-checkout-form-item__label{margin-bottom:8px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}@media (min-width: 480px){.paykka-card-checkout-form-item__label{margin-bottom:10px}}.paykka-card-checkout-form-item__error-text{margin-top:4px;color:#f53f3f;font-size:14px}.paykka-card-checkout-input{position:relative;box-sizing:border-box;font-size:16px}.paykka-card-checkout-input__input-wrapper{display:flex;align-items:center;height:44px;width:100%;border-radius:8px;border:1px solid #E1E1E5;transition:border .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);caret-color:var(--paykka-card-checkout-input-color, #4F43DF) .paykka-card-checkout-input__input-wrapper --error;caret-color-border:1px solid #F53F3F}.paykka-card-checkout-input__input-wrapper:active,.paykka-card-checkout-input__input-wrapper--focus,.paykka-card-checkout-input__input-wrapper:focus{border:1px solid var(--paykka-card-checkout-input-color, #4F43DF);box-shadow:0 0 0 1px var(--paykka-card-checkout-input-color, #4F43DF)}.paykka-card-checkout-input__input-wrapper-disabled{cursor:not-allowed;background:#f5f5f7}.paykka-card-checkout-input__input-wrapper-disabled:active,.paykka-card-checkout-input__input-wrapper-disabled--focus,.paykka-card-checkout-input__input-wrapper-disabled:focus{border:1px solid #F5F5F7;box-shadow:0 0 0 2px #f5f5f7}.paykka-card-checkout-input__input{outline:none;border:none;height:100%;width:100%;border-radius:8px;caret-color:var(--paykka-card-checkout-input-color, #4F43DF);font-size:16px;padding-left:12px;background-color:transparent}.paykka-card-checkout-input__input::placeholder{color:#c2c2c2}.paykka-card-checkout-input__input:-webkit-autofill,.paykka-card-checkout-input__input:-internal-autofill-selected{background-color:transparent!important}.paykka-card-checkout-input__right-icon{padding-right:12px;display:flex;align-items:center;flex-shrink:0;margin-left:12px}.paykka-card-checkout-input__left-icon{padding-left:12px;display:flex;align-items:center;flex-shrink:0;margin-right:12px}.paykka-card-checkout-select__wrapper{width:100%;position:relative;cursor:pointer}.paykka-card-checkout-select__render-label{position:absolute;top:0;line-height:44px;height:44px;padding:0 16px;display:flex}.paykka-card-checkout-select__render-label--placeholder{color:#c2c2c2}.paykka-card-checkout-select__render-label--hidden{visibility:hidden}.paykka-card-checkout-select__menu{margin-top:4px;width:100%;max-height:260px;background:#fff;box-shadow:0 4px 14px #0000001a;border-radius:4px;border:1px solid #EBEBEF;overflow-y:auto;z-index:999;position:absolute}.paykka-card-checkout-select__menu-item{padding:6px 12px;line-height:32px;color:#626266;cursor:pointer;display:flex;justify-content:space-between}.paykka-card-checkout-select__menu-item:hover,.paykka-card-checkout-select__menu-item:active,.paykka-card-checkout-select__menu-item--selected,.paykka-card-checkout-select__menu-item:focus{color:#1f1f1f;background:#f3f3f5}.paykka-card-checkout-select__menu-item-icon{margin-left:10px;display:flex;align-items:center}.paykka-card-checkout-select__menu-no-data{height:200px;display:flex;justify-content:center;align-items:center;color:#c2c2c2}.paykka-card-checkout-info{display:flex;align-items:center;padding:10px 14px;border-radius:4px}.paykka-card-checkout-info--error{background-color:#ffece8}.paykka-card-checkout-info__icon{margin-right:8px;height:1.3em;display:flex;align-items:center}.paykka-card-checkout-info__content{text-align:justify;word-break:break-all}.paykka-card-checkout-recurring-tip{display:flex;color:#a9a9a9}.paykka-card-checkout-recurring-tip__icon{width:20px;display:flex;padding-top:4px;padding-right:4px}.paykka-card-checkout-submit-button--success{opacity:1!important;background-color:#00b42a!important}.paykka-card-checkout-submit-button__text{line-height:1}.paykka-card-checkout-submit-button__text--not-verified{color:#fff9}.paykka-card-checkout-button{display:flex;align-items:center;justify-content:center;width:100%;height:44px;padding:0 14px;border-radius:8px;border:0;background-color:var(--paykka-card-checkout-button-bg-color, #4F43DF);color:var(--paykka-card-checkout-button-text-color, #fff);font-size:16px;cursor:pointer;text-decoration:none;transition:background-color .3s cubic-bezier(.4,0,.2,1)}.paykka-card-checkout-button:not(.paykka-card-checkout-button--loading).paykka-card-checkout-button:not(.paykka-card-checkout-button--disabled).paykka-card-checkout-button:not(.paykka-card-checkout-button--dashed):hover{background-color:var(--paykka-card-checkout-button-bg-color-hover, #3f33bb)}.paykka-card-checkout-button:not(.paykka-card-checkout-button--loading).paykka-card-checkout-button:not(.paykka-card-checkout-button--disabled).paykka-card-checkout-button:not(.paykka-card-checkout-button--dashed):active{background-color:var(--paykka-card-checkout-button-bg-color-active, #312498)}.paykka-card-checkout-button--loading{cursor:wait}.paykka-card-checkout-button--disabled{cursor:not-allowed;opacity:.5}.paykka-card-checkout-button--dashed{border:1px dashed #DFDFE5;color:#1f1f1f;background-color:transparent}.paykka-card-checkout-button__icon{display:flex;align-items:center;margin-right:12px}.paykka-card-checkout-loading-check{display:inline-flex;align-items:center;overflow:hidden;--circle-transition-time: .3s;--check-dashoffset: 50}.paykka-card-checkout-loading-check__circle{transition:stroke-dasharray var(--circle-transition-time) linear}.paykka-card-checkout-loading-check__circle--loading{animation:spin 1s infinite linear;transform-origin:center}.paykka-card-checkout-loading-check__check{stroke-dasharray:var(--check-dashoffset);stroke-dashoffset:var(--check-dashoffset);animation:tick .5s ease-out;animation-fill-mode:forwards;animation-delay:var(--circle-transition-time)}@keyframes tick{0%{stroke-dashoffset:var(--check-dashoffset)}to{stroke-dashoffset:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.paykka-card-checkout-card{min-width:280px}.paykka-card-checkout-card__field{margin-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-card__field{margin-bottom:20px}}.paykka-card-checkout-card__center{display:flex;justify-content:space-between}.paykka-card-checkout-card__center>div{width:calc((100% - 20px)/2);transition:width .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-card__center>div{width:calc((100% - 32px)/2)}}.paykka-card-checkout-card__card-info{margin-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-card__card-info{margin-bottom:20px}}.paykka-card-checkout-card__holder-name{margin-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-card__holder-name{margin-bottom:20px}}.paykka-card-checkout-card__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-card__button{margin-top:20px}}.paykka-card-checkout-card__card-brands{margin-top:8px}.paykka-card-checkout-card__card-number-wrapper{position:relative}.paykka-card-checkout-card__change-box{display:flex;align-items:center;color:#4f43df;font-size:14px;position:absolute;top:0;right:0;cursor:pointer}.paykka-card-checkout-card__card-selector-wrapper{display:flex;justify-content:space-between}.paykka-card-checkout-card__address{margin-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-card__address{margin-bottom:20px}}.paykka-card-checkout-card__store-checkbox{margin-top:16px}@media (min-width: 480px){.paykka-card-checkout-card__store-checkbox{margin-top:20px}}.paykka-card-checkout-card-brands{display:flex;flex-wrap:wrap;gap:6px}.paykka-card-checkout-card-brands__more{line-height:32px;font-size:13px;color:#687282}.paykka-card-checkout-card-selector__action{padding:8px 12px}.paykka-card-checkout-card-selector__label{display:flex;align-items:center}.paykka-card-checkout-card-selector__card-no{margin-left:12px}.paykka-card-checkout-card-selector__change{display:flex;align-items:center;color:#4f43df;font-size:14px}.paykka-card-checkout-card-no__wrapper{display:flex;align-items:center}.paykka-card-checkout-card-no__dot{width:4px;height:4px;background:currentColor;margin-right:4px;border-radius:50%}.paykka-card-checkout-card-no__card-no{margin-left:4px}.paykka-card-checkout-check-box{display:inline-flex;align-items:center;font-size:14px;background-color:transparent;cursor:pointer}.paykka-card-checkout-check-box:hover .paykka-card-checkout-check-box__inner{border-color:#4f43df}.paykka-card-checkout-check-box--checked .paykka-card-checkout-check-box__inner{border-color:#4f43df;background-color:#4f43df}.paykka-card-checkout-check-box__inner{width:14px;height:14px;border:1px solid #E1E1E5;border-radius:2px;margin-right:8px;transition:border-color .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.paykka-card-checkout-modal{position:fixed;left:0;right:0;top:0;bottom:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}.paykka-card-checkout-modal__mask{position:fixed;left:0;right:0;top:0;bottom:0;background-color:#0006}.paykka-card-checkout-modal__content{position:relative;z-index:9999;border-radius:8px;background-color:#fff;box-shadow:0 8px 16px -8px #00000014,0 12px 32px #0000000f,0 16px 48px 16px #0000000a;display:flex;flex-direction:column}.paykka-card-checkout-modal__close{cursor:pointer;right:0;position:absolute;transform:translateY(-150%);color:#d2d2d2}.paykka-card-checkout-modal__close:hover{color:#fff}.paykka-card-checkout-modal__body{flex:1;padding:36px 28px 24px}.paykka-card-checkout-three-ds-auth__content{height:100%}.paykka-card-checkout-three-ds-auth__last-three-ds{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.paykka-card-checkout-three-ds-auth__last-three-ds-title{margin-top:20px;margin-bottom:40px;color:#1f1f1f;font-size:20px;font-weight:700;text-align:center}.paykka-card-checkout-combined-card-info{width:100%;height:100%;display:flex}.paykka-card-checkout-combined-card-info__card-number{flex:1}.paykka-card-checkout-combined-card-info__expire-date{width:100px}.paykka-card-checkout-combined-card-info__cvv{width:60px}.paykka-card-checkout-combined-card-info__blank-icon{width:16px;height:16px}@media (min-width: 480px){.paykka-card-checkout-wechat-pay__email{padding-bottom:20px}}.paykka-card-checkout-wechat-pay__error{margin-top:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-wechat-pay__error{margin-top:20px}}.paykka-card-checkout-wechat-pay__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-wechat-pay__button{margin-top:20px}}.paykka-card-checkout-apple-pay__error{margin-bottom:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-apple-pay__error{margin-bottom:20px}}.paykka-card-checkout-apple-pay__button{width:100%;display:flex;align-items:center;justify-content:center;height:44px;--apple-pay-button-width: 100%;--apple-pay-button-height: 44px;--apple-pay-button-border-radius: 8px;--apple-pay-button-padding: 0px 0px;--apple-pay-button-box-sizing: border-box}.paykka-card-checkout-google-pay__error{margin-bottom:16px;transition:margin-bottom .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-google-pay__error{margin-bottom:20px}}.paykka-card-checkout-sepa{min-width:280px}.paykka-card-checkout-sepa__field{margin-bottom:24px}.paykka-card-checkout-sepa__holder-name{padding-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-sepa__holder-name{padding-bottom:20px}}.paykka-card-checkout-sepa__button{margin-top:16px;transition:margin-top .1s cubic-bezier(.4,0,.2,1)}@media (min-width: 480px){.paykka-card-checkout-sepa__button{margin-top:20px}}.paykka-card-checkout-payment-tabs{display:flex;flex-wrap:nowrap;justify-content:start;column-gap:6px}.paykka-card-checkout-payment-tabs__tab{border:2px solid #E1E1E5;padding:12px;border-radius:12px;width:calc((100% - 12px) / 3)}@media (min-width: 480px){.paykka-card-checkout-payment-tabs__tab{padding:16px}}.paykka-card-checkout-payment-tabs__name{color:#626266}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:4px}::-webkit-scrollbar-button{display:none!important}::-moz-scrollbar-button{display:none!important}.paykka-card-checkout-drop-in__header-payment{margin-bottom:10px}.paykka-card-checkout-drop-in__other{display:flex;justify-content:center;align-items:center;margin-top:14px}@media (min-width: 480px){.paykka-card-checkout-drop-in__other{margin-top:30px}}.paykka-card-checkout-drop-in__other-text{margin:0 14px;color:#6e6e7e}.paykka-card-checkout-drop-in__other-line{background-color:#dfdfe5;flex-grow:.5;height:1px}.paykka-card-checkout-drop-in__tabs-wrapper{margin-top:16px;margin-bottom:16px}@media (min-width: 480px){.paykka-card-checkout-drop-in__tabs-wrapper{margin-top:24px;margin-bottom:24px}}
@@ -1,3 +1,4 @@
1
- import type { CheckoutRes } from './type';
1
+ import type { AmountBreakdown, CheckoutRes } from './type';
2
2
  export declare function formatPaymentMethodInfo(paymentMethods?: Recordable[]): Pick<CheckoutRes, 'paymentMethod' | 'channelParams'>;
3
+ export declare function formatAmountBreakdown(info?: Recordable): AmountBreakdown;
3
4
  export declare function checkoutMap(res?: Recordable): CheckoutRes;
@@ -1,3 +1,4 @@
1
+ import type { PaymentMethod, SessionMode } from '../../../constant';
1
2
  import type { Amount } from '../type';
2
3
  export interface CheckoutTheme {
3
4
  merchantName: string;
@@ -41,12 +42,12 @@ export interface ChannelParams {
41
42
  }
42
43
  export interface CheckoutRes {
43
44
  merchantId: string;
44
- paymentMethod: string[];
45
+ paymentMethod: PaymentMethod[];
45
46
  sessionId: string;
46
47
  status: 'PROCESSING' | 'SUCCESS' | 'EXPIRED';
47
48
  transAmount: Amount;
48
49
  expireTime: string;
49
- sessionMode: 'HOST' | 'EMBEDDED';
50
+ sessionMode: `${SessionMode}`;
50
51
  merchantName: string;
51
52
  returnUrl: string;
52
53
  locale?: string;
@@ -57,6 +58,27 @@ export interface CheckoutRes {
57
58
  channelParams?: ChannelParams;
58
59
  tokens?: CardTokenInfo[];
59
60
  storePaymentMethod?: boolean;
61
+ field: FieldStatusConfig;
62
+ country?: string;
63
+ cancelUrl?: string;
64
+ amountBreakdown?: AmountBreakdown;
65
+ }
66
+ export interface AmountBreakdown {
67
+ goodsTax?: Amount;
68
+ shippingAmount?: Amount;
69
+ shippingTax?: Amount;
70
+ discount?: Amount;
71
+ other?: Amount;
72
+ }
73
+ export interface FieldStatusConfig {
74
+ holderName: FieldStatus;
75
+ email: FieldStatus;
76
+ address: FieldStatus;
77
+ }
78
+ export interface FieldStatus {
79
+ show: boolean;
80
+ required: boolean;
81
+ disabled?: boolean;
60
82
  }
61
83
  export interface QueryCheckoutParams {
62
84
  sessionId: string;
@@ -5,7 +5,7 @@ export declare function getBrowserParams(params?: {
5
5
  color_depth: number;
6
6
  language: string;
7
7
  java_enabled: boolean;
8
- device_type: StringUnion<"MOBILE" | "TABLET" | "PC" | "OTHER" | "POS">;
8
+ device_type: StringUnion<"PC" | "OTHER" | "MOBILE" | "TABLET" | "POS">;
9
9
  timezone_offset: string;
10
10
  screen_height: number;
11
11
  screen_width: number;
@@ -1,6 +1,7 @@
1
1
  export interface AddressFieldProps {
2
2
  value: Address;
3
3
  onAddressChange: (value: Address) => void;
4
+ country?: string;
4
5
  }
5
6
  export interface Address {
6
7
  country: string;