Angular 12中如何通过父组件触发PayPal支付流程？

问题场景 #

我在Angular 12项目中基于window.paypal.Buttons()实现了独立的PayPal支付组件，代码如下：

paypal.components.html #

<div id="paypal-button-container" #paypalButton></div> 

paypal.components.ts #

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-paypal',
  templateUrl: './paypal.component.html'
})
export class PaypalComponent implements OnInit {
  @ViewChild('paypalButton') paypalButton: ElementRef;

  ngOnInit(): void {
    window.paypal.Buttons({
      style: {
        layout: 'horizontal',
        color: 'white',
        shape: 'rect',
        label: 'paypal'
      },
      createOrder: async (data, actions) => {
        // 通过Orders API创建订单的逻辑
      },
      onApprove: async (data, actions) => {
        // 通过Orders API捕获支付的逻辑
      },
      onError: (data, actions) => {
        console.log("处理错误")
      }
    }).render('#paypal-button-container');
  }
}

需求是让用户既能点击PayPal原生按钮发起支付，也能通过父组件中的通用“PAY”按钮触发PayPal支付流程。但尝试直接调用组件容器的click()方法无效：

parent.components.ts #

import { Component, ViewChild } from '@angular/core';
import { PaypalComponent } from './paypal.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('paypal') paypalComponent: PaypalComponent;

  checkout(): void {
    if (this.paymentMethod === "paypal") {
      this.paypalComponent.paypalButton.nativeElement.click(); // 此方法无效
    }
  }
}

解决方法 #

核心思路是保存PayPal Buttons实例，并在组件中暴露触发支付的方法——因为PayPal按钮是动态生成的，容器元素本身并非可点击的按钮，必须调用PayPal官方提供的实例方法来触发支付。

1. 修改PayPal组件，保存实例并暴露触发方法 #

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-paypal',
  templateUrl: './paypal.component.html'
})
export class PaypalComponent implements OnInit {
  @ViewChild('paypalButton') paypalButton: ElementRef;
  private paypalButtonsInstance: any; // 存储PayPal按钮实例

  ngOnInit(): void {
    // 创建并保存PayPal按钮实例
    this.paypalButtonsInstance = window.paypal.Buttons({
      style: {
        layout: 'horizontal',
        color: 'white',
        shape: 'rect',
        label: 'paypal'
      },
      createOrder: async (data, actions) => {
        // 实现订单创建逻辑（示例）
        const order = await actions.order.create({
          purchase_units: [{
            amount: { value: '10.00' }
          }]
        });
        return order.id;
      },
      onApprove: async (data, actions) => {
        // 实现支付捕获逻辑（示例）
        const paymentDetails = await actions.order.capture();
        console.log('支付完成:', paymentDetails);
      },
      onError: (data, actions) => {
        console.log('支付错误:', data);
      }
    });

    // 渲染按钮到容器
    this.paypalButtonsInstance.render(this.paypalButton.nativeElement);
  }

  // 暴露给父组件的触发支付方法
  triggerPayPalPayment(): void {
    if (this.paypalButtonsInstance) {
      this.paypalButtonsInstance.click(); // 调用PayPal实例的官方click方法
    }
  }
}

2. 修改父组件，调用PayPal组件的触发方法 #

import { Component, ViewChild } from '@angular/core';
import { PaypalComponent } from './paypal.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('paypal') paypalComponent: PaypalComponent;
  paymentMethod = 'paypal'; // 当前选中的支付方式

  checkout(): void {
    if (this.paymentMethod === "paypal") {
      this.paypalComponent.triggerPayPalPayment(); // 调用组件暴露的方法
    }
  }
}

原理说明 #

直接点击容器元素无效，是因为PayPal按钮是通过JS动态插入到容器中的，容器本身不是交互按钮。PayPal的Buttons实例提供了click()方法，这是官方支持的触发支付弹窗的方式，能确保和点击原生PayPal按钮的行为完全一致。

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