时间戳

首页 > 解决方案 > 使用braintree PayPal Dropin的Angular不会触发提交事件

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

问题描述

在我的 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() 也没有被调用。

问候，迈克

标签： angularionic-frameworkpaypalpayment-gatewaybraintree

解决方案

我的方法是错误的。不幸的是，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', {});
    }
  }

另一种解决方案可能是这样的：

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

推荐阅读