Typescript中Google Pay请求对象动态添加属性相关问题

你可以通过条件属性展开、动态赋值两种方式实现按需添加属性，以下是具体实现代码：

方案1：条件展开语法（最简洁） #

利用对象展开运算符，仅满足条件时才注入对应的属性，不满足时注入空对象，不会生成额外属性：

// 替换为你实际的业务判断逻辑，例：是否为实物订单、是否属于特定活动场景等
const needBillingAddress = true;

const paymentRequest: google.payments.api.PaymentDataRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD'],
        // 条件注入账单地址相关属性
        ...(needBillingAddress ? {
          billingAddressRequired: true,
          billingAddressParameters: {
            format: 'FULL',
            phoneNumberRequired: true
          }
        } : {})
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo: {
    merchantId: '12345678901234567890',
    merchantName: 'Demo Merchant'
  },
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPriceLabel: 'Total',
    totalPrice: '0.10',
    currencyCode: 'EUR',
    countryCode: 'BE'
  },
  callbackIntents: ['PAYMENT_AUTHORIZATION']
};

方案2：基础对象+动态赋值 #

适合属性判断逻辑较复杂的场景，先构造无可选属性的基础请求对象，满足条件时再追加属性：

// 构造基础请求对象，不含账单地址相关属性
const paymentRequest: google.payments.api.PaymentDataRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD']
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo: {
    merchantId: '12345678901234567890',
    merchantName: 'Demo Merchant'
  },
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPriceLabel: 'Total',
    totalPrice: '0.10',
    currencyCode: 'EUR',
    countryCode: 'BE'
  },
  callbackIntents: ['PAYMENT_AUTHORIZATION']
};

// 满足条件时追加属性
const needBillingAddress = true; // 替换为实际业务判断逻辑
if (needBillingAddress) {
  const cardParams = paymentRequest.allowedPaymentMethods[0].parameters;
  cardParams.billingAddressRequired = true;
  cardParams.billingAddressParameters = {
    format: 'FULL',
    phoneNumberRequired: true
  };
}

运行时动态更新注意事项 #

如果需要在页面交互过程中动态切换配置（例：用户切换商品类型后调整是否需要账单地址），建议将请求生成逻辑封装为独立函数，每次切换时重新生成完整的paymentRequest对象，避免Angular变更检测无法识别对象内部属性修改：

// 封装请求生成函数
function generatePaymentRequest(needBillingAddress: boolean): google.payments.api.PaymentDataRequest {
  return {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD'],
          ...(needBillingAddress ? {
            billingAddressRequired: true,
            billingAddressParameters: {
              format: 'FULL',
              phoneNumberRequired: true
            }
          } : {})
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'example',
            gatewayMerchantId: 'exampleGatewayMerchantId'
          }
        }
      }
    ],
    merchantInfo: {
      merchantId: '12345678901234567890',
      merchantName: 'Demo Merchant'
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '0.10',
      currencyCode: 'EUR',
      countryCode: 'BE'
    },
    callbackIntents: ['PAYMENT_AUTHORIZATION']
  };
}

// 场景切换时重新赋值
this.paymentRequest = generatePaymentRequest(/* 传入当前场景判断结果 */ true);

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