Angular集成Amazon Pay V2无法启动结账页面问题及解决

在Angular应用中集成Amazon Pay V2支付按钮时，遇到无法启动结账页面的问题：点击按钮后仅返回错误码，无具体错误信息，无法定位问题。

相关代码 #

Payload配置 #

this.payload = {
      "webCheckoutDetails": {
        "checkoutReviewReturnUrl": "environment.checkoutReviewReturnUrl"
      },
      "storeId": environment.awsClientId,
      "scopes": ["profile", "pin_codes", "phoneNumber"],
      "chargePermissionType": "Recurring",
      "recurringMetadata": {
        "frequency": {
          "unit": this.plan.NewPlan.Frequency,
          "value": this.plan.NewPlan.Frequency_Interval,
        },
        "amount": {
          "amount": this.plan.NewPlan.Price,
          "currencyCode": "USD"
        }
      }
    };

支付按钮渲染代码 #

amazon.Pay.renderButton('#AmazonPayButton', {
      // 设置结账环境
      merchantId: environment.awsSellerId,
      publicKeyId: environment.publicKeyId,
      ledgerCurrency: 'USD',
      // 自定义买家体验
      checkoutLanguage: 'en_US',
      productType: 'PayOnly',
      placement: 'Cart',
      // 配置创建结账会话请求
      createCheckoutSessionConfig: {
        payloadJSON: JSON.stringify(this.payload),
        signature: this.signature,
        algorithm: this.algorithm
      }
    });

补充说明：Amazon Pay的脚本与按钮已成功加载。

问题解决 #

问题已解决，根因是生成签名的服务器端接口耗时较长，导致支付按钮在签名尚未生成完成时就已完成渲染。调整逻辑为等待签名生成完成后，再执行按钮渲染代码，问题即可解决。

内容的提问来源于stack exchange，提问作者dhruv14