Angular 17中PayPal按钮createOrder未触发问题求助

你的核心问题是paypal.Buttons()的参数传递错误：该方法仅接受一个包含所有配置（样式、回调函数）的对象，而你把样式配置和回调配置拆成了两个独立参数传入，导致第二个参数里的createOrder、onApprove等回调完全没被PayPal SDK识别。因此PayPal使用了默认的0.01美元订单，你的控制台日志自然不会输出。

修复步骤 #

1. 合并配置参数 #

将样式配置和回调函数合并到同一个对象中，这是PayPal按钮初始化的正确写法：

paypal.Buttons({
  style: {
    layout:'horizontal',
    color:'blue',
    shape:'rect',
    label:'paypal',
  },
  createOrder: (data: any, actions: any) => {
    console.log("Create Order *********************");
    return actions.order.create({
      purchase_units:[
        {
          amount:{
            value: this.amountPrice.toString(),
            currency_code:'USD'
          }
        }
      ]
    });
  },
  onApprove: (data: any, actions: any) => {
    console.log("onApprove *********************");
    return actions.order.capture().then((details: any) => {
      console.log('Payment details:', details);
    });
  },
  onError: (err: any) => {
    console.log('Error creating PayPal order:', err);
  }
}).render(this.paypalButtonContainer.nativeElement);

2. 额外检查点 #

• 确认this.amountPrice有正确的数值（可通过console.log(this.amountPrice)验证，避免是undefined或0）
• 确保PayPal SDK脚本已完全加载后再执行按钮渲染逻辑（建议在ngAfterViewInit钩子中执行，或监听脚本加载完成事件）
• 确认@ViewChild('paypalButtonContainer') paypalButtonContainer: ElementRef;已正确定义，且模板中存在对应元素

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