Payment Modal Library

一个简单的支付模态框库，支持支付宝和微信支付按钮。

特点

• 🎨 琥珀色主题
• 💰 支持自定义金额
• 🔌 可自定义支付回调函数
• 📱 响应式设计
• 🎯 简单易用

安装

npm install @kevisual/payment-modal

使用方法

import { PaymentModal } from '@kevisual/payment-modal';

// 创建支付模态框实例
const paymentModal = new PaymentModal({
  // 设置支付金额
  amount: 99.99,
  // 支付宝支付按钮点击回调
  onAlipayClick: () => {
    console.log('支付宝支付被点击');
    // 在这里添加支付宝支付逻辑
  },
  // 微信支付按钮点击回调
  onWeChatClick: () => {
    console.log('微信支付被点击');
    // 在这里添加微信支付逻辑
  }
});

// 显示模态框
paymentModal.show();

// 隐藏模态框
paymentModal.hide();

API

PaymentModal

构造函数选项

interface PaymentModalOptions {
  // 支付金额
  amount: number;
  // 支付宝支付按钮点击回调函数
  onAlipayClick?: () => void;
  // 微信支付按钮点击回调函数
  onWeChatClick?: () => void;
}

方法

• show(): 显示支付模态框
• hide(): 隐藏支付模态框

示例

// 创建一个触发按钮
const triggerButton = document.createElement('button');
triggerButton.textContent = '打开支付';
triggerButton.className = 'payment-trigger';

// 添加点击事件
triggerButton.addEventListener('click', () => {
  const paymentModal = new PaymentModal({
    amount: 99.99,
    onAlipayClick: () => {
      // 处理支付宝支付
    },
    onWeChatClick: () => {
      // 处理微信支付
    }
  });
  
  paymentModal.show();
});

// 将按钮添加到页面
document.body.appendChild(triggerButton);

样式定制

模态框使用内联样式，主题色为琥珀色（#D97706）。按钮悬停时颜色会变深（#B45309）。

许可证

MIT