接入方式
背景
流程
1.
2.
3.
4.
5.
6.
核心概念
prefix = "whalet-checkout"{ prefix, type, payload }targetOrigin：生产环境强制使用精确的目标源，不应使用 '*'。消息结构
基础封装
interface BaseMessage<T extends string, P> {
prefix: 'whalet-checkout'
type: T
payload: P
}类型与载荷（节选）
REQUEST_FORM_VALIDATION： 发起表单校验payload: {} 为空对象即可INITIATE_PAYMENT：发起支付payload: { tradeUniId: string; name: string; country: string; email?: string; billingAddress?: BillingAddress; ... }REPLY_FORM_VALIDATION_RESULT：表单校验结果回传payload(成功): { valid: true }payload(失败): { valid: false, errors?: Array<{ name: (string | number)[]; errors: string[] }> }REPLY_PAYMENT_RESULT：支付结果回传payload: { tradeUniId: string; status: 'success'|'failed'; paymentMethod?: string; message?: string }REPLY_ERROR：错误信息回传payload: { code?: string; message: string; detail?: unknown }BillingAddress 等。会话一：请求校验子页面表单（可选）
会话二：发起支付指令
INITIATE_PAYMENT数据结构
// Initiate
{
prefix: 'whalet-checkout',
type: 'INITIATE_PAYMENT',
payload: {
tradeUniId: string,
name: string,
country: string,
email?: string,
billingAddress?: BillingAddress,
// 其他必要字段...
}
}会话三：支付结果/错误回传
数据结构
// Payment Result
{
prefix: 'whalet-checkout',
type: 'REPLY_PAYMENT_RESULT',
payload: {
tradeUniId: string,
status: 'success' | 'failed',
paymentMethod?: string,
message?: string
}
}
// Error
{
prefix: 'whalet-checkout',
type: 'REPLY_ERROR',
payload: {
code?: string,
message: string,
detail?: unknown,
}
}角色与事件绑定
父页面（Parent）职责
window 上监听 message 事件，过滤 prefix === 'whalet-checkout'type 路由到对应处理器targetOrigin子页面（Child）职责
window 上监听父页面发送的 INITIATE_PAYMENT, REQUEST_FORM_VALIDATION 等消息REPLY_* 消息附加信息
1) postMessage 类型定义
2) 数据结构定义
3) 测试页面（原始代码，可以拷贝下面这段代码测试 postMessage 流程）