` 打开 `didInsertElement`
- 卸载 `willDestroyElement`
- 提供进入 `stripev3` 服务
- 使用 CSS 类名称 `.ember-stripe-element`
- 拥有一个CSS类,用于符合组件名称的特定元素,例如. `
` 有课 `.ember-stripe-card`
- 划到一个街区
- 接受 `autofocus=true` 直接通过组件,例如:. `
`
> 每个组成部分都从 `StripeElement` 基础组件,该组件不暴露于您的应用程序.
### 行动
部件都泡了起来 [由条纹元素处理的 JavaScript 事件 `element.on()`](https://stripe.com/docs/elements/reference#element-on) 使用下列动作从 Ember 组件中提取:
- `onReady`
- `onBlur`
- `onChange` (同时设置/取消) `stripeError` 组件上的财产,可随块产生)
- `onFocus`
- `onComplete`
- `onError`
你可以自己处理这些动作,例如:
```hbs
```
### 构成部分类型
这个加词给出了匹配不同组件的组件 [元素类型](https://stripe.com/docs/elements/reference#element-types)数字 :
条纹建议使用 `card` 元素 - 这个 `` 组件提供这一投入.
此外,Frede还提供了以下元素,可以用来构建自己的表格来收集卡片细节:
- `cardNumber`:牌号.
- `cardExpiry`:卡片过期日期.
- `cardCvc`: 该卡的CVC号码.
- `postalCode`: ZIP/邮编.
这些是通过我们 `` 产生每个元素类型的子组件的上下文组件:
```hbs
```
> 这个 `` 组件是无标记的组件,所以其中没有任何类等.
### 要素选项
这个 `` 上下文组件确保所有单个元素都是从 同样的 [条纹元素对象](https://stripe.com/docs/stripe-js/reference#the-elements-object)。 。 。 .
如果您想要将选项传递给条纹元素对象,请将其传递给 `` 内容。 例如,当使用单行时 `card` 元素 :
```hbs
```
或者在创建自己的形式时:
```hbs
```
当您创建自己的形式时, 您需要访问 Frede 链接所有单个输入的元素对象。 要做到这一点,使用 `onReady` 在其中任何一个组件上为对象存储动作 在提交表格时使用。 例如:
```js
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class FormComponent extends Component {
stripeElement = null;
@action
handleReady(stripeElement) {
this.stripeElement = stripeElement;
}
@action
handleSubmit(evt) {
evt.preventDefault();
this.args.onSubmit(this.stripeElement);
}
}
```
```hbs
```
### 有元素的块使用 `options`
除了上面的简单用法外 ``,您也可以向一个区块屈服,它将产生两个 `stripeError` 对象和 [页:1 `stripeElement` 本身](https://stripe.com/docs/elements/reference#the-element)。 。 。 .
举例来说,你可以选择制作 `stripeError`,如下(可在我们的假应用程序中运行).
```hbs
{{#if stripeError}}
{{stripeError.message}}
{{/if}}
{{#if this.token}}
Your token: {{this.token.id}}
{{/if}}
```
还注意到 `submit` 移动到 `stripeElement`您可以在控制器中这样定义 :
```js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { tracked } from "@glimmer/tracking";
import { action } from '@ember/object';
export default class SubscriptionController extends Controller {
@service stripev3;
options = {
hidePostalCode: true,
style: {
base: {
color: '#333',
},
},
};
@tracked token = null;
@action
async submit(stripeElement) {
const { token } = await this.stripe.createToken(stripeElement);
this.token = token;
}
}
```
注意命名公约 `stripeElement` 改为 `element`,因为这可能与使用 `element` 在一个Ember组件.
### 样式
请注意,您可以使用 CSS 来样式组件的一些方面,但请注意 [页:1 `styles` 目标 `options` 优先排序](https://stripe.com/docs/elements/reference#element-options)。 。 。 .
## 捐款
叉出这回波,做个新的分行,并发出拉出请求. 请添加测试以合并您的更改 .
### 安装
```sh
git clone git@github.com:adopted-ember-addons/ember-stripe-elements.git
cd ember-stripe-elements
npm install
```
### 运行
```sh
ember serve
```
访问您的应用程序 [http://localhost:4200 (英语)](http://localhost:4200/)。 。 。 .
### 运行测试
```sh
ember test
```
#### 在浏览器中测试自动填充
里面有自签名的证书 `/ssl` 这将允许您在模拟应用程序内测试自动填充(或者作为您自己在应用程序中进行这项工作的蓝图).
要使用自签证书运行,必须:
- 添加 `127.0.0.1 localhost.ssl` 给您的 `hosts` 文件
- 运行应用程序 `ember serve --ssl`
- 将证书添加到您的密钥链并信任它用于 SSL
- 访问应用程序 : [https://localhost.ssl:4200 (英语)](https://localhost.ssl:4200/)。 。 。 .
### 大楼
```sh
ember build
```
关于使用ember-cli的更多信息,请访问 [https://ember-cli.com/ (中文(简体) )](https://ember-cli.com/)。 。 。 .
## 贡献者
多亏了@begedin、@snewcomer、@filipecrosk和@Kilowhisky!
## 常见问题
### @adopted-ember-addons/ember-stripe-elements 是什么？
条纹元素的简单 Ember 包装\.
### 如何安装 @adopted-ember-addons/ember-stripe-elements？
在项目目录运行 npm install @adopted-ember-addons/ember-stripe-elements，或使用 pnpm add / yarn add / bun add。
### @adopted-ember-addons/ember-stripe-elements 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/adopted-ember-addons\_\_ember-stripe-elements 是否存在。
### @adopted-ember-addons/ember-stripe-elements 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js 12\.\* \|\| 14\.\* \|\| \>= 16。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @adopted-ember-addons/ember-stripe-elements 可以商用吗？
@adopted-ember-addons/ember-stripe-elements 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @adopted-ember-addons/ember-stripe-elements 的下载量有多少？
根据 npm 官方下载统计，@adopted-ember-addons/ember-stripe-elements 在 2026/10/05 – 2026/11/03 这 30 天内被下载 30,138 次，日均约 1,005 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @adopted-ember-addons/ember-stripe-elements 还在维护吗？
最新版本 2\.0\.5 发布于 2023/09/01（3 年前）；至今共发布 11 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。