登录
当前位置： 首页 > 软件库 > 程序开发 > >

ember-stripe-elements

A simple Ember wrapper for Stripe Elements.
授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 党浩阔
操作系统 跨平台
开源组织 无
适用人群 未知
软件官网
软件文档
官方下载
安全指数
 软件概览


ember-stripe-elements

This addon is currently unmaintained and has been superseded by @adopted-ember-addons/ember-stripe-elements

A simple Ember wrapper for Stripe Elements.

Features

  • Inject <script src="https://js.stripe.com/v3/"></script> into your application's <body>
  • Initialize Stripe with your publishable key
  • Inject a stripev3 service into your controllers so you can use the functions usually available on the stripe object (see https://stripe.com/docs/stripe-js/reference#the-stripe-object):
    • stripe.elements()
    • 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()
  • Simple, configurable Ember components like {{stripe-card}} (demoed in the gif above)

Installation

$ ember install ember-stripe-elements

Note if you want to use all the functions for v3 (e.g. handleCardPayment()) you need to be using the develop branch after installing add this to your package.json

"dependencies": {
    "ember-stripe-elements": "code-corps/ember-stripe-elements#develop"
  }

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Configuration

Stripe Publishable Key

You must set your publishable key in config/environment.js.

ENV.stripe = {
  publishableKey: 'pk_thisIsATestKey'
};

Mocking the Stripe API

You can configure the Stripe API to be mocked instead of loaded from https://js.stripe.com/v3/. This is useful for testing.

ENV.stripe = {
  mock: true
};

When enabled, a mock Stripe object will be assigned to window.Stripe when your app is initialized.

When using the Stripe mock in tests you will likely need to override the mock's methods according to the needs of your test like so:

this.owner.lookup('service:stripev3').createToken = () => ({ token: { id: 'token' } });

Lazy loading

You can configure Stripe.js to lazy load when you need it.

ENV.stripe = {
  lazyLoad: true
};

When enabled, Stripe.js will not be loaded until you call the load() function on the service. It's best to call this function in a route's beforeModel hook.

// subscription page route

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  stripe: service('stripev3'),

  beforeModel() {
    return this.get('stripe').load();
  }
});

You can also pass publishableKey to the load function.

this.get('stripe').load('pk_thisIsATestKey');

Components

Basics

Every component will:

  • Accept the same array of options accepted by Stripe Elements
  • Call update on the Stripe element if the options are updated
  • Bubble the proper JavaScript events into actions
  • Mount Stripe's own StripeElement in a <div role="mount-point"> on didInsertElement
  • Unmount on willDestroyElement
  • Provide access to the stripev3 service
  • Have the base CSS class name .ember-stripe-element
  • Have a CSS class for the specific element that matches the component's name, e.g. {{ember-stripe-card}} has the class .ember-stripe-card
  • Yield to a block
  • Accept autofocus=true passed directly in the component, e.g. {{stripe-card autofocus=true}}

Every component extends from a StripeElement base component which is not exposed to your application.

Actions

The components bubble up all of the JavaScript events that can be handled by the Stripe Element in element.on() from the Ember component using the following actions:

  • ready
  • blur
  • change (also sets/unsets the stripeError property on the component, which can be yielded with the block)
  • focus
  • complete
  • error

You could handle these actions yourself, for example:

{{stripe-card blur="onBlur"}}

Component types

This addon gives you components that match the different Element types:

Stripe recommends using the their card element - a flexible single-line input that collects all necessary card details.The {{stripe-card}} component provides this input.

Additionally Stripe provides the following elements, which you can use to build your own form to collect card details:

  • cardNumber: the card number.
  • cardExpiry: the card's expiration date.
  • cardCvc: the card's CVC number.
  • postalCode: the ZIP/postal code.

These are provided via our {{stripe-elements}} contextual component, which yields sub-components for each element type:

{{#stripe-elements as |elements|}}
  {{elements.cardNumber}}
  {{elements.cardExpiry}}
  {{elements.cardCvc}}
  {{elements.postalCode}}
{{/stripe-elements}}

The {{stripe-elements}} component is a tagless component, so does not have any classes etc on it.

Elements Options

The {{stripe-elements}} contextual component ensures all the individual elements are created fromthe same Stripe Elements object.

If you want to pass options to the Stripe Elements object, pass them to the {{stripe-elements}}contextual component. For example, when using the single-line card element:

{{#stripe-elements options=elementOptions as |elements|}}
  {{elements.card options=cardOptions}}
{{/stripe-elements}}

Or when creating your own form:

{{#stripe-elements options=elementsOptions as |elements|}}
  {{elements.cardNumber options=cardNumberOptions}}
  {{elements.cardExpiry}}
  {{elements.cardCvc}}
{{/stripe-elements}}

Block usage with element options

In addition to the simple usage above, like {{stripe-card}}, you can also yield to a block, which will yield both an stripeError object and the stripeElement itself.

For example, you can choose to render out the stripeError, as below (runnable in our dummy app).

{{#stripe-card options=options as |stripeElement stripeError|}}
  {{#if stripeError}}
    <p class="error">{{stripeError.message}}</p>
  {{/if}}
  <button {{action "submit" stripeElement}}>Submit</button>
  {{#if token}}
    <p>Your token: <code>{{token.id}}</code></p>
  {{/if}}
{{/stripe-card}}

Also notice the submit action which passes the stripeElement; you could define this in your controller like so:

import Ember from 'ember';
const { Controller, get, inject: { service }, set } = Ember;

export default Controller.extend({
  stripev3: service(),

  options: {
    hidePostalCode: true,
    style: {
      base: {
        color: '#333'
      }
    }
  },

  token: null,

  actions: {
    submit(stripeElement) {
      let stripe = get(this, 'stripev3');
      stripe.createToken(stripeElement).then(({token}) => {
        set(this, 'token', token);
      });
    }
  }
});

Note the naming convention stripeElement instead of element, as this could conflict with usage of element in an Ember component.

Styling

Note that you can use CSS to style some aspects of the components, but keep in mind that the styles object of the options takes precedence.

Contributing

Fork this repo, make a new branch, and send a pull request. Please add tests in order to have your change merged.

Installation

git clone git@github.com:code-corps/ember-stripe-elements.git
cd ember-stripe-elements
npm install

Running

ember serve

Visit your app at http://localhost:4200.

Running Tests

ember test

Testing autofill in browsers

There are self-signed certs in /ssl that will allow you to test autofill inside of the dummy app (or serve as a blueprint for doing this yourself in your own app).

To run using the self-signed certificate, you must:

  • Add 127.0.0.1 localhost.ssl to your hosts file
  • Run the app with ember serve --ssl
  • Add the certificate to your keychain and trust it for SSL
  • Visit the app at https://localhost.ssl:4200.

Building

ember build

For more information on using ember-cli, visit https://ember-cli.com/.

Contributors

Thanks to @begedin, @snewcomer, @filipecrosk, and @Kilowhisky for your early help on this!

 使用案例
 相关资料
  • ember-cli-stripe

    Stripe checkout for Ember Description Simplest way to implement card payments in your Ember app. This addon integrates Stripe's embedded payment form, Checkout.See Stripe Checkout docs. The best docum

  • cashier-stripe

    Introduction Laravel Cashier provides an expressive, fluent interface to Stripe's subscription billing services. It handles almost all of the boilerplate subscription billing code you are dreading wri

  • tipsi-stripe

    tipsi-stripe This library isn't actively maintained now. Please, consider usage of Stripe's official library: https://github.com/stripe/stripe-react-native If for some reason you cannot migrate to it

  • react-express-stripe

    Stripe Server Checkout with React and Express Deprecated due to SCA: A full walkthrough tutorial of implementing this boilerplate project. SCA ready Tutorials: Stripe Server Checkout Stripe Webhook Fu

  • 从Stripe Webhook事件中检索Stripe数据

    问题内容： 在Java中实现条纹Webhook时，我成功获取了JSON格式的事件对象。问题是我无法获取嵌套JSON中的详细信息，例如数量，subscription_id，属性。从类对象获取这些值也不可用。你能告诉我如何提取这些值吗 我得到以下回应： 我想要得到的值一样，等等。但是，当我试图让使用事件对象中的数据，我不能简单地做的。我将如何提取数据。 问题答案： 好吧，我已经解决了这个问题。真正的问

  • 客户卡保存在Stripe with Stripe JS中

    我有一个角度作为前端。从那里我可以获得客户卡的详细信息并创建一个令牌。 const{token，error}=等待stripe.createToken（this.card，options）； 我有Laravel作为后端 我需要以条纹形式保存客户卡详细信息，并且需要保存响应详细信息，如最后4位数字。为客户保存多张卡应该是可行的。 注意：最初只需要保存卡详细信息，稍后再付款。 我已经浏览了文档，但我不

同类工具

yFiles FLEXLoganwordfilterRedis ORMSimple ODF APICmarkxChartsJNTemplate

相关阅读

Ember CLI生产失败KeyPress事件在Ember中无法正常工作实时重新加载不适用于ember-cli将节点模块添加到ember CLI应用如何定期更新Ember模型（例如在setInterval中）？

相关文章

相关问答

使用javascript集成stripe connect解析com.stripe失败：stripe-androidStripe connect-支付时保存卡Stripe CLI支付意图连接ruby on rails中的Stripe SCA签出

相关文档

快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.