@paykka/card-checkout-ui 0.7.0 → 0.8.0

package/dist/style.css

@@ -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: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__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}}::-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}}
+.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}}

package/dist/types/api/modules/checkout/map.d.ts

@@ -1,3 +1,4 @@
-import type { CheckoutRes } from './type';
+import type { AmountBreakdown, CheckoutRes } from './type';
 export declare function formatPaymentMethodInfo(paymentMethods?: Recordable[]): Pick<CheckoutRes, 'paymentMethod' | 'channelParams'>;
+export declare function formatAmountBreakdown(info?: Recordable): AmountBreakdown;
 export declare function checkoutMap(res?: Recordable): CheckoutRes;

package/dist/types/api/modules/checkout/type.d.ts

@@ -1,4 +1,4 @@
-import type { SessionMode } from '../../../constant';
+import type { PaymentMethod, SessionMode } from '../../../constant';
 import type { Amount } from '../type';
 export interface CheckoutTheme {
     merchantName: string;
@@ -42,7 +42,7 @@ export interface ChannelParams {
 }
 export interface CheckoutRes {
     merchantId: string;
-    paymentMethod: string[];
+    paymentMethod: PaymentMethod[];
     sessionId: string;
     status: 'PROCESSING' | 'SUCCESS' | 'EXPIRED';
     transAmount: Amount;
@@ -60,6 +60,15 @@ export interface CheckoutRes {
     storePaymentMethod?: boolean;
     field: FieldStatusConfig;
     country?: string;
+    cancelUrl?: string;
+    amountBreakdown?: AmountBreakdown;
+}
+export interface AmountBreakdown {
+    goodsTax?: Amount;
+    shippingAmount?: Amount;
+    shippingTax?: Amount;
+    discount?: Amount;
+    other?: Amount;
 }
 export interface FieldStatusConfig {
     holderName: FieldStatus;

package/dist/types/components/AliPay/AliPay.d.ts

@@ -1,5 +1,6 @@
 import './ali-pay.scss';
 import type { AliPayProps, AliPayRef } from './type';
-export declare const AliPay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<AliPayProps> & {
+import type { CoreProps } from '../../types';
+export declare const AliPay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<AliPayProps & CoreProps> & {
     ref?: import("preact").Ref<AliPayRef> | undefined;
 }>;

package/dist/types/components/AliPay/type.d.ts

@@ -1,8 +1,7 @@
 import type { PayRes } from '../../api';
 import type { PayKKaError } from '../../core';
-import type { CoreProps } from '../../types';
 import type { FormValidateError } from '../internal/Form';
-export interface AliPayProps extends CoreProps {
+export interface AliPayProps {
     onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
     onSuccess?: (...args: any[]) => void;
     onError?: (error: PayKKaError) => void;

package/dist/types/components/ApplePay/ApplePay.d.ts

@@ -1,5 +1,6 @@
 import './apple-pay.scss';
 import type { ApplePayProps, ApplePayRef } from './type';
-export declare const ApplePay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ApplePayProps> & {
+import type { CoreProps } from '../../types';
+export declare const ApplePay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ApplePayProps & CoreProps> & {
     ref?: import("preact").Ref<ApplePayRef> | undefined;
 }>;

package/dist/types/components/ApplePay/type.d.ts

@@ -1,6 +1,6 @@
 import type { PayKKaError } from '../../core';
-import type { CoreProps, PaymentSuccessData } from '../../types';
-export interface ApplePayProps extends CoreProps {
+import type { PaymentSuccessData } from '../../types';
+export interface ApplePayProps {
     /** 支付授权成功后触发 */
     onSubmit?: () => void;
     /** 支付成功后触发 */
@@ -13,16 +13,19 @@ export interface ApplePayProps extends CoreProps {
     onTimeout?: (source: 'retry' | 'channel') => void;
     /** 收银台已过期时触发 */
     onExpired?: () => void;
-    /** 交易被风控拦截时触发 */
-    onAuthorized?: () => void;
     /** 支付取消时触发 */
     onCancel?: () => void;
     /** Apple Pay 按钮是否可用 */
     onCanUse?: (canUse: boolean) => void;
     /**
-     * 内部使用
+     * @internal
+     * 交易被风控拦截时触发
+     */
+    onAuthorized?: () => void;
+    /**
+     * @internal
+     * 点击 GooglePay 按钮
      */
-    /** 点击 ApplePay 按钮 */
     onBtnClick?: () => void;
 }
 export interface ApplePayRef {

package/dist/types/components/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import './card.scss';
 import type { CardProps, CardRef } from './type';
-export declare const Card: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<CardProps> & {
+import { type CoreProps } from '../../types';
+export declare const Card: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<CardProps & CoreProps> & {
     ref?: import("preact").Ref<CardRef> | undefined;
 }>;

package/dist/types/components/Card/type.d.ts

@@ -1,7 +1,7 @@
 import type { PayKKaError } from '../../core';
-import type { CoreProps, ElementStylesConfig, PaymentSuccessData } from '../../types';
+import type { ElementStylesConfig, PaymentSuccessData } from '../../types';
 import type { FormValidateError } from '../internal/Form';
-export interface CardProps extends CoreProps {
+export interface CardProps {
     /** 定义卡敏感信息表单布局展示，split 为分割布局，combine 为合并布局 */
     cardInfoLayout?: CardInfoLayout;
     /**

package/dist/types/components/DropIn/DropIn.d.ts

@@ -0,0 +1,6 @@
+import { type DropInProps, type DropInRefs } from './type';
+import './drop-in.scss';
+import type { CoreProps } from '../../types';
+export declare const DropIn: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<DropInProps & CoreProps> & {
+    ref?: import("preact").Ref<DropInRefs> | undefined;
+}>;

package/dist/types/components/DropIn/components/PaymentTabs/PaymentTabs.d.ts

@@ -0,0 +1,3 @@
+import type { PaymentTabsProps } from './type';
+import './payment-tabs.scss';
+export declare const PaymentTabs: (props: PaymentTabsProps) => import("preact").JSX.Element;

package/dist/types/components/DropIn/components/PaymentTabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './PaymentTabs';

package/dist/types/components/DropIn/components/PaymentTabs/type.d.ts

@@ -0,0 +1,11 @@
+import type { PaymentCategory } from '../../../../constant';
+import type { PaymentTypeOptions } from '../../type';
+export interface PaymentTabsProps {
+    value: PaymentCategory;
+    tabs: PaymentTypeOptions[];
+    enabled?: PaymentCategory;
+    themeColor?: string;
+    onChange?: (type: PaymentCategory) => void;
+}
+export interface PaymentTabsRefs {
+}

package/dist/types/components/DropIn/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropIn';
+export * from './type';

package/dist/types/components/DropIn/type.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'preact/compat';
+import type { PaymentSuccessData } from '../../types';
+import { PaymentCategory, PaymentMethod } from '../../constant';
+import type { ComponentType } from 'preact';
+import type { FormValidateError } from '../internal/Form';
+import type { PayKKaError } from '../../core';
+export interface DropInProps {
+    /**
+     * 配置各种支付方式的参数
+     * 最终展示的支付方式由创建收银台请求返回结果决定，而不是由该参数决定
+     */
+    paymentMethods?: PaymentMethodsConfig;
+    /**
+     * 布局，tabs 表示在tab切换式布局，accordion 表示折叠式布局(手风琴)
+     * 目前暂不支持 accordion 布局
+     * @default tabs
+     */
+    layout?: 'tabs' | 'accordion';
+    /** 提交表单时触发 */
+    onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
+    /** 支付成功后触发 */
+    onSuccess?: (data: PaymentSuccessData) => void;
+    /** 支付失败时触发 */
+    onError?: (error: PayKKaError) => void;
+    /** 支付超时时触发 */
+    onTimeout?: () => void;
+    /** 收银台已过期时触发 */
+    onExpired?: () => void;
+}
+export interface DropInRefs {
+    /** 不展示支付按钮时，可调用该方法进行支付 */
+    payment: () => void;
+}
+export type PaymentMethodsConfig = {
+    [key in DropInPaymentCategory]: Partial<PaymentComponentProps<key>>;
+};
+export interface PaymentTypeOptions {
+    icon: ReactNode;
+    name: string;
+    type: DropInPaymentCategory;
+}
+/**
+ * 当前 drop in 支持的支付方式
+ * 目前暂不支持 WeChatPay 和 Alipay
+ */
+export declare const dropInSupportedPaymentMethods: PaymentMethod[];
+export type DropInPaymentCategory = PaymentCategory.APPLE_PAY | PaymentCategory.GOOGLE_PAY | PaymentCategory.CARD;
+export declare const PaymentComponentMap: Record<DropInPaymentCategory, ComponentType<any>>;
+export type PaymentComponentProps<P extends keyof typeof PaymentComponentMap> = React.ComponentProps<(typeof PaymentComponentMap)[P]>;

package/dist/types/components/GooglePay/GooglePay.d.ts

@@ -1,5 +1,6 @@
 import './google-pay.scss';
 import type { GooglePayProps, GooglePayRef } from './type';
-export declare const GooglePay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<GooglePayProps> & {
+import type { CoreProps } from '../../types';
+export declare const GooglePay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<GooglePayProps & CoreProps> & {
     ref?: import("preact").Ref<GooglePayRef> | undefined;
 }>;

package/dist/types/components/GooglePay/type.d.ts

@@ -1,6 +1,6 @@
 import type { PayKKaError } from '../../core';
-import type { CoreProps, PaymentSuccessData } from '../../types';
-export interface GooglePayProps extends CoreProps {
+import type { PaymentSuccessData } from '../../types';
+export interface GooglePayProps {
     /** 支付授权成功后触发 */
     onSubmit?: () => void;
     /** 支付成功后触发 */
@@ -13,19 +13,30 @@ export interface GooglePayProps extends CoreProps {
     onTimeout?: (source: 'retry' | 'channel') => void;
     /** 收银台已过期时触发 */
     onExpired?: () => void;
-    /** 交易被风控拦截时触发 */
-    onAuthorized?: () => void;
-    /** 交易需要 3DS 验证时触发，url 为 3DS 验证链接，incomplete 为 false 表示目前要开始进行 3DS 验证，为 true 表示上一次 3DS 验证还未完成 */
-    onThreeDS?: (url: string, incomplete: boolean) => void;
     /** 当前设备环境是否可用于 Google Pay 支付 */
     onCanUse?: (canUse: boolean) => void;
     /**
-     * 内部使用
+     * @internal
+     * 交易被风控拦截时触发
+     */
+    onAuthorized?: () => void;
+    /**
+     * @internal
+     * 交易需要 3DS 验证时触发
+     * url 为 3DS 验证链接
+     * incomplete 为 false 表示目前要开始进行 3DS 验证，为 true 表示上一次 3DS 验证还未完成
+     */
+    onThreeDS?: (url: string, incomplete: boolean) => void;
+    /**
+     * @internal
+     * 点击 GooglePay 按钮
      */
-    /** 点击 GooglePay 按钮 */
     onBtnClick?: () => void;
 }
 export interface GooglePayRef {
-    /** 3DS 验证流程结束后可调用该方法轮询收银台支付状态 */
+    /**
+     * @internal
+     * 3DS 验证流程结束后可调用该方法轮询收银台支付状态
+     */
     checkThreeDS: () => void;
 }

package/dist/types/components/Sepa/Sepa.d.ts

@@ -1,5 +1,6 @@
 import './sepa.scss';
 import type { SepaProps, SepaRef } from './type';
-export declare const Sepa: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<SepaProps> & {
+import type { CoreProps } from '../../types';
+export declare const Sepa: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<SepaProps & CoreProps> & {
     ref?: import("preact").Ref<SepaRef> | undefined;
 }>;

package/dist/types/components/Sepa/type.d.ts

@@ -1,7 +1,6 @@
 import type { PayKKaError } from '../../core';
-import type { CoreProps } from '../../types';
 import type { FormValidateError } from '../internal/Form';
-export interface SepaProps extends CoreProps {
+export interface SepaProps {
     onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
     onSuccess?: (returnUrl?: string) => void;
     onError?: (error: PayKKaError) => void;

package/dist/types/components/WechatPay/WechatPay.d.ts

@@ -1,5 +1,6 @@
 import './wechat-pay.scss';
 import type { WechatPayProps, WechatPayRef } from './type';
-export declare const WechatPay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<WechatPayProps> & {
+import type { CoreProps } from '../../types';
+export declare const WechatPay: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<WechatPayProps & CoreProps> & {
     ref?: import("preact").Ref<WechatPayRef> | undefined;
 }>;

package/dist/types/components/WechatPay/type.d.ts

@@ -1,8 +1,7 @@
 import type { PayRes } from '../../api';
 import type { PayKKaError } from '../../core';
-import type { CoreProps } from '../../types';
 import type { FormValidateError } from '../internal/Form';
-export interface WechatPayProps extends CoreProps {
+export interface WechatPayProps {
     onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
     onSuccess?: (...args: any[]) => void;
     onError?: (error: PayKKaError) => void;

package/dist/types/components/index.d.ts

@@ -17,3 +17,4 @@ export * from './Sepa';
 export * from './CardIBANField';
 export * from './EncryptedCard';
 export * from './CombinedCardInfo';
+export * from './DropIn';

package/dist/types/components/internal/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './type';

package/dist/types/components/internal/Modal/type.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "preact/compat";
 import type { CustomAttributes } from "../../../types";
 export interface ModalProps extends CustomAttributes<HTMLDivElement> {
     /** 是否展示弹框 */
-    show: boolean;
+    show?: boolean;
     /** 弹窗宽度，不传就自适应 */
     width?: number | string;
     /** 弹窗高度，不传就自适应 */

package/dist/types/components/internal/icons/IconCard.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from './type';
+export declare const IconCard: ({ size, style, className }: IconProps) => import("preact").JSX.Element;

package/dist/types/components/internal/icons/index.d.ts

@@ -17,3 +17,4 @@ export * from './IconAdd';
 export * from './Icon3DSFail';
 export * from './Icon3DSSuccess';
 export * from './Icon3DSInfo';
+export * from './IconCard';

package/dist/types/constant.d.ts

@@ -1,5 +1,6 @@
 export declare const PREFIX = "paykka-card-checkout";
 export declare const COMMON_CLASS_NAME = "paykka-card-checkout";
+/** 具体的，未分类的支付方式，来自后端 */
 export declare enum PaymentMethod {
     ALL = "ALL",
     ALI_PAY = "ALIPAY_PLUS",
@@ -16,6 +17,16 @@ export declare enum PaymentMethod {
     BOC = "BOC",
     SEPA_DEBIT = "SEPA_DEBIT"
 }
+/** 按照大类区分的支付方式 */
+export declare enum PaymentCategory {
+    /** 所有卡支付（Visa、MasterCard等） */
+    CARD = "card",
+    APPLE_PAY = "applePay",
+    GOOGLE_PAY = "googlePay",
+    SEPA_DEBIT = "sepaDebit",
+    WECHAT_PAY = "wechatPay",
+    ALI_PAY = "aliPay"
+}
 export declare const CardPaymentMethods: PaymentMethod[];
 export declare enum PaymentType {
     PURCHASE = "PURCHASE",

package/dist/types/core/PayKKaCheckout.d.ts

@@ -22,6 +22,7 @@ export declare class PayKKaCheckout {
     private initExtraParams;
     get session(): Session;
     get envConfig(): PayKKaEnvConfig;
+    get config(): PayKKaInitConfiguration;
     /** 创建组件，把 session 作为组件的 props 传递 */
     create<P extends Recordable>(component: ComponentType<P> | ((props: P) => JSX.Element), props?: Partial<P> | null): ComponentInst<P>;
     getCoreProps(): CoreProps;

package/dist/types/i18n/locales/de-DE.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/en-GB.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/es-ES.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/fr-FR.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/ja-JP.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/ko-KR.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/pt-PT.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/ru-RU.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/zh-CN.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/zh-HK.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/locales/zh-TW.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
+    'dropIn.card.label': string;
+    'dropIn.otherPaymentMethod': string;
     'card.cardNumber.label': string;
     'card.cardNumber.incomplete': string;
     'card.cardNumber.invalid': string;

package/dist/types/i18n/util.d.ts

@@ -1,4 +1,9 @@
 import type { CustomLocales, Translation } from './locales';
+/**
+ * 获取最终在收银台展示的语言
+ * 如果 locale 不符合，则取浏览器语言，若仍然不符合则用 en-GB
+ */
+export declare const getRealLocale: (locale: string) => string;
 export declare function loadTranslation(locale: string, customLocales?: CustomLocales): Promise<{
     locale: string;
     translation: Translation;

package/dist/types/types/index.d.ts

@@ -1,7 +1,8 @@
 import type { HTMLAttributes } from 'preact/compat';
 import type { LocaleKeyType } from '../i18n';
-import type { PayKKaError, Session } from '../core';
+import type { PayKKaCheckout, PayKKaError, Session } from '../core';
 import type { FraudDetectionEnv } from './fraud-detection';
+import type { FormValidateError } from '../components/internal/Form';
 export * from './fraud-detection';
 export * from './message';
 export type CustomAttributes<T extends EventTarget, K extends keyof HTMLAttributes<T> = 'style' | 'className'> = Pick<HTMLAttributes<T>, K>;
@@ -22,17 +23,36 @@ export interface PayKKaInitConfiguration {
     onPaymentMethodsReady?: (methods: string[]) => void;
     /** 收银台创建时报错触发 */
     onInitError?: (error: PayKKaError) => void;
+    /**
+     * 全局回调，可以统一处理支付状态
+     * 创建组件时传同名回调可覆盖
+     */
+    /** 提交表单时触发 */
+    onSubmit?: (formValidateError?: Recordable<FormValidateError[]>) => void;
+    /** 支付成功后触发 */
+    onSuccess?: (data: PaymentSuccessData) => void;
+    /** 支付失败时触发 */
+    onError?: (error: PayKKaError) => void;
+    /** 支付超时时触发 */
+    onTimeout?: () => void;
+    /** 收银台已过期时触发 */
+    onExpired?: () => void;
     /**
      * 内部参数
      */
     /** 环境配置，优先级大于 env 参数 */
     _envConfig?: PayKKaEnvConfig;
 }
-export interface CoreProps {
-    session?: Session;
+/** 收银台创建组件时自动传入的内部属性 */
+export type CoreProps = {
+    session: Session;
+    /** 收银台实例 */
+    core: PayKKaCheckout;
     /** 定义 3DS 所需配置 */
     threeDSFrame?: ThreeDSFrameConfig;
-}
+    /** 组件是否通过 DropIn 创建 */
+    isDropIn?: boolean;
+};
 export interface ThreeDSFrameConfig {
     /** 3DS 页面宽度 */
     modalWidth?: number | string;