@economist/web-apple-pay (英语)
框架不可知Apple Pay UI组件作为Web组件被执行.
本套件提供:
teg-apple-pay-buttonteg-apple-pay-modal
它有意以UI为重点。 消费者应用程序拥有后端支付管弦乐,商号验证,以及秘密操作.
所需资源
- 节点.js
20.x或稍后时间 - 无
10.x或稍后时间
安装
npm install --save @economist/web-apple-pay
快开始
(1) 配置运行时间值
打电话 configureApplePay(...) 在应用程序启动期间, 在渲染 Apple Pay UI 之前 :
import {
configureApplePay,
defineApplePayElements,
} from '@economist/web-apple-pay';
configureApplePay({
merchantId: 'merchant.com.economist.your-app',
debugBypassEnabled: false,
// required: wallet API base URL for session and checkout calls
walletApiBaseUrl: 'https://bff-test.economist.com',
});
defineApplePayElements();
2) 创建并挂载按钮
import type { Offer, ApplePayButton } from '@economist/web-apple-pay';
const button = document.createElement('teg-apple-pay-button') as ApplePayButton;
button.offer = offer as Offer;
button.country = 'US';
button.dataset.loggedIn = 'true';
container.appendChild(button);
单击时,按钮创建并打开 teg-apple-pay-modal 自动.
运行时间配置
configureApplePay(config)
设置 Apple Pay 可用性检查所用的软件包级运行时间配置 . 在应用程序启动时调用一次 .
config 形状 :
merchantId(单位:千美元)string,需要):用于活性卡检查的Apple Pay商标识.debugBypassEnabled(单位:千美元)boolean:允许?BYPASS_APPLE_PAY_CHECKS=1查询参数以绕过非生产风格调试流中的能力检查.walletApiBaseUrl(单位:千美元)string,需要):钱包 API 请求的基础 URL.
若为 merchantId 未配置, Apple Pay 可用性检查返回 false 按钮会隐藏自己.
组件行为
ApplePayButton
- 要求数
offer财务报告和审定财务报表country在单击流程之前是有意义的. - 在连接时检查 Apple Pay 可用性; 如果无法使用, 它会隐藏 .
- 为被排除在外的变体跳过渲染( S)
bundle, (中文(简体) ),insider_print) (中文(简体) ). 每一个ProductVariant(包括play)符合条件;计费国仅限于出价区. - 前进
data-logged-in从按钮到模式( e)modal.dataset.loggedIn) (中文(简体) ).
等待完成的工作—— whenReady()
使用 whenReady() 等待组件的成型寿命周期
给DOM。 这是支持的,稳定的方式 来了解苹果支付是否
可用而不触摸寿命周期内部.
container.appendChild(btn); // spec-compliant — browser fires connectedCallback naturally
await btn.whenReady(); // resolves when rendering is complete
if (btn.style.display !== 'none') {
// Apple Pay rendered successfully
} else {
btn.remove(); // unavailable or suppressed
}
重要内容: 电话
whenReady()在此之前appendChild决定 立即联系undefined它不会等待未来的连接. 总是在附加元素后调用 .
ApplePayModal
- 打开
ApplePayButton点击. - 输出
apple-pay-confirmed当CTA被接受. Escape关闭模式并阻止向其他全球处理者传播.
活动
apple-pay-confirmed
调自 ApplePayModal 作为 CustomEvent 改为:
detail.skuId(单位:千美元)string(中文(简体) )detail.country(单位:千美元)string(中文(简体) )
消费者应该倾听这个活动,继续支付管弦乐.
公共 API
defineApplePayElements():登记两个自定义要素.configureApplePay(config):设置所需的运行时间配置(merchant ID和钱包 API Base URL,带有可选调试绕行).ApplePayButton:按钮组件类.whenReady(): Promise<void>——当当前使生命周期完成(可用或隐藏)时解决. 如果在元素连接之前被调用, 立即决定 .createIfEnabled(offer, country, entryPoint?): 返回已配置的按钮或null。 。 。 .DUAL_OFFER_BANNER(或省略):总是在提供排除条件之后进行——没有主页/Safari门createIfEnabled(设备通过)isApplePayAvailable上载.FREE_TRIAL_BANNER: 总是与 Dual 相同的隔离门; 钱包印象entry_point实值free_trial_banner。 。 。 .FREE_TRIAL_POPUP: 总是在排出后门. 钱包印象entry_point实值free_trial_popup关于一个登录读者的付款成功,/checkout/complete以status=nspc。匿名弹出会留下nex其他入境点停留lex或者说nex。原始 URL 仍然写入到checkout-redirect来检查一下.SUBSCRIBE: 相同的 " 后排 " 门/subscribe(sma-checkout);无振幅. 钱包印象entry_point实值subscribe。 。 。 .SALES_PAGE: 用于Sma-checkout销售页面(黑色星期五和其他升级)的同一门;无展出。 主机管理的返回 URL 如SUBSCRIBE;不包括打印报价。 钱包印象entry_point实值sales_page。 。 。 .PAYWALL: 总是在提供排除后+Safari/Apple安置资格。 无振幅实验 /$exposure。 。 。 .REGWALL: 惰性——总是返回null。 。 。 .
- 分析. 切入点为
entry_point每次TEDL漏斗事件:express_wallet_impression, (中文(简体) ),express_wallet_click, (中文(简体) ),wallet_payment_sheet_open, (中文(简体) ),wallet_payment_authorised, (中文(简体) ),wallet_payment_success, (中文(简体) ),wallet_payment_failure财务报告和审定财务报表fallback_checkout。当主机未设置一个时,它被忽略。 每场validation_*事件不会携带它. - 印刷报价(
bundle, (中文(简体) ),insider_print)——在一面旗帜后,默认关闭.PRINT_OFFERS_ENABLED(编入放行,出船false:false不包括每个入口处的打印;true启用特性。 即便如此,也只有入境点allowsPrintOffers: true内ENTRY_POINT_CONFIG(单位:千美元)src/apple-pay-button.ts)取出印刷品——目前仅取出SUBSCRIBE旗帜,弹出,付费墙和regwall从来不做。 更新的主机button.offer应使用getExcludedVariants(entryPoint)而不是堕落的APPLE_PAY_EXCLUDED_VARIANTS。对于允许的打印报价,表格另外收集交货地址、名称和电话,以及:- 限制要约价格区的交货量减去无法向(
src/data/no-delivery-countries.json);没有可交付国家的提议会隐藏按钮; - 以 sma-checkout 交付格式规则(按区、商务服务长度限制、US zip/加拿大邮政编码格式、IN和CN 所需的电话)验证地址,并保持工作表的开通时有字段错误(
delivery-contact-details.ts规则utils/address-rules.ts(三); - 发送
supportedDeliveryCountries和货运联系人/v1/wallet/purchase(电话由验证器正常使用,例如.098765 43210因为 In 变成+919876543210;不能正常化的则被排除在外),它重新验证并转发送货地址给商务服务公司. 释放命令 : 使用钱包支付- api 更改后, 随旗帜释放true· ; - 一起报告计费和发送字段错误,所以工作表显示每个差的字段.
- 名称和地址必须是拉丁字母外加每次购买(SMA-3066)的已核准的二甲状腺素,与sma-checkout相同;非拉丁输入显示"请只使用拉丁字母".
- 限制要约价格区的交货量减去无法向(
- 买后还. Banners, 弹出, paywall和regwall 将用户返回到按钮打开的页面.
SUBSCRIBE财务报告和审定财务报表SALES_PAGE将返回目标留给主机(sma-checkout 保存用户从那里来的文章).
ApplePayModal: 模式组件类.Offer: 提供组件道具所使用的合同类型.
解决问题
未显示按钮
检查 :
configureApplePay(...)在渲染前被调用(带有有效merchantId财务报告和审定财务报表walletApiBaseUrl(中文(简体) )- 设备/浏览器支持 Apple Pay( 需要苹果设备上的 Safari) —— 由
isApplePayAvailable挂载) - 工资墙: Safari/Apple安置资格(或
?BYPASS_APPLE_PAY_CHECKS=1质量保证) - 标语 /
FREE_TRIAL_POPUP: 消费者杀机关机(无主页/Safari门)createIfEnabled(中文(简体) ) - 不排除要约的变式(
bundle, (中文(简体) ),insider_print页:1PRINT_OFFERS_ENABLED实值false(中文(简体) )
登录的复选框副本显示错误
设定 button.dataset.loggedIn = 'true' 在附加按钮之前。 按钮自动向模式转发此旗帜 .
安全和责任
商贸设置必须通过消费申请处理:
- 运行时注入商家配置
- 在信任的后端服务中进行商家验证
- 在此软件包外保留证书/ 机密
地方发展
从 shared-packages数字 :
cd packages/web-apple-pay
npm run build
yalc publish --sig
然后在消费的应用中:
yalc add @economist/web-apple-pay
故事书
本地运行故事书 :
npm run storybook --workspace @economist/web-apple-pay
构建静态故事本输出 :
npm run build-storybook --workspace @economist/web-apple-pay
故事报道矩阵:
ApplePayButtondocs页面显示稳定的默认示例.ApplePayButton行为和状态变体作为个别画布故事在"故事本"中提供.ApplePayModaldocs页面显示稳定的默认示例.ApplePayModal行为和状态变体作为个别画布故事在"故事本"中提供.
已停用PRINT_OFFERS_ENABLED 实值 false;见上文公共API部分.