Question

无法将Braintree添加到我的angular2应用

我只想将一个基本版本连接到我的沙箱Braintree帐户，这样我就可以看到一个交易。

下面的创建代码似乎有效。但是，当我点击提交时，它会转到此终点，我看到的只是一个白色屏幕而沙箱中没有任何交易：“/ transaction-endpoint”

我安装了这些：

npm install --save braintree-web npm install @ types / braintree-web @ 3.0.1

这是我的ts档案：

import { Component, OnInit } from '@angular/core';

declare var braintree:any;

@Component({
  moduleId: module.id,
  selector: 'PaymentComponent',  
  templateUrl: 'payment.component.html'
})

export class PaymentComponent implements OnInit{

  constructor(){
  }  

  ngOnInit() {
        //I have a authorization token from the documentation.  
        var authorization = 'RemovedFromStackoverflow';

        var submit = document.querySelector('input[type="submit"]');

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

          //No error occurs
          console.log(clientErr);
          console.log(clientInstance);

          if (clientErr) {
            // Handle error in client creation
            return;
          }

          braintree.hostedFields.create({
            client: clientInstance,
            styles: {
              'input': {
                'font-size': '14pt'
              },
              'input.invalid': {
                'color': 'red'
              },
              'input.valid': {
                'color': 'green'
              }
            },
            fields: {
              number: {
                selector: '#card-number',
                placeholder: '4111 1111 1111 1111'
              },
              cvv: {
                selector: '#cvv',
                placeholder: '123'
              },
              expirationDate: {
                selector: '#expiration-date',
                placeholder: '10/2019'
              }
            }
          }, function (hostedFieldsErr, hostedFieldsInstance) {
            if (hostedFieldsErr) {
              // Handle error in Hosted Fields creation
              return;
            }

             submit.removeAttribute('disabled');
          });
        });
  }
}

这些是我添加到index.html文件中的脚本：

<!-- Load the Client component. -->
<script src="https://js.braintreegateway.com/web/3.6.3/js/client.min.js"></script>

<!-- Load the Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/3.6.3/js/hosted-fields.min.js"></script>

这是我的html文件（来自文档的表格）

        <form id="checkout-form" action="/transaction-endpoint" method="post">
          <div id="error-message"></div>

          <label for="card-number">Card Number</label>
          <div class="hosted-field" id="card-number"></div>

          <label for="cvv">CVV</label>
          <div class="hosted-field" id="cvv"></div>

          <label for="expiration-date">Expiration Date</label>
          <div class="hosted-field" id="expiration-date"></div>

          <input type="hidden" name="payment-method-nonce">
          <input type="submit" value="Pay $10" disabled>
        </form>

无法将Braintree添加到我的angular2应用程序中

0 个答案: