2017-01-20 2 views
2

Braintree 클라이언트 샘플 (https://developers.braintreepayments.com/start/hello-client/javascript/v3)이 Angular2에서 작동하려고합니다. 저는 Angular2 (및 Javascript)에 매우 익숙합니다.braintree on Angular2

우선, "braintree-web"을 추가해야하는지 잘 모르겠다. package.json의 의존성 아래에서 "^ 3.6.3". 또는 index.html을 아래

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

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

를 추가합니다. 나는 둘 다 끝내었다.

npm install을 실행 한 후 node_modules/braintree-web을 보면 .js 파일 만 보입니다. ts 파일이 보이지 않습니다. 이게 문제 야? 이것에 braintree-web을 사용하지 않겠습니까? 이 패키지는 Angular1 용으로 작성 되었습니까? 실제로 braintree-web을 사용해야한다면 index.html에 2 개의 js 파일을 포함시켜야합니까? braintree-web에 이미 포함되어 있지 않습니까? 내 payment.component.ts 파일에서

, 나는 복사하여 브레인 클라이언트 코드를 붙여 :

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

:
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) { 

내가 TSC를 실행하려고

, 나는 다음과 같은 오류를 받고 있어요을

내가 뭘 잘못하고 있니?

+0

braintree 모듈을 app.module.ts에 등록 했습니까? http://stackoverflow.com/questions/40353886/trying-to-integrate-braintree-web-into-angular2 – freshbm

+0

감사. 나는 그 사람이 npm install @ types/braintree-web @ 3.0.1을 추가 한 것을 보았습니다. 실제로 뭔가 효과가 있습니다. 지금까지 index.html에 js 파일을 실제로 포함해야한다는 것을 알았습니다. 유형과 함께 braintree 패키지가 필요합니다. 하지만 ... 이제 Braintree의 샘플 코드에 문제가 있습니다. 기본적으로 나중에 사용하기 위해 클래스의 temp 멤버 변수에 쓰려고 시도하는 서버에서 객체를 다시 가져옵니다. this.temp = hostedFieldsInstance. 하지만, 그렇게하면 오류가 발생합니다. Uncaught TypeError : 정의되지 않은 (...) 속성 'temp'을 읽을 수 없습니다. 어떤 아이디어? –

+0

@ JennaS 어떻게 작동 시키셨습니까? 내가 한 일을 복사했지만 여전히 '모듈을 찾을 수 없습니다'라는 오류가 발생합니다. – nareeboy

답변

5

Angular2는 강력한 형식이므로 Braintree에서 제공하는 Javascript 샘플 코드를 사용할 수 없습니다. 이러한 모든 함수에 대해 정의 된 유형이 필요합니다. 그래서 Trying to integrate braintree-web into Angular2은 @ types/braintree-web이 (package.json에) 설치되어 있어야한다는 첫 번째 단서가되었습니다. 이것들은 Braintree의 공식 형식은 아니지만, 오픈 소스의 기여는 http://definitelytyped.org/입니다. Braintree 지원에 도움을 요청했고 Angular2에서 Javascript 샘플 코드를 사용할 수 있다고 언급했지만 각 매개 변수의 유형을 지정해야합니다. 유형 패키지가 자신의 코드가 아니기 때문에 유형 패키지를 권장하지 못했습니다.

파일 상단에는 더 이상 가져 오기가 필요하지 않지만 index.html에 포함 된 2 개의 Braintree Javascript 파일이 필요합니다.

+0

여기에 지정된 npm을 통해 설치를 시도했는지 알 수 있습니다. https : //developers.braintreepayments .com/guides/client-sdk/setup/javascript/v3 # npm - 만약 그렇다면 운이 좋을까요? 가능하다면 Braintree의 서버에서 직접 JS를 포함하는 것을 피하는 것이 좋습니다. –

+0

시도하지 않았습니다. 나는이 일을하려고 할 때이 옵션을 보지 못했다고 생각합니다. 나는 한 발을 내줄 것이다. 감사! –

+0

그게 무슨 가치가 있는지, 이것은 지금 내가하고있는 일이다. (예를 들어, 타이핑 등을 포함하는) 각도를 통한 braintree를 사용한다. 나는 npm을 통해 설치했다. 지금까지 일하는 것 같습니다! –