f98d6a8344
新增HPOS兼容性支持，重构支付网关类以兼容高性能订单存储系统 添加结账页面编辑器功能，支持多种布局预览和自定义样式 更新配置文件以支持开发环境域名设置 添加CHANGELOG.md和README.md文档 优化区块管理器和通知处理类的代码结构
388 lines
No EOL
15 KiB
JavaScript
388 lines
No EOL
15 KiB
JavaScript
/**
|
|
* Easypay Blocks Integration
|
|
*
|
|
* Registers Easypay payment methods with WooCommerce Blocks
|
|
* Enhanced with custom checkout form layout capabilities
|
|
*
|
|
* @package WenPaiEPay
|
|
* @since 1.0.1
|
|
*/
|
|
|
|
const { registerPaymentMethod } = window.wc.wcBlocksRegistry;
|
|
const { createElement, useState, useEffect } = window.wp.element;
|
|
const { __ } = window.wp.i18n;
|
|
const { decodeEntities } = window.wp.htmlEntities;
|
|
const { getSetting } = window.wc.wcSettings;
|
|
|
|
/**
|
|
* Custom checkout form layout configurations
|
|
*/
|
|
const checkoutLayouts = {
|
|
default: {
|
|
name: __('默认布局', 'wenpaiepay'),
|
|
description: __('标准的支付方法显示布局', 'wenpaiepay'),
|
|
className: 'easypay-layout-default'
|
|
},
|
|
compact: {
|
|
name: __('紧凑布局', 'wenpaiepay'),
|
|
description: __('更紧凑的支付方法显示', 'wenpaiepay'),
|
|
className: 'easypay-layout-compact'
|
|
},
|
|
detailed: {
|
|
name: __('详细布局', 'wenpaiepay'),
|
|
description: __('显示更多支付方法信息', 'wenpaiepay'),
|
|
className: 'easypay-layout-detailed'
|
|
},
|
|
grid: {
|
|
name: __('网格布局', 'wenpaiepay'),
|
|
description: __('网格形式显示支付方法', 'wenpaiepay'),
|
|
className: 'easypay-layout-grid'
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get current layout setting from WordPress customizer or default
|
|
*/
|
|
const getCurrentLayout = () => {
|
|
const customLayout = getSetting('easypay_checkout_layout', 'default');
|
|
return checkoutLayouts[customLayout] || checkoutLayouts.default;
|
|
};
|
|
|
|
/**
|
|
* Enhanced payment method component with customizable layouts
|
|
* @param {Object} settings Payment method settings
|
|
* @returns {Object} Payment method component
|
|
*/
|
|
const createPaymentMethodComponent = (settings) => {
|
|
const currentLayout = getCurrentLayout();
|
|
|
|
const Content = () => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
// 根据布局类型渲染不同的内容
|
|
const renderContentByLayout = () => {
|
|
switch (currentLayout.className) {
|
|
case 'easypay-layout-compact':
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-content-compact',
|
|
style: {
|
|
fontSize: '12px',
|
|
color: '#888',
|
|
marginTop: '2px'
|
|
}
|
|
},
|
|
settings.description ? decodeEntities(settings.description).substring(0, 50) + '...' : ''
|
|
);
|
|
|
|
case 'easypay-layout-detailed':
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-content-detailed',
|
|
style: {
|
|
fontSize: '14px',
|
|
color: '#555',
|
|
marginTop: '8px',
|
|
padding: '8px',
|
|
backgroundColor: '#f9f9f9',
|
|
borderRadius: '4px'
|
|
}
|
|
},
|
|
[
|
|
createElement(
|
|
'p',
|
|
{ key: 'desc', style: { margin: '0 0 8px 0' } },
|
|
decodeEntities(settings.description || '')
|
|
),
|
|
createElement(
|
|
'div',
|
|
{
|
|
key: 'features',
|
|
style: {
|
|
fontSize: '12px',
|
|
color: '#666',
|
|
display: 'flex',
|
|
gap: '12px'
|
|
}
|
|
},
|
|
[
|
|
createElement('span', { key: 'secure' }, '🔒 安全支付'),
|
|
createElement('span', { key: 'fast' }, '⚡ 快速到账'),
|
|
createElement('span', { key: 'support' }, '📞 24/7支持')
|
|
]
|
|
)
|
|
]
|
|
);
|
|
|
|
case 'easypay-layout-grid':
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-content-grid',
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
padding: '12px',
|
|
border: '1px solid #e0e0e0',
|
|
borderRadius: '8px',
|
|
marginTop: '8px'
|
|
}
|
|
},
|
|
[
|
|
settings.logo_url && createElement(
|
|
'img',
|
|
{
|
|
key: 'grid-logo',
|
|
src: settings.logo_url,
|
|
alt: settings.title,
|
|
style: {
|
|
height: '32px',
|
|
width: 'auto',
|
|
marginBottom: '8px'
|
|
}
|
|
}
|
|
),
|
|
createElement(
|
|
'div',
|
|
{
|
|
key: 'grid-desc',
|
|
style: { fontSize: '12px', color: '#666' }
|
|
},
|
|
decodeEntities(settings.description || '')
|
|
)
|
|
].filter(Boolean)
|
|
);
|
|
|
|
default:
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-content',
|
|
style: {
|
|
fontSize: '14px',
|
|
color: '#666',
|
|
marginTop: '4px'
|
|
}
|
|
},
|
|
decodeEntities(settings.description || '')
|
|
);
|
|
}
|
|
};
|
|
|
|
return renderContentByLayout();
|
|
};
|
|
|
|
const Label = () => {
|
|
const renderLabelByLayout = () => {
|
|
switch (currentLayout.className) {
|
|
case 'easypay-layout-compact':
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-label-compact',
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: '14px',
|
|
fontWeight: '400'
|
|
}
|
|
},
|
|
[
|
|
settings.logo_url && createElement(
|
|
'img',
|
|
{
|
|
key: 'logo',
|
|
src: settings.logo_url,
|
|
alt: settings.title,
|
|
style: {
|
|
height: '16px',
|
|
width: 'auto',
|
|
marginRight: '6px'
|
|
}
|
|
}
|
|
),
|
|
createElement(
|
|
'span',
|
|
{ key: 'title' },
|
|
decodeEntities(settings.title || '')
|
|
)
|
|
].filter(Boolean)
|
|
);
|
|
|
|
case 'easypay-layout-detailed':
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-label-detailed',
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: '18px',
|
|
fontWeight: '600',
|
|
padding: '4px 0'
|
|
}
|
|
},
|
|
[
|
|
settings.logo_url && createElement(
|
|
'img',
|
|
{
|
|
key: 'logo',
|
|
src: settings.logo_url,
|
|
alt: settings.title,
|
|
style: {
|
|
height: '24px',
|
|
width: 'auto',
|
|
marginRight: '12px'
|
|
}
|
|
}
|
|
),
|
|
createElement(
|
|
'span',
|
|
{ key: 'title' },
|
|
decodeEntities(settings.title || '')
|
|
)
|
|
].filter(Boolean)
|
|
);
|
|
|
|
case 'easypay-layout-grid':
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-label-grid',
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
minHeight: '60px',
|
|
justifyContent: 'center'
|
|
}
|
|
},
|
|
createElement(
|
|
'span',
|
|
{ key: 'title' },
|
|
decodeEntities(settings.title || '')
|
|
)
|
|
);
|
|
|
|
default:
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: 'easypay-payment-label',
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: '16px',
|
|
fontWeight: '500'
|
|
}
|
|
},
|
|
[
|
|
settings.logo_url && createElement(
|
|
'img',
|
|
{
|
|
key: 'logo',
|
|
src: settings.logo_url,
|
|
alt: settings.title,
|
|
style: {
|
|
height: '20px',
|
|
width: 'auto',
|
|
marginRight: '8px',
|
|
verticalAlign: 'middle',
|
|
flexShrink: 0
|
|
}
|
|
}
|
|
),
|
|
createElement(
|
|
'span',
|
|
{
|
|
key: 'title',
|
|
style: {
|
|
lineHeight: '1.2'
|
|
}
|
|
},
|
|
decodeEntities(settings.title || '')
|
|
)
|
|
].filter(Boolean)
|
|
);
|
|
}
|
|
};
|
|
|
|
return renderLabelByLayout();
|
|
};
|
|
|
|
// 编辑器组件，用于区块编辑器中的预览
|
|
const Edit = () => {
|
|
return createElement(
|
|
'div',
|
|
{
|
|
className: `easypay-payment-edit ${currentLayout.className}`,
|
|
style: {
|
|
border: '2px dashed #ccc',
|
|
padding: '16px',
|
|
borderRadius: '4px',
|
|
backgroundColor: '#f9f9f9'
|
|
}
|
|
},
|
|
[
|
|
createElement(
|
|
'div',
|
|
{
|
|
key: 'edit-header',
|
|
style: {
|
|
fontSize: '12px',
|
|
color: '#666',
|
|
marginBottom: '8px',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
`${__('支付方法预览', 'wenpaiepay')} - ${currentLayout.name}`
|
|
),
|
|
createElement(Label, { key: 'edit-label' }),
|
|
createElement(Content, { key: 'edit-content' })
|
|
]
|
|
);
|
|
};
|
|
|
|
return {
|
|
name: settings.name,
|
|
label: createElement(Label),
|
|
content: createElement(Content),
|
|
edit: createElement(Edit),
|
|
canMakePayment: () => true,
|
|
ariaLabel: decodeEntities(settings.title || ''),
|
|
supports: {
|
|
features: settings.supports || []
|
|
}
|
|
};
|
|
};
|
|
|
|
// Register Alipay payment method
|
|
const alipaySettings = getSetting('easypay_zfb_data', {});
|
|
if (alipaySettings && Object.keys(alipaySettings).length > 0) {
|
|
registerPaymentMethod(createPaymentMethodComponent(alipaySettings));
|
|
}
|
|
|
|
// Register WeChat payment method
|
|
const wechatSettings = getSetting('easypay_wx_data', {});
|
|
if (wechatSettings && Object.keys(wechatSettings).length > 0) {
|
|
registerPaymentMethod(createPaymentMethodComponent(wechatSettings));
|
|
}
|
|
|
|
// Register QQ payment method
|
|
const qqSettings = getSetting('easypay_qq_data', {});
|
|
if (qqSettings && Object.keys(qqSettings).length > 0) {
|
|
registerPaymentMethod(createPaymentMethodComponent(qqSettings));
|
|
}
|
|
|
|
// Register USDT payment method
|
|
const usdtSettings = getSetting('easypay_usdt_data', {});
|
|
if (usdtSettings && Object.keys(usdtSettings).length > 0) {
|
|
registerPaymentMethod(createPaymentMethodComponent(usdtSettings));
|
|
} |
