如何在Angular集成的PayPal中添加固定运费（示例5.00美元）

核心解决方案（基于你使用的ngx-paypal库） #

你当前用的ngx-paypal是Angular生态中常用的PayPal JS SDK封装库，无需额外寻找Angular/TS专属SDK。要添加5美元固定运费并让PayPal收据显示明细，只需调整订单的金额结构和商品明细配置：

步骤1：计算包含运费的总价 #

在checkout()方法开头，先算出商品总价加运费的最终金额：

const shippingCost = 5.00;
const subtotal = this.grandTotal;
const total = subtotal + shippingCost;
const myValue = total.toFixed(2); // 最终付款总价
const subtotalValue = subtotal.toFixed(2); // 商品小计

步骤2：修改PayPal订单的金额拆分和商品明细 #

在createOrderOnClient的purchase_units中，完善amount.breakdown添加运费字段，同时补充items数组传递商品明细（这样PayPal收据会显示每个商品和运费，而非仅总价）：

//@ts-ignore
createOrderOnClient: (data) => <ICreateOrderRequest>{
  intent: 'CAPTURE',
  purchase_units: [{
    amount: {
      currency_code: 'USD',
      value: myValue, // 最终总价（商品+运费）
      breakdown: {
        item_total: {
          currency_code: 'USD',
          value: subtotalValue // 商品小计
        },
        shipping: {
          currency_code: 'USD',
          value: '5.00' // 固定运费
        }
      },
    },
    // 商品明细，PayPal收据会自动渲染每个商品的名称、数量、单价
    items: this.products.map((item: any) => ({
      name: item.title,
      quantity: item.quantity.toString(),
      unit_amount: {
        currency_code: 'USD',
        value: item.price.toFixed(2)
      }
    })),
    description: '电商订单'
  }]
},

步骤3：优化冗余代码 #

你之前循环处理商品title的代码可直接替换为上述items数组，无需额外生成JSON字符串，简化逻辑的同时保证收据明细正确显示。

修改后的完整checkout方法代码 #

checkout(){
  const shippingCost = 5.00;
  const subtotal = this.grandTotal;
  const total = subtotal + shippingCost;
  const myValue = total.toFixed(2);
  const subtotalValue = subtotal.toFixed(2);
  
  this.payPalConfig = {
    currency: 'USD',
    clientId: "[type in your client-id]",
    //@ts-ignore
    createOrderOnClient: (data) => <ICreateOrderRequest>{
      intent: 'CAPTURE',
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: myValue,
          breakdown: {
            item_total: {
              currency_code: 'USD',
              value: subtotalValue
            },
            shipping: {
              currency_code: 'USD',
              value: '5.00'
            }
          },
        },
        items: this.products.map((item: any) => ({
          name: item.title,
          quantity: item.quantity.toString(),
          unit_amount: {
            currency_code: 'USD',
            value: item.price.toFixed(2)
          }
        })),
        description: '电商订单'
      }]
    },
    advanced: {
      commit: 'true'
    },
    style: {
      label: 'paypal',
      layout: 'vertical'
    },
    onApprove: (data, actions) => {
      console.log('onApprove - transaction was approved, but not authorized', data, actions);
      actions.order.get().then((details: any) => {
        console.log('onApprove - you can get full order details inside onApprove: ', details);
      });
    },
    onClientAuthorization: (data) => {
      console.log('onClientAuthorization - you should probably inform your server about completed transaction at this point', data);
      this.showSuccess = true;
      // empties cart after user purchases
      this.emptycart();
    },
    onCancel: (data, actions) => {
      console.log('OnCancel', data, actions);
    },
    onError: err => {
      console.log('OnError', err);
    },
    onClick: (data, actions) => {
      console.log('onClick', data, actions);
    },
    onShippingChange: (data, actions) => {
      return actions.resolve() // or .reject()
    },
  };
}

关键说明 #

• ngx-paypal已完美封装PayPal JS SDK，无需额外寻找Angular专属版本，之前的问题大概率是订单结构配置不全导致的。
• 通过amount.breakdown明确拆分商品小计和运费，PayPal会在收据中单独展示这两部分。
• 添加items数组后，PayPal收据会显示每个商品的明细信息，解决当前仅显示总价的问题。

内容的提问来源于stack exchange，提问作者Max Dell-Thibodeau