Angular 14集成Braintree报错：options.authorization必填问题求助

问题描述 #

集成Braintree支付时控制台报错：BraintreeError: options.authorization is required when instantiating a client，导致支付UI无法输入卡号、有效期和CVV。

错误原因 #

核心问题是异步请求的时序错误：你在ngOnInit里同时调用了getToken()和createBraintreeUI()，但getToken()是HTTP异步请求，createBraintreeUI()执行时，后端返回的Client Token还没赋值给CToken，此时CToken是undefined，不符合Braintree初始化客户端的必填参数要求。

解决方法 #

1. 调整异步逻辑，确保拿到Token后再初始化UI #

把初始化Braintree UI的代码放到获取Token的回调函数里，保证CToken有值后再执行：

方式一：使用async/await重构

ngOnInit(): void {
  this.getToken();
}

async getToken() {
  try {
    // 把HTTP请求转为Promise，等待返回结果
    const response = await this.http.get('https://localhost:5001/api/paypal').toPromise();
    this.CToken = response;
    console.log('获取到Client Token:', this.CToken);
    // 拿到Token后再初始化UI
    this.createBraintreeUI();
  } catch (error) {
    console.error('获取Client Token失败:', error);
  }
}

方式二：在subscribe回调中执行初始化

如果不习惯async/await，直接修改原有的getToken方法：

getToken() {
  this.http.get('https://localhost:5001/api/paypal').subscribe({
    next: response => {
      this.CToken = response;
      console.log('获取到Client Token:', this.CToken);
      // 回调内触发UI初始化
      this.createBraintreeUI();
    },
    error: error => console.error('获取Client Token失败:', error)
  });
}

ngOnInit(): void {
  this.getToken(); // 只调用获取Token的方法即可
}

2. 验证后端返回的Token格式 #

打开浏览器开发者工具的Network面板，查看https://localhost:5001/api/paypal接口的返回值：

• 如果返回的是纯字符串（比如eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJ...），那么前端直接赋值this.CToken = response没问题；
• 如果返回的是JSON对象（比如{"clientToken": "xxx"}），需要修改前端代码为this.CToken = response.clientToken。

3. 增加空值判断（可选） #

在createBraintreeUI里先判断CToken是否有效，避免无效执行：

createBraintreeUI() {
  if (!this.CToken) {
    console.error('Client Token未获取到，无法初始化Braintree');
    return;
  }
  // 原有的Braintree客户端初始化代码
  braintree.client.create({
    authorization: this.CToken
  }).then(/* ... 后续逻辑 ... */);
}

替代实现方案：使用Braintree官方Angular组件 #

如果手动集成容易出错，可以使用Braintree官方提供的@braintree/angular组件库，简化集成流程：

1. 安装依赖：

npm install @braintree/angular braintree-web

2. 在Angular模块中导入BraintreeModule：

import { NgModule } from '@angular/core';
import { BraintreeModule } from '@braintree/angular';

@NgModule({
  imports: [
    // ... 其他模块
    BraintreeModule
  ]
})
export class AppModule { }

3. 组件中使用服务初始化Hosted Fields：

import { Component, OnInit } from '@angular/core';
import { BraintreeService } from '@braintree/angular';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-paypal',
  templateUrl: './paypal.component.html',
})
export class PaypalComponent implements OnInit {
  hostedFieldsInstance: any;
  cardholdersName: string;

  constructor(private braintreeService: BraintreeService, private http: HttpClient) {}

  async ngOnInit() {
    try {
      const token = await this.http.get('https://localhost:5001/api/paypal').toPromise();
      // 初始化Hosted Fields
      this.hostedFieldsInstance = await this.braintreeService.createHostedFields({
        authorization: token,
        fields: {
          number: { selector: '#card-number', placeholder: '1111 1111 1111 1111' },
          cvv: { selector: '#cvv', placeholder: '111' },
          expirationDate: { selector: '#expiration-date', placeholder: 'MM/YY' }
        }
      });
    } catch (error) {
      console.error('初始化Braintree失败:', error);
    }
  }

  async tokenizeUserDetails() {
    try {
      const payload = await this.hostedFieldsInstance.tokenize({
        cardholderName: this.cardholdersName
      });
      console.log('支付凭证Nonce:', payload.nonce);
      // 将payload.nonce提交到后端完成支付
    } catch (error) {
      console.error('Tokenize失败:', error);
    }
  }
}

内容的提问来源于stack exchange，提问作者Peter Parker