Angular using braintree PayPal Dropin does not trigger submit event

Issue

In my angular app I am using the braintree Drop-in UI ("braintree-web-drop-in": "^1.29.0",) to show the PayPal-Button. When pressing the PayPal-Button the submit-event of my form is not triggered.

<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',
      },
    };
  }

When pressing the generated PayPal-button, PayPal is called and I can pay successfully. After returning, the Dropin-UI shows the success. In my network-logs I also see that a nounce was created. But the submit-event is not triggered, so I am not able to create the transaction. requestPaymentMethod() is not called, too.

Greetings, Maik

Solution

My approach was wrong. Unfortunately there is no documentation on the braintree website for my use, although it is the most common use I can think of. But here is a solution that works for me:

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', {});
    }
  }

Another solution c o uld be something like this:

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

Answered By - Maik Kwi