@abcum/ember-stripe 中文文档教程

Question

ember-stripe

用于在 Ember.js 应用程序中使用 Stripe 和 Stripe Checkout 的插件。

Usage

Installation

ember 安装@abcum/ember-stripe

Introduction

ember-stripe 插件为 Stripe a 添加了功能 nd 从 Ember.js 应用程序中进行 Stripe Checkout。 Stripe.js 脚本自动包含在 index.html 文件中，使用 Stripe Checkout 时，脚本会在需要时异步加载。 该插件当前使用的是 Stripe.js V3，尚不支持 Apple Pay。

Examples

Stripe Elements

将 Stripe Elements 卡片元素添加到页面。

{{stripe-element on-error=(action (mut error)) on-complete=(action (mut show))}}

{{#if error}}
    <error>{{error.message}}</error>
{{/if}}

{{#if show}}
    <button {{action 'makePayment'}}>Pay now</button>
{{/if}}

import Ember from "ember";

export default Ember.Controller.extend({
    stripe: Ember.inject.service(),
    actions: {
        makePayment() {
            let stripe = this.get('stripe');
            let token = stripe.createToken(stripe.element).then(token => {
                // Send token to the payment processing server
            });
        },
    }
});

Install options

有必要在您的环境配置中提供 stripe.publishableKey 属性。

// config/environment.js
module.exports = function(environment) {
    return {
        stripe: {
            publishableKey: 'pk_SGryXYpfqh14iYO7YdFKQVhf',
        },
    }
};

Elements options

这些额外的元素配置选项可以传递到 stripe-element 组件中。 有关每个选项的用法的更多信息，请查看 Stripe 元素参考 页面。

Attribute	Default	Description
classes	{}	Set custom class names on the element when the input is in a particular state.
hidePostalCode	false	Hide the postal code field.
hideIcon	false	Hides any icons in the Element.
iconStyle	"default"	Appearance of the icons in the Element.
placeholder	""	Customize the placeholder text.
style	{}	Customize appearance using CSS properties.
type	"card"	Can be one of card, cardNumber, cardExpiry, cardCvc, and postalCode.

Stripe Checkout

将 Stripe Checkout 元素添加到页面。

{{#stripe-checkout amount=20000 currency='EUR' on-token=(action 'sendTokenToServer')}}
    <button>Pay now</button>
{{/stripe-checkout}}

并在结帐弹出窗口打开或关闭时运行操作。

{{#stripe-checkout amount=20000 on-open=(action 'openedPopup') on-close=(action 'closedPopup')}}
    <button>Pay now</button>
{{/stripe-checkout}}

Install options

有必要在您的环境配置中提供 stripe.publishableKey 属性。

// config/environment.js
module.exports = function(environment) {
    return {
        stripe: {
            publishableKey: 'pk_SGryXYpfqh14iYO7YdFKQVhf',
            checkout: {
                name: 'Abcum Ltd.',
                bitcoin: false,
                allowRememberMe: false,
            }
        },
    }
};

Checkout options

这些额外的结帐配置选项可以传递到 stripe-checkout 组件中，或者在 stripe.checkout 环境配置中定义。 有关每个选项的用法的更多信息，请查看 Stripe Checkout Reference 页面。

Attribute	Default	Description
allowRememberMe	true	Specify whether to include the option to Remember Me for future purchases.
amount	0	The amount (in pence) that's shown to the user.
billingAddress	false	Specify whether Checkout should collect the user's billing address.
bitcoin	false	Specify whether to accept Bitcoin.
currency	"USD"	The currency of the amount (3-letter ISO code).
description	""	A description of the product or service being purchased.
email	""	Prefill the email address, if it is already known.
image	""	A relative or absolute URL pointing to a square image of your brand or product.
locale	"auto"	The language and locale to use when displaying the Checkout.
name	""	The name of your company or website.
panelLabel	""	The label of the payment button in the Checkout form.
shippingAddress	false	Specify whether Checkout should collect the user's shipping address.
zipCode	false	Specify whether Checkout should validate the billing postal code.

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)