动态添加属性到请求对象 - Google Pay [Typescript]

Question

我正在按如下方式构建此付款请求对象

paymentRequest: google.payments.api.PaymentDataRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
  {
    type: 'CARD',
    parameters: {
      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
      allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD'],
      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']

并在 html 中使用这个 paymentRequest 如下

<google-pay-button
    environment="TEST"
    buttonType="buy"
    buttonColor="black"
    [paymentRequest]="paymentRequest"
    (loadpaymentdata)="onLoadPaymentData($event)"
    (error)="onError($event)"
    [paymentAuthorizedCallback]="onPaymentDataAuthorized"></google-pay-button>

我的问题：

我想动态添加请求对象内的属性。例如，我想在某些情况下单独添加属性“billingAddressRequired = true”，而在其他情况下我不需要它。所以我的请求对象将不包含“billingAddressRequired”属性。

Answer 1

您可以通过根据您需要的任何条件更新paymentRequest 属性来实现此目的。

见StackBlitz example:

onBillingClick(event) {
  console.log('request billing', event.target.checked);
  if (event.target.checked) {
    this.paymentRequest.allowedPaymentMethods[0].parameters.billingAddressRequired = true;
    this.paymentRequest.allowedPaymentMethods[0].parameters.billingAddressParameters =
      {
        format: 'FULL',
        phoneNumberRequired: true,
      };
  } else {
    delete this.paymentRequest.allowedPaymentMethods[0].parameters
      .billingAddressRequired;
    delete this.paymentRequest.allowedPaymentMethods[0].parameters
      .billingAddressParameters;
  }
}

在上面的示例中，billingAddressRequired 和 billingAddressParameters 在选中复选框时设置，如果未选中复选框，则将其删除。

Answer 2

{billingAddressRequired?:Boolean} 使用类似这样的接口。

用于动态添加属性 如果（某些条件） 请求['billingAddressRequired']=true;

就这样