Typings for braintree.dropin v3 typings for angular

Question

I'm integrating Braintree Drop-in v3 into an angular app with package npm i -save braintree-web-drop-in.

Then I found package @types/braintree-web I was following the example mentioned here however it doesn't seem to contain support for Drop-in functionality. Clearly this is not the right package.

braintree.dropin.create({
  authorization: environment.braintreeKey,
  selector: '#dropin-container'
}, function (err, dropinInstance) {
  if (err) {
    // Handle any errors that might've occurred when creating Drop-in
    console.error(err);
    return;
  }
  submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(function (err, payload) {
      if (err) {
        // Handle errors in requesting payment method
      }

      // Send payload.nonce to your server
    });
  });
});

I have import statement import * as braintree from "@types/braintree-web";

Then braintree gets recognized as a global namespace, however braintree.dropin is still causing me problems.

The Typescript compiler is complaining about dropin object:

Property 'dropin' does not exist on type 'typeof braintree'.

Question:

Is there some easy way to tell typescript it's all fine and roll with it? Or do I have to provide typings myself? Or do they exist somewhere already? Or it would be better to use braintree-web-package?

Answer 1

I solved it by using import * as dropin from 'braintree-web-drop-in'; Its possible because I have braintree module installed in node_modules

Its clearly the Typescript basics, but nerveless something I didn't knew about.

Since this question is about braintree drop in UI, here is my code combined with Typescript and angular 2. Javascript treats this differently than Typescript, so you shouldn't use function keyword inside Typescript.

  braintreeIsReady: boolean;
  dropIninstance: any;

  ngOnInit() {
    dropin.create({
      authorization: environment.braintreeKey,
      selector: '#dropin-container'
    }, (err, dropinInstance) => {
      if (err) {
        // Handle any errors that might've occurred when creating Drop-in
        console.error(err);
        return;
      }
      this.dropIninstance = dropinInstance;
      this.braintreeIsReady = true;
    });
  }

  pay() {
    this.dropIninstance.requestPaymentMethod((err, payload) => {
      if (err) {
        // deal with error
      }
      else {
        //send nonce to the server

      }
    });
  }