# @chargebee/chargebee-js-angular-wrapper 中文文档

规范地址：https://npmcn.com/package/%40chargebee/chargebee-js-angular-wrapper/

版本：5\.0\.3
npm 元数据更新时间：2025-12-10T06:09:28.876Z
中文译文更新时间：2026-11-09T10:44:02.702Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chargebee/chargebee-js-angular-wrapper
原文对照：https://npmcn.com/package/%40chargebee/chargebee-js-angular-wrapper/?lang=original
项目主页：https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-angular#readme
源码仓库：https://github.com/chargebee/chargebee-js-wrappers

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：136 kB，32 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core ^18\.2\.13，@angular/common ^18\.2\.13
- 首次发布：2019-04-29T09:26:38.087Z
- 最新版本发布：2025-10-27T09:47:33.385Z
- 近 30 天下载量：7264（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 0 个）

## 中文简介

充电器的角包装器。 js 组件

## 安装

```sh
npm install @chargebee/chargebee-js-angular-wrapper
```

也可以使用：`pnpm add @chargebee/chargebee-js-angular-wrapper`、`yarn add @chargebee/chargebee-js-angular-wrapper`、`bun add @chargebee/chargebee-js-angular-wrapper`

## README

# 充电蜂 JS 角包装器

充电器组件的角包装器

## 实例

详细例子: [点击这里](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/angular-app#readme)

## 现场直播

查看实况演示 [这里](https://www.recur.in/components-examples/angular/#/example1)

## 安装

从 npm 安装 :

```bash
npm install @chargebee/chargebee-js-angular-wrapper
```

## 使用量

充电蜂组件需要您以 `site` 财务报告和审定财务报表 `publishableKey`

> 想知道在哪里获得您的 API 密钥吗 ? [参考这里](https://www.chargebee.com/docs/api_keys.html)

在你身边 `index.html`数字 :

```html
<html>
  <head>
    ...
    <script src="https://js.chargebee.com/v2/chargebee.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

### 基本用途

在您的角构件中

构成部分.html

```html
<div class="cell example example3" id="example-3" style="padding: 1em">
  <form>
    <div cbCardField id="card-field" (ready)="onReady($event)"></div>
    <button (click)="onTokenize($event)">Submit</button>
  </form>
</div>
```

组件.ts

```js
import { Component } from '@angular/core';

declare var Chargebee;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
   imports: [
    RouterOutlet,
    CardFieldDirective,
    CvvFieldDirective,
    NumberFieldDirective,
    ExpiryFieldDirective,
  ],
})
export class AppComponent {
  cardComponent = null;

  constructor(...) {
    ...
    Chargebee.init({
      site: 'your-site'
      publishableKey: 'your-publishable-key'
    })
  }

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  }

  onTokenize = (event) => {
    event.preventDefault();

    this.cardComponent.tokenize().then(data => {
      console.log('chargebee token', data.token)
    });
  }
}

```

### 一个更为复杂的例子是:

构成部分.html

```html
<div class="cell example example3" id="example-3" style="padding: 1em">
  <form>
    <div cbCardField id="card-field" [fonts]="fonts" [styles]="styles" locale="en" [showTestCards]="true" [classes]="classes" (ready)="onReady($event)">
      <div id="card-number" cbNumberField class="field empty" placeholder="4111 1111 1111 1111" (ready)="setFocus($event)" (change)="onChange($event)"></div>
      <div id="card-expiry" cbExpiryField class="field empty" placeholder="MM / YY" (change)="onChange($event)"></div>
      <div id="card-cvv" cbCvvField class="field empty" placeholder="CVV" (change)="onChange($event)"></div>
    </div>
    <div id="errors">{{errorMessage}}</div>
    <button id="submit-button" (click)="onSubmit($event)">Pay 25$</button>
  </form>
</div>
```

组件.ts

```js
import { Component, ChangeDetectorRef, HostListener } from "@angular/core";
declare var Chargebee;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  standalone: true,
   imports: [
    RouterOutlet,
    CardFieldDirective,
    CvvFieldDirective,
    NumberFieldDirective,
    ExpiryFieldDirective,
  ],
})
export class AppComponent {
  errorMessage = "";
  changeDetectorRef: ChangeDetectorRef;
  cardComponent = null;

  constructor(changeDetectorRef: ChangeDetectorRef) {
    this.changeDetectorRef = changeDetectorRef;
  }

  errors = {};
  classes = {
    focus: "focus",
    complete: "complete-custom-class",
    invalid: "invalid",
    empty: "empty",
  };
  fonts = ["https://fonts.googleapis.com/css?family=Open+Sans"];
  styles = {
    base: {
      color: "#fff",
      fontWeight: 600,
      fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif",
      fontSize: "16px",
      fontSmoothing: "antialiased",

      ":focus": {
        color: "#424770",
      },

      "::placeholder": {
        color: "#9BACC8",
      },

      ":focus::placeholder": {
        color: "#CFD7DF",
      },
    },
    invalid: {
      color: "#fff",
      ":focus": {
        color: "#FA755A",
      },
      "::placeholder": {
        color: "#FFCCA5",
      },
    },
  };

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  };

  setFocus(field) {
    field.focus();
  }

  onChange = (status) => {
    let errors = {
      ...this.errors,
      [status.field]: status.error,
    };
    this.errors = errors;
    let { message } =
      Object.values(errors)
        .filter((message) => !!message)
        .pop() || {};
    this.errorMessage = message;
    this.changeDetectorRef.detectChanges();
  };

  onSubmit = (event) => {
    event.preventDefault();
    this.cardComponent.tokenize().then((data) => {
      console.log("chargebee token", data.token);
    });
  };
}
```

### 3DS 授权

在您的角构件中

构成部分.html

```html
<div class="cell example example3" id="example-3" style="padding: 1em">
  <form>
    <div cbCardField id="card-field" (ready)="onReady($event)"></div>
    <button (click)="authorize($event)">Submit</button>
  </form>
</div>
```

组件.ts

```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
   standalone: true,
   imports: [
    RouterOutlet,
    CardFieldDirective,
    CvvFieldDirective,
    NumberFieldDirective,
    ExpiryFieldDirective,
  ],
})
export class AppComponent {
  cardComponent = null;
  intent = null;
  additionalData = {
    // Additional data to improve the chances of frictionless flow
  }

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  }

  createPaymentIntent() {
    // make ajax call to your server to create a paymentIntent
    ...
    this.intent = paymentIntent
  }

  authorize = (event) => {
    event.preventDefault();

    this.cardComponent.authorizeWith3ds(this.intent, this.additionalData).then(authorizedIntent => {
      console.log('3DS Authorization success', authorizedIntent.id)
    });
  }
}

```

## 指令和APIs

#### cbCard 外地指令([文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)(中文(简体) )

| 属性 | 说明 | 数据类型 |
| --- | --- | --- |
| `fonts` | 字体面或链接的阵列 | [字体](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `classes` | 用于替换各种 CSS 类名的集 [事件](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [类](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `locale` | 语言代码 | [语言](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `showTestCards` | 添加在测试站点显示测试卡的能力 | 布尔 |
| `styles` | 样式定制集 | [样式](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `placeholder` | 卡片字段的一组占位符 | [占位符](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |

##### 活动[文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)(中文(简体) )

| 道具 | 说明 | 参数 |
| --- | --- | --- |
| `(ready)` | 组件挂起并准备好时触发器 | [外地](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) |
| `(change)` | 每个州变化的触发器 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(focus)` | 当组件被聚焦时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(blur)` | 组件模糊时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |

#### 个别外地指示[文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)(中文(简体) )

-   cb 外地人数
-   cb 爆炸场
-   cbCvv 战地

| 道具 | 说明 | 数据类型 |
| --- | --- | --- |
| `styles` | 二元字段样式 | [样式](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) |
| `placeholder` | 字段的占位符 | 字符串 |

##### 活动支持( E)[文档](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)(中文(简体) )

| 道具 | 说明 | 参数 |
| --- | --- | --- |
| `(ready)` | 组件挂起并准备好时触发器 | [外地](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) |
| `(change)` | 每个州变化的触发器 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(focus)` | 当组件被聚焦时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(blur)` | 组件模糊时触发 | [战地状态](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |

## 参考:

[充气管组件-联署文件](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration)

## 支助

是否有人询问执行情况? 联系 [支持@ forcebee.com](mailto:support@chargebee.com)

## 常见问题

### @chargebee/chargebee-js-angular-wrapper 是什么？

充电器的角包装器。 js 组件

### 如何安装 @chargebee/chargebee-js-angular-wrapper？

在项目目录运行 npm install @chargebee/chargebee-js-angular-wrapper，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^18\.2\.13）、@angular/common（^18\.2\.13）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chargebee/chargebee-js-angular-wrapper 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @chargebee/chargebee-js-angular-wrapper 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @chargebee/chargebee-js-angular-wrapper 可以商用吗？

@chargebee/chargebee-js-angular-wrapper 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chargebee/chargebee-js-angular-wrapper 的下载量有多少？

根据 npm 官方下载统计，@chargebee/chargebee-js-angular-wrapper 在 2026/10/10 – 2026/11/08 这 30 天内被下载 7,264 次，日均约 242 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chargebee/chargebee-js-angular-wrapper 还在维护吗？

最新版本 5\.0\.3 发布于 2025/10/27（1 年前）；至今共发布 18 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。