pay-sdk-react
Version:
A cross-platform payment SDK for React, supporting Alipay, WeChat Pay, PayPal, Stripe, Payssion, and Airwallex, compatible with H5, PC, and App environments.
1 lines • 5.1 kB
CSS
.pay-dot-loading{display:inline-block}.pay-button{display:inline-block;padding:7px 12px;font-size:16px;border-radius:4px;border:1px solid #eee;background:#fff;color:#333;cursor:pointer;transition:.2s;user-select:none;position:relative;text-align:center}.pay-button-content{display:flex;align-items:center;justify-content:center;gap:6px}.pay-button-block{display:block;width:100%}.pay-button-disabled{opacity:.4;cursor:not-allowed}.pay-button-loading{cursor:wait}.pay-button-loading-wrapper{display:flex;align-items:center;justify-content:center;gap:6px}.pay-button-primary{background:#1677ff;border-color:#1677ff;color:#fff}.pay-button-primary:hover{background:#409eff}.pay-button-success{background:#00b578;border-color:#00b578;color:#fff}.pay-button-danger{background:#ff3141;border-color:#ff3141;color:#fff}.pay-button-warning{background:#ff8f1f;border-color:#ff8f1f;color:#fff}.pay-button-default{background:#fff;border-color:#eee;color:#333}.pay-button-fill-outline{background:0 0;color:inherit}.pay-button-fill-none{background:0 0;border:none;color:inherit}.pay-button-mini{font-size:12px;padding:2px 8px}.pay-button-small{font-size:14px;padding:4px 10px}.pay-button-large{font-size:18px;padding:10px 18px}.pay-button-shape-rounded{border-radius:1000px}.pay-button-shape-rectangular{border-radius:0}.pay-modal{position:fixed;z-index:9999;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}.pay-modal__mask{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:0}.pay-modal__content{position:relative;z-index:1;background:#fff;border-radius:16px;padding:42px 20px 20px;min-width:280px;max-width:80vw;box-shadow:0 4px 24px #0001;text-align:center;max-height:60vh;display:flex;flex-direction:column}.pay-modal__close{position:absolute;right:12px;top:12px;background:0 0;border:none;font-size:28px;cursor:pointer;text-align:left}.pay-modal__icon{margin-bottom:8px;font-size:40px}.pay-modal__title{font-size:20px;font-weight:700;color:#222;margin-bottom:12px}.pay-modal__desc{color:#222;font-size:15px;margin-bottom:24px;line-height:1.7;text-align:left}.pay-modal__content-wrapper{position:relative;z-index:1;text-align:center;overflow-y:auto;flex:1;min-height:0}.pay-modal__actions{display:flex;justify-content:center;gap:16px;margin-top:16px}.pay-modal__btn{min-width:96px;padding:8px 0;border-radius:24px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}.pay-modal__btn--retry{background:#fff;color:#f25a5a;border:1.5px solid #f25a5a}.pay-modal__btn--finish{background:#f25a5a;color:#fff;border:none}.pay-mask{position:fixed;z-index:1000;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}.pay-icon{display:inline-block;color:inherit;width:16px;vertical-align:-2px;stroke:currentColor}.pay-icon[fill=currentColor]{fill:currentColor;stroke:none}.pay-icon[stroke=currentColor]{stroke:currentColor;fill:none}.pay-icon[fill=currentColor][stroke=currentColor]{fill:currentColor;stroke:currentColor}.pay-icon-paypal-text{width:64px;height:26px;max-width:72px;max-height:32px}.pay-icon-close{width:18px;height:18px}.pay-icon-stripe-text{width:24px;height:24px}.pay-icon-alipay{width:20px;height:20px}.pay-icon-wechat-pay{width:20px;height:20px}.pay-icon-payssion-pay{width:36px;height:20px}.pay-popup{position:fixed;z-index:1001}.pay-popup-body{position:fixed;display:flex;flex-direction:column;background-color:#fff;z-index:1010;box-sizing:border-box}.pay-popup-body.pay-popup-body-position-bottom{width:100%;left:0;bottom:0}.pay-popup-body.pay-popup-body-position-top{width:100%;left:0;top:0}.pay-popup-body.pay-popup-body-position-left{height:100%;width:80vw;left:0;top:0}.pay-popup-body.pay-popup-body-position-right{height:100%;width:80vw;right:0;top:0}.pay-popup-body.pay-popup-body-round.pay-popup-body-position-bottom{border-radius:16px 16px 0 0}.pay-popup-body.pay-popup-body-round.pay-popup-body-position-top{border-radius:0 0 16px 16px}.pay-popup-body.pay-popup-body-round.pay-popup-body-position-left{border-radius:0 16px 16px 0}.pay-popup-body.pay-popup-body-round.pay-popup-body-position-right{border-radius:16px 0 0 16px}.pay-popup-close-icon{position:absolute;z-index:1;cursor:pointer;padding:4px;font-size:18px;line-height:1;color:#999}.pay-popup-body.pay-popup-body-position-bottom .pay-popup-close-icon,.pay-popup-body.pay-popup-body-position-left .pay-popup-close-icon{top:8px;right:8px}.pay-popup-body.pay-popup-body-position-top .pay-popup-close-icon{bottom:8px;right:8px}.pay-popup-body.pay-popup-body-position-right .pay-popup-close-icon{top:8px;left:8px}.pay-popup-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.pay-popup-body.pay-popup-body-with-close.pay-popup-body-position-bottom .pay-popup-content,.pay-popup-body.pay-popup-body-with-close.pay-popup-body-position-left .pay-popup-content{padding-top:40px}.pay-popup-body.pay-popup-body-with-close.pay-popup-body-position-right .pay-popup-content{padding-top:40px}.pay-popup-body.pay-popup-body-with-close.pay-popup-body-position-top .pay-popup-content{padding-bottom:40px}