创建Apple Pay会话时报Arguments/callee/caller不可访问TypeError问题问询

报错根因 #

该TypeError: 'Arguments', 'callee' and 'caller' cannot be accessed in this context错误通常由以下几类问题触发：

• 代码运行环境开启了严格模式，同时存在访问arguments.callee/caller的逻辑，Safari的Apple Pay运行上下文禁止此类操作
• 同时混用W3C Payment Request API和原生Apple Pay Session API，两个API的初始化逻辑冲突导致上下文污染
• 商户ID拼写不一致：canMakePayments传入的ID为拼写错误的my_verfied_merchant_identifier，和会话初始化时的my_verified_merchant_identifier不匹配
• 缺少Apple Pay会话要求的必要回调方法，或者会话未在用户主动交互的同步上下文内创建

修复步骤 #

1. 清理冲突API #

不要同时初始化Payment Request和原生Apple Pay Session，二选一即可，若需直接获取validationURL，优先使用原生Apple Pay Session API，先注释Payment Request相关测试代码。

2. 统一商户ID #

修正拼写错误，保证两处商户ID完全一致：

const MERCHANT_ID = 'my_verified_merchant_identifier'
// 确保canMakePayments传入的参数和后续会话初始化的商户ID一致
if(window.ApplePaySession?.canMakePayments(MERCHANT_ID)){
  // 按钮绑定逻辑
}

3. 补全完整会话逻辑 #

Apple Pay要求必须实现onvalidatemerchant、onpaymentauthorized、oncancel三个核心回调，且必须调用begin()方法启动会话，完整实现参考：

document.querySelector('apple-pay-button').addEventListener('click', async (event) => {
  try {
    const paymentRequest = {
      merchantIdentifier: 'my_verified_merchant_identifier',
      countryCode: 'US',
      currencyCode: 'USD',
      supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
      merchantCapabilities: ['supports3DS'],
      total: { label: 'Your Merchant Name', amount: '10.00' },
    }
    // 在点击事件的同步上下文内创建会话
    const session = new window.ApplePaySession(3, paymentRequest)
    
    // 商户验证回调：获取validationURL后传给服务端生成会话
    session.onvalidatemerchant = async (event) => {
      const serverRes = await fetch('/your-backend/apple-pay-validate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ validationUrl: event.validationURL })
      })
      const merchantSession = await serverRes.json()
      // 完成商户验证
      session.completeMerchantValidation(merchantSession)
    }

    // 支付授权回调：处理支付凭证后完成支付
    session.onpaymentauthorized = (event) => {
      // 此处可将event.payment传给你的支付服务端完成扣款
      session.completePayment(window.ApplePaySession.STATUS_SUCCESS)
    }

    // 支付取消回调：处理用户取消逻辑
    session.oncancel = () => {
      console.log('用户取消Apple Pay支付')
    }

    // 启动会话
    session.begin()
  } catch (e) {
    console.error('Apple Pay会话创建失败', e)
  }
})

4. 排查严格模式问题 #

• 检查Apple Pay相关代码所在作用域是否开启了严格模式，删除所有访问arguments.callee/caller的逻辑
• 若使用webpack、vite等打包工具，检查是否有插件自动注入严格模式，临时关闭相关配置验证问题

5. 环境校验 #

• Apple Pay仅支持HTTPS环境（localhost开发环境除外），HTTP环境会触发权限异常
• 确保当前运行环境为Safari浏览器，且系统版本符合要求：iOS ≥11，macOS ≥10.13
• 商户ID需在苹果开发者后台完成配置，且已绑定当前访问的域名

内容的提问来源于stack exchange，提问作者Vishawjeet -124