使用braintree PayPal Dropin的Angular不会触发提交事件

Posted 2023-02-22

【中文标题】使用braintree PayPal Dropin的Angular不会触发提交事件

【英文标题】：Angular using braintree PayPal Dropin does not trigger submit event

【发布时间】：2021-08-16 19:00:33

【问题描述】：

在我的 Angular 应用程序中，我使用 Braintree Drop-in UI（“braintree-web-drop-in”：“^1.29.0”，）来显示 PayPal-Button。当按下 PayPal 按钮时，我的表单的提交事件不会被触发。

<form id="payment-form" method="post">
    <div id="dropin-container"></div>
    <input id="nonce" name="payment_method_nonce" type="hidden" />
</form>

import * as braintree from 'braintree-web';
...
ngOnInit() 
   //create client token
   const clientToken = 'xyz';// --> get from server
   this.generateUI(clientToken);


 private generateUI(clientToken: string): void 
    const config = this.getDropinConfig(clientToken);
    dropin
      .create(config)
      .then((instance: any) => 
        const form = document.getElementById('payment-form');
        form.addEventListener('submit', (event) => 
          event.preventDefault();
          console.log('submit event: ' + JSON.stringify(event)); //-->not called

          instance.requestPaymentMethod(function (err, payload) 
            console.log(
              'requestPaymentMethod paypalod: ' + JSON.stringify(payload)
            );
            if (err) 
              console.log('Error', err);
              return;
            
          );
        );
      )
      .catch((error) => 
        console.error('error: ' + JSON.stringify(error));
      );
  

private getDropinConfig(clientToken: string): any 
    return 
      authorization: clientToken, 
      container: '#dropin-container',
      paypal: 
        commit: true,
        amount: 1,
        currency: 'EUR',
        flow: 'checkout',
      ,
    ;
  

按下生成的 PayPal 按钮时，会调用 PayPal，我可以成功付款。返回后，Dropin-UI 显示成功。在我的网络日志中，我还看到创建了一个通知。 但是提交事件没有被触发，所以我无法创建事务。 requestPaymentMethod() 也没有被调用。

您好， 麦克

【问题讨论】：

您是否尝试过使用NgZone 并调用run()？很多时候，这些库在角度区域之外运行，因此无法被拾取。

你的意思是：this.ngZone.run(() => this.generateUI(clientToken); ); run() 和 runOutsideAngular() 是否有帮助。

【参考方案1】：

我的方法是错误的。不幸的是，braintree 网站上没有可供我使用的文档，尽管这是我能想到的最常见的用途。但这里有一个适合我的解决方案：

Template:
 <div id="dropin-container"></div>
    <ion-button
      (click)="pay()"
      >Pay</ion-button
    >

TS:
  /** used directly for creditcard pay-button an indirectly after PayPal process*/
  public pay(): void 
    this.dropInInstance.requestPaymentMethod(
      (requestPaymentMethodErr: any, payload: any) => 
        if (requestPaymentMethodErr) 
          this.errorText =
            'Error......';
          console.error(JSON.stringify(requestPaymentMethodErr));
         else 
          this.unsubscribePaymentMethodRequestable();
          this.paymentService
            .pay(payload.nonce, this.zahlungshoehe)
            .then((response: any) => 
              console.log('payment response: ' + JSON.stringify(response));
              this.finishPayment();
            );
        
      
    );
  

private generateUI(clientToken: string): void 
    const config = this.getDropinConfig(clientToken);
    dropin
      .create(config)
      .then((instance: any) => 
        this.dropInInstance = instance;
      
        this.dropInInstance.on('paymentMethodRequestable', (event: any) => 
          if (event.paymentMethodIsSelected)           
            this.pay();
          
        );
      )
      .catch((error: any) => 
        console.error('error: ' + JSON.stringify(error));
      );
  

  private unsubscribePaymentMethodRequestable() 
    if (this.dropInInstance) 
      this.dropInInstance.off('paymentMethodRequestable', );
    
  

另一种解决方案 c ○ 应该是这样的：

dropinInstance.on('paymentMethodRequestable', 
function(event)
          console.log(event.type);          
          if (event.type == 'PayPalAccount') 
            dropinInstance.requestPaymentMethod(function 
             (requestPaymentMethodErr, response) );

【讨论】：

我终于切换到托管字段，因为 DropIn 遇到了更多问题。