Angular using braintree PayPal Dropin does not trigger submit event

Question

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

Answer 1

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