嵌入结构元素
简单的 Ember 包装 条纹元素。 。 。 .
想要的维护者
如果你能抽出时间 帮助维持这个加登, 请让我们知道 解析器 adopted-ember-addons 频道或打开一个问题.
特征
- 弹出
<script src="https://js.stripe.com/v3/"></script>输入您的申请<body> - 初始化
Stripe使用您的可公布密钥 - 输入 a
stripev3服务到您的控制器中, 这样您就可以使用通常可用的函数stripe对象(参见 https://stripe.com/docs/stripe-js/ reference#the-stripe-object 互联网档案馆的存檔,存档日期2014-12-22:stripe.elements()stripe.confirmCardPayment()stripe.createToken()stripe.createSource()stripe.createPaymentMethod()stripe.retrieveSource()stripe.paymentRequest()stripe.redirectToCheckout()stripe.retrievePaymentIntent()stripe.handleCardPayment()stripe.handleCardAction()stripe.confirmPaymentIntent()stripe.handleCardSetup()stripe.confirmCardSetup()stripe.retrieveSetupIntent()stripe.confirmSetupIntent()
- 简单,可配置的 Ember 组件像
<StripeCard/>(在上图中被删除)
安装
ember install @adopted-ember-addons/ember-stripe-elements
中断更改
2.0.0版 (中文(简体) )
测试助手需要从“ 通过- ember- addons/ ember- stripe- 要素/ test- support” 导入
兼容性
- Ember.js v3.24 或以上 (中文(简体) )
- Ember CLI v3.24 或以上 (中文(简体) )
- 节点.js v12 或以上
配置
Ưμ㼯A
你必须设置你的 可公布密钥 内 config/environment.js。 。 。 .
还有.., 条形选项 包含您想要配置的可选值.
ENV.stripe = {
publishableKey: 'pk_thisIsATestKey',
stripeOptions: {
stripeAccount: 'acct_test_account',
locale: 'en',
},
};
模仿花纹 API
您可以配置要被嘲笑的条纹 API 而不是从中加载 https://js.stripe.com/v3/。用于测试.
ENV.stripe = {
mock: true,
};
启用时, a 缩写对象 将指派给 window.Stripe 当您的应用程序初始化.
在测试中使用"花脸"模型时,您可能需要根据您这样的测试需求来推翻模型的方法:
this.owner.lookup('service:stripev3').createToken = () => ({ token: { id: 'token' } });
测试和模拟用户输入
当一个"stripe-element"被即时化,在DOM中,基础 stripeElement 可通过 stripev3 服务。 通话 stripeService.getActiveElements() 将返回这些本地条纹元素.
这主要用于测试. Frade使一个在测试环境中大多无法进入的iframe 无法模拟用户输入.
您可以通过制作 stripeElement 发出相容事件,这是在测试时对结果的合理模拟.
这一加法包括一些为此目的可以从条纹模具中进口的方便用品.
import StripeMock, { stripeEventUtils } from '@adopted-ember-addons/ember-stripe-elements/test-support';
hooks.beforeEach(() => window.Stripe = StripeMock);
stripeEventUtils.triggerReady(stripeElement);
stripeEventUtils.triggerBlur(stripeElement);
stripeEventUtils.triggerFocus(stripeElement);
stripeEventUtils.triggerIncomplete(stripeElement);
stripeEventUtils.triggerComplete(stripeElement);
stripeEventUtils.triggerError(stripeElement, additionalArgs);
stripeEventUtils.triggerChange(stripeElement, additionalArgs);
两者 triggerError 财务报告和审定财务报表 triggerChange 接受第二个参数,该参数可用于覆盖此加通提供的默认事件属性.
注意:这些不会实际改变"条纹UI"的内容,只是强迫条纹Element释放正在被听取的事件. 警告:这些公用设施依赖于无证方法,因此这在未来可能会被打破. 这只用于试验环境。 这些事件也并非详尽无遗,而是涵盖核心用户流量.
import StripeMock, { stripeEventUtils } from '@adopted-ember-addons/ember-stripe-elements/test-support';
module('...', function (hooks) {
hooks.beforeEach(() => window.Stripe = StripeMock);
test('user enters valid data', function (assert) {
//...some code rendering a {{stripe element}}
const [stripeElement] = stripeService.getActiveElements();
stripeEventUtils.triggerComplete(stripeElement);
...
});
});
懒惰装入
需要时可以配置花脸.js来作懒载.
ENV.stripe = {
lazyLoad: true,
};
启用时, Frede.js 将不会被加载,直到您调用 load() 函数。 最好在路由中称这个功能 beforeModel 钩.
// subscription page route
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class SubscriptionRoute extends Route {
@service('stripev3') stripe;
beforeModel() {
return this.stripe.load();
}
}
注意 load 函数返回 a Promise。通过返回这个承诺,您保证在路由铺设到下一条路之前 Frede 完全装入 model 钩.
也可以通过 publishableKey 和可选 stripeOptions 页:1 load 函数.
this.stripe.load('pk_thisIsATestKey', {
locale: 'en',
stripeAccount: 'acct_24BFMpJ1svR5A89k',
});
构成部分
基本情况
每个组成部分将:
- 接受相同的数组
options条纹元素接受 - 打电话
update条纹上element若为options正在更新 - 将 JavaScript 事件装入动作
- 条纹山自己的
StripeElement在一个<div role="mount-point">打开didInsertElement - 卸载
willDestroyElement - 提供进入
stripev3服务 - 使用 CSS 类名称
.ember-stripe-element - 拥有一个CSS类,用于符合组件名称的特定元素,例如.
<EmberStripeCard/>有课.ember-stripe-card - 划到一个街区
- 接受
autofocus=true直接通过组件,例如:.<StripeCard @autofocus={{true}}/>
每个组成部分都从
StripeElement基础组件,该组件不暴露于您的应用程序.
行动
部件都泡了起来 由条纹元素处理的 JavaScript 事件 element.on() 使用下列动作从 Ember 组件中提取:
onReadyonBluronChange(同时设置/取消)stripeError组件上的财产,可随块产生)onFocusonCompleteonError
你可以自己处理这些动作,例如:
<StripeCard @onBlur={{this.onBlur}} />
构成部分类型
这个加词给出了匹配不同组件的组件 元素类型数字 :
条纹建议使用 card 元素 -
这个 <StripeCard /> 组件提供这一投入.
此外,Frede还提供了以下元素,可以用来构建自己的表格来收集卡片细节:
cardNumber:牌号.cardExpiry:卡片过期日期.cardCvc: 该卡的CVC号码.postalCode: ZIP/邮编.
这些是通过我们 <StripeElements /> 产生每个元素类型的子组件的上下文组件:
<StripeElements as |elements|>
<elements.cardNumber />
<elements.cardExpiry />
<elements.cardCvc />
<elements.postalCode />
</StripeElements>
这个
<StripeElements />组件是无标记的组件,所以其中没有任何类等.
要素选项
这个 <StripeElements /> 上下文组件确保所有单个元素都是从
同样的 条纹元素对象。 。 。 .
如果您想要将选项传递给条纹元素对象,请将其传递给 <StripeElements />
内容。 例如,当使用单行时 card 元素 :
<StripeElements @options={{this.elementOptions}} as |elements|>
<elements.card @options={{this.cardOptions}} />
</StripeElements>
或者在创建自己的形式时:
<StripeElements @options={{this.elementsOptions}} as |Elements|>
<Elements.cardNumber @options={{this.cardNumberOptions}} />
<Elements.cardExpiry />
<Elements.cardCvc />
<StripeElements/>
当您创建自己的形式时, 您需要访问 Frede
链接所有单个输入的元素对象。 要做到这一点,使用
onReady 在其中任何一个组件上为对象存储动作
在提交表格时使用。 例如:
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);
}
}
<form {{on "submit" this.handleSubmit}}>
<StripeElements as |Elements|>
<Elements.cardNumber @onReady={{this.handleReady}} />
<Elements.cardExpiry />
<Elements.cardCvc />
<button type="submit">Submit</button>
<StripeElements/>
</form>
有元素的块使用 options
除了上面的简单用法外 <StripeCard />,您也可以向一个区块屈服,它将产生两个 stripeError 对象和 页:1 stripeElement 本身。 。 。 .
举例来说,你可以选择制作 stripeError,如下(可在我们的假应用程序中运行).
<StripeCard @options={{this.options}} as |stripeElement stripeError|>
{{#if stripeError}}
<p class="error">{{stripeError.message}}</p>
{{/if}}
<button {{on "click" (fn this.submit stripeElement)}}>Submit</button>
{{#if this.token}}
<p>Your token: <code>{{this.token.id}}</code></p>
{{/if}}
</StripeCard>
还注意到 submit 移动到 stripeElement您可以在控制器中这样定义 :
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 优先排序。 。 。 .
捐款
叉出这回波,做个新的分行,并发出拉出请求. 请添加测试以合并您的更改 .
安装
git clone [email protected]:adopted-ember-addons/ember-stripe-elements.git
cd ember-stripe-elements
npm install
运行
ember serve
访问您的应用程序 http://localhost:4200 (英语)。 。 。 .
运行测试
ember test
在浏览器中测试自动填充
里面有自签名的证书 /ssl 这将允许您在模拟应用程序内测试自动填充(或者作为您自己在应用程序中进行这项工作的蓝图).
要使用自签证书运行,必须:
- 添加
127.0.0.1 localhost.ssl给您的hosts文件 - 运行应用程序
ember serve --ssl - 将证书添加到您的密钥链并信任它用于 SSL
- 访问应用程序 : https://localhost.ssl:4200 (英语)。 。 。 .
大楼
ember build
关于使用ember-cli的更多信息,请访问 https://ember-cli.com/ (中文(简体) )。 。 。 .
贡献者
多亏了@begedin、@snewcomer、@filipecrosk和@Kilowhisky!