3

I'm trying to get the Braintree client sample (https://developers.braintreepayments.com/start/hello-client/javascript/v3) working on Angular2. I'm very new to Angular2 (and Javascript).

First of all, I'm not sure if I'm supposed to add "braintree-web": "^3.6.3" under package.json's dependencies. Or add 

<script src="https://js.braintreegateway.com/web/3.6.3/js/client.min.js"></script>

and 

<script src="https://js.braintreegateway.com/web/3.6.3/js/hosted-fields.min.js"></script>

under index.html. I ended up doing both.

After I run npm install, if I look inside the node_modules/braintree-web, I see only .js files. I don't see any ts files. Is this a problem? Am I not supposed to use braintree-web for this? Is this package written for Angular1? If I do indeed have to use braintree-web, do I also need to include those 2 js files in my index.html? Doesn't braintree-web already include them?

In my payment.component.ts file, I copied and pasted the Braintree client code:

import { braintree } from 'braintree-web/client';
...
ngOnInit() {
    var authorization = '...';
    var submit = document.querySelector('input[type="submit"]');

    braintree.client.create({
      authorization: authorization
    }, function (clientErr, clientInstance) {
      if (clientErr) {

When I try to run tsc, I'm getting the following error:

app/admin/user/payment.component.ts(3,27): error TS2307: Cannot find module 'braintree-web/client'

What am I doing wrong?

Jenna S
  • 616
  • 1
  • 6
  • 24
  • Did you register braintree module in app.module.ts? http://stackoverflow.com/questions/40353886/trying-to-integrate-braintree-web-into-angular2 – freshbm Jan 20 '17 at 19:12
  • Thanks. I've noticed the guy added npm install @types/braintree-web@3.0.1. I can actually get something working now. So far, I discovered that I indeed need to include the js files in index.html and I do need the braintree package (in addition to the types). But... now I'm having trouble with Braintree's sample code. Basically, they get some object back from the server which I attempt to write to a temp member variable of the class for later use: this.temp = hostedFieldsInstance. But, when I do that, I get an error: Uncaught TypeError: Cannot read property 'temp' of undefined(…). Any ideas? – Jenna S Jan 21 '17 at 03:14
  • @JennaS How did you get it working? I've copied what you done but I am still getting the error saying 'Cannot find module 'braintree-web/client' – nareeboy Aug 31 '17 at 07:16

1 Answers1

7

Since Angular2 is strongly typed, you can't just use the Javascript sample code provided by Braintree. You need types defined for all those functions. So Trying to integrate braintree-web into Angular2 was the first clue that you need the @types/braintree-web installed (in package.json). These are not the official Braintree types, but open source contribution from http://definitelytyped.org/. I asked Braintree support for help and they mentioned you could use their Javascript sample code in Angular2, but you would need to specify a type for each parameter. They couldn't recommend the types package from definitelytyped because it's not their own code.

You don't need any more imports at the top of the file, but you do need the 2 Braintree Javascript files included in index.html.

Community
  • 1
  • 1
Jenna S
  • 616
  • 1
  • 6
  • 24
  • Any chance you can tell me if you tried installing via npm as specified here: https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3#npm - if so, any luck? If possible I'd prefer to avoid including JS directly from Braintree's servers. – Kevin Mitchell Jul 07 '17 at 13:51
  • Haven't tried this. I don't think I saw this option when I was trying to do this. I will give it a shot. Thanks! – Jenna S Jul 21 '17 at 18:44
  • For what it's worth, this is now what I'm doing, using braintree through angular directly (including the typings, etc). I installed through npm. Seems to work so far! – Kevin Mitchell Jul 24 '17 at 12:59
  • @KevinMitchell can you let me know how you got it working through npm? – nareeboy Aug 31 '17 at 07:17