@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.
- package/dist/card-checkout-ui.js +19 -19
- package/dist/card-checkout-ui.umd.cjs +19 -19
- package/dist/es/api/index.js +0 -2
- package/dist/es/api/modules/checkout/index.js +1 -15
- package/dist/es/api/modules/checkout/map.js +31 -3
- package/dist/es/api/modules/index.js +0 -2
- package/dist/es/components/AccountNameField/index.js +0 -3
- package/dist/es/components/AddressField/index.js +2 -7
- package/dist/es/components/AliPay/index.js +45 -34
- package/dist/es/components/ApplePay/index.js +19 -13
- package/dist/es/components/Card/index.js +334 -155
- package/dist/es/components/CardBrands/index.js +0 -2
- package/dist/es/components/CardExpireDateField/index.js +1 -4
- package/dist/es/components/CardHolderNameField/index.js +3 -5
- package/dist/es/components/CardIBANField/index.js +0 -3
- package/dist/es/components/CardNo/index.js +0 -2
- package/dist/es/components/CardNumberField/index.js +1 -4
- package/dist/es/components/CardSecurityCodeField/index.js +1 -4
- package/dist/es/components/CardSelector/index.js +0 -3
- package/dist/es/components/CombinedCardInfo/index.js +99 -0
- package/dist/es/components/DropIn/index.js +210 -0
- package/dist/es/components/EmailField/EmailField.js +0 -3
- package/dist/es/components/EncryptedCard/index.js +35 -75
- package/dist/es/components/GooglePay/index.js +69 -28
- package/dist/es/components/RecurringTip/index.js +0 -2
- package/dist/es/components/SecuredFieldsProvider/index.js +230 -1
- package/dist/es/components/SecuredIframe/index.js +3 -1
- package/dist/es/components/Sepa/index.js +26 -30
- package/dist/es/components/SubmitButton/index.js +0 -2
- package/dist/es/components/ThreeDS/index.js +94 -0
- package/dist/es/components/WechatPay/index.js +48 -38
- package/dist/es/components/index.js +2 -3
- package/dist/es/components/internal/Button/Button.js +0 -2
- package/dist/es/components/internal/Button/index.js +0 -2
- package/dist/es/components/internal/CheckBox/CheckBox.js +0 -2
- package/dist/es/components/internal/CheckBox/index.js +0 -2
- package/dist/es/components/internal/Form/type.js +0 -2
- package/dist/es/components/internal/Info/Info.js +0 -2
- package/dist/es/components/internal/Info/index.js +0 -2
- package/dist/es/components/internal/Input/Input.js +2 -2
- package/dist/es/components/internal/Input/type.js +0 -2
- package/dist/es/components/internal/LoadingCheck/LoadingCheck.js +0 -2
- package/dist/es/components/internal/LoadingCheck/index.js +0 -2
- package/dist/es/components/internal/Modal/Modal.js +40 -0
- package/dist/es/components/internal/Modal/modal2.js +1 -0
- package/dist/es/components/internal/Select/Select.js +0 -2
- package/dist/es/components/internal/Select/SelectMenu.js +0 -2
- package/dist/es/components/internal/Select/SelectMenuItem.js +0 -2
- package/dist/es/components/internal/icons/Icon3DSFail.js +3 -0
- package/dist/es/components/internal/icons/Icon3DSInfo.js +62 -0
- package/dist/es/components/internal/icons/Icon3DSSuccess.js +3 -0
- package/dist/es/components/internal/icons/IconCard.js +42 -0
- package/dist/es/config.js +0 -2
- package/dist/es/constant.js +13 -2
- package/dist/es/core/PayKKaCheckout.js +106 -42
- package/dist/es/core/Session.js +7 -6
- package/dist/es/core/environment.js +26 -0
- package/dist/es/core/error.js +21 -0
- package/dist/es/core/index.js +0 -2
- package/dist/es/core/query.js +0 -2
- package/dist/es/core.js +34 -34
- package/dist/es/hooks/index.js +0 -2
- package/dist/es/hooks/useBreakpoints.js +57 -0
- package/dist/es/hooks/useI18n.js +1 -2
- package/dist/es/hooks/usePayState.js +20 -24
- package/dist/es/i18n/index.js +0 -2
- package/dist/es/i18n/locales/de-DE.js +14 -1
- package/dist/es/i18n/locales/en-GB.js +14 -1
- package/dist/es/i18n/locales/es-ES.js +14 -1
- package/dist/es/i18n/locales/fr-FR.js +14 -1
- package/dist/es/i18n/locales/index.js +8 -6
- package/dist/es/i18n/locales/ja-JP.js +14 -1
- package/dist/es/i18n/locales/ko-KR.js +14 -1
- package/dist/es/i18n/locales/pt-PT.js +14 -1
- package/dist/es/i18n/locales/ru-RU.js +14 -1
- package/dist/es/i18n/locales/zh-CN.js +14 -1
- package/dist/es/i18n/locales/zh-HK.js +14 -1
- package/dist/es/i18n/locales/zh-TW.js +14 -1
- package/dist/es/i18n/util.js +22 -8
- package/dist/es/index.js +8 -2
- package/dist/es/style.css +289 -11
- package/dist/es/types/message.js +28 -0
- package/dist/es/utils/card-brand/brands.js +12 -10
- package/dist/es/utils/card-brand/index.js +3 -2
- package/dist/es/utils/iframe.js +23 -0
- package/dist/es/utils/index.js +0 -1
- package/dist/es/utils/style.js +47 -0
- package/dist/style.css +1 -1
- package/dist/types/api/modules/checkout/map.d.ts +2 -1
- package/dist/types/api/modules/checkout/type.d.ts +24 -2
- package/dist/types/api/modules/get-browser-params.d.ts +1 -1
- package/dist/types/components/AddressField/type.d.ts +1 -0
- package/dist/types/components/AliPay/AliPay.d.ts +2 -1
- package/dist/types/components/AliPay/type.d.ts +2 -1
- package/dist/types/components/ApplePay/ApplePay.d.ts +2 -1
- package/dist/types/components/ApplePay/type.d.ts +9 -5
- package/dist/types/components/Card/Card.d.ts +2 -1
- package/dist/types/components/Card/type.d.ts +55 -9
- package/dist/types/components/CardHolderNameField/type.d.ts +1 -1
- package/dist/types/components/CombinedCardInfo/CombinedCardInfo.d.ts +5 -0
- package/dist/types/components/CombinedCardInfo/index.d.ts +2 -0
- package/dist/types/components/{CombinedEncryptedField → CombinedCardInfo}/type.d.ts +3 -2
- package/dist/types/components/DropIn/DropIn.d.ts +6 -0
- package/dist/types/components/DropIn/components/PaymentTabs/PaymentTabs.d.ts +3 -0
- package/dist/types/components/DropIn/components/PaymentTabs/index.d.ts +2 -0
- package/dist/types/components/DropIn/components/PaymentTabs/type.d.ts +11 -0
- package/dist/types/components/DropIn/index.d.ts +2 -0
- package/dist/types/components/DropIn/type.d.ts +49 -0
- package/dist/types/components/GooglePay/GooglePay.d.ts +2 -1
- package/dist/types/components/GooglePay/type.d.ts +20 -8
- package/dist/types/components/SecuredFieldsProvider/index.d.ts +1 -0
- package/dist/types/components/SecuredFieldsProvider/type.d.ts +1 -153
- package/dist/types/components/SecuredFieldsProvider/utils/index.d.ts +1 -1
- package/dist/types/components/SecuredIframe/useSecuredInput.d.ts +2 -1
- package/dist/types/components/Sepa/Sepa.d.ts +2 -1
- package/dist/types/components/Sepa/type.d.ts +2 -1
- package/dist/types/components/ThreeDS/components/ThreeDSAuth/ThreeDSAuth.d.ts +3 -0
- package/dist/types/components/ThreeDS/components/ThreeDSAuth/index.d.ts +2 -0
- package/dist/types/components/ThreeDS/components/ThreeDSAuth/type.d.ts +17 -0
- package/dist/types/components/ThreeDS/components/ThreeDSIframe/ThreeDSIframe.d.ts +2 -0
- package/dist/types/components/ThreeDS/components/ThreeDSIframe/index.d.ts +1 -0
- package/dist/types/components/ThreeDS/components/ThreeDSIframe/output.d.ts +1 -0
- package/dist/types/components/ThreeDS/components/ThreeDSIframe/type.d.ts +5 -0
- package/dist/types/components/ThreeDS/components/ThreeDSStatus/ThreeDSStatus.d.ts +3 -0
- package/dist/types/components/ThreeDS/components/ThreeDSStatus/output.d.ts +1 -0
- package/dist/types/components/ThreeDS/components/ThreeDSStatus/type.d.ts +6 -0
- package/dist/types/components/ThreeDS/index.d.ts +1 -0
- package/dist/types/components/WechatPay/WechatPay.d.ts +2 -1
- package/dist/types/components/WechatPay/type.d.ts +2 -1
- package/dist/types/components/index.d.ts +2 -1
- package/dist/types/components/internal/Input/type.d.ts +1 -0
- package/dist/types/components/internal/Loading/Loading.d.ts +1 -0
- package/dist/types/components/internal/Loading/index.d.ts +1 -0
- package/dist/types/components/internal/Modal/Modal.d.ts +5 -0
- package/dist/types/components/internal/Modal/index.d.ts +2 -0
- package/dist/types/components/internal/Modal/type.d.ts +20 -0
- package/dist/types/components/internal/icons/Icon3DSFail.d.ts +2 -0
- package/dist/types/components/internal/icons/Icon3DSInfo.d.ts +2 -0
- package/dist/types/components/internal/icons/Icon3DSSuccess.d.ts +2 -0
- package/dist/types/components/internal/icons/IconCard.d.ts +2 -0
- package/dist/types/components/internal/icons/index.d.ts +4 -0
- package/dist/types/constant.d.ts +17 -2
- package/dist/types/core/PayKKaCheckout.d.ts +23 -6
- package/dist/types/core/Session.d.ts +1 -1
- package/dist/types/core/context.d.ts +1 -0
- package/dist/types/core/environment.d.ts +4 -0
- package/dist/types/core/error.d.ts +16 -0
- package/dist/types/core/index.d.ts +1 -0
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useBreakpoints.d.ts +15 -0
- package/dist/types/hooks/usePayState.d.ts +3 -6
- package/dist/types/i18n/locales/de-DE.d.ts +10 -0
- package/dist/types/i18n/locales/en-GB.d.ts +10 -0
- package/dist/types/i18n/locales/es-ES.d.ts +10 -0
- package/dist/types/i18n/locales/fr-FR.d.ts +10 -0
- package/dist/types/i18n/locales/index.d.ts +2 -2
- package/dist/types/i18n/locales/ja-JP.d.ts +10 -0
- package/dist/types/i18n/locales/ko-KR.d.ts +10 -0
- package/dist/types/i18n/locales/pt-PT.d.ts +10 -0
- package/dist/types/i18n/locales/ru-RU.d.ts +10 -0
- package/dist/types/i18n/locales/zh-CN.d.ts +10 -0
- package/dist/types/i18n/locales/zh-HK.d.ts +10 -0
- package/dist/types/i18n/locales/zh-TW.d.ts +10 -0
- package/dist/types/i18n/util.d.ts +5 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/types/index.d.ts +59 -8
- package/dist/types/types/message.d.ts +170 -0
- package/dist/types/utils/card-brand/brands.d.ts +1 -8
- package/dist/types/utils/card-brand/index.d.ts +2 -2
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/types/utils/style.d.ts +12 -0
- package/package.json +2 -2
- package/dist/es/components/CombinedEncryptedField/index.js +0 -75
- package/dist/es/components/SecuredFieldsProvider/SecuredFieldsProvider.js +0 -268
- package/dist/types/components/CombinedEncryptedField/CombinedEncryptedField.d.ts +0 -4
- package/dist/types/components/CombinedEncryptedField/index.d.ts +0 -2
- /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 --
|
|
72
|
-
caret-color-border
|
|
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
|
|
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:
|
|
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:
|
|
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
|
-
|
|
897
|
+
margin-bottom: 16px;
|
|
736
898
|
}
|
|
737
899
|
|
|
738
900
|
@media (min-width: 480px) {
|
|
739
901
|
.paykka-card-checkout-card__holder-name {
|
|
740
|
-
|
|
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
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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
|
-
|
|
72
|
-
|
|
73
|
+
cardBrands,
|
|
74
|
+
getCardBrandIconMap
|
|
73
75
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { cardBrands,
|
|
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:
|
|
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
|
+
};
|
package/dist/es/utils/index.js
CHANGED
package/dist/es/utils/style.js
CHANGED
|
@@ -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:
|
|
45
|
+
paymentMethod: PaymentMethod[];
|
|
45
46
|
sessionId: string;
|
|
46
47
|
status: 'PROCESSING' | 'SUCCESS' | 'EXPIRED';
|
|
47
48
|
transAmount: Amount;
|
|
48
49
|
expireTime: string;
|
|
49
|
-
sessionMode:
|
|
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<"
|
|
8
|
+
device_type: StringUnion<"PC" | "OTHER" | "MOBILE" | "TABLET" | "POS">;
|
|
9
9
|
timezone_offset: string;
|
|
10
10
|
screen_height: number;
|
|
11
11
|
screen_width: number;
|