{"id":13907445,"url":"https://github.com/code-corps/ember-stripe-elements","last_synced_at":"2025-07-04T08:35:57.744Z","repository":{"id":18655432,"uuid":"82606760","full_name":"code-corps/ember-stripe-elements","owner":"code-corps","description":"A simple Ember wrapper for Stripe Elements.","archived":false,"fork":false,"pushed_at":"2023-04-01T12:05:51.000Z","size":864,"stargazers_count":64,"open_issues_count":24,"forks_count":41,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-12T20:02:44.776Z","etag":null,"topics":["ember","ember-addon","javascript","stripe","stripe-elements"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-corps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-20T21:56:16.000Z","updated_at":"2024-05-30T02:20:12.000Z","dependencies_parsed_at":"2024-08-07T00:57:27.301Z","dependency_job_id":null,"html_url":"https://github.com/code-corps/ember-stripe-elements","commit_stats":{"total_commits":86,"total_committers":22,"mean_commits":3.909090909090909,"dds":0.7209302325581395,"last_synced_commit":"277198000458843e6321e25a0c503fc9e5b34d47"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-corps%2Fember-stripe-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-corps%2Fember-stripe-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-corps%2Fember-stripe-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-corps%2Fember-stripe-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-corps","download_url":"https://codeload.github.com/code-corps/ember-stripe-elements/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252912996,"owners_count":21824066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","javascript","stripe","stripe-elements"],"created_at":"2024-08-06T23:01:56.513Z","updated_at":"2025-05-07T16:10:46.077Z","avatar_url":"https://github.com/code-corps.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/code-corps/ember-stripe-elements/raw/master/docs/img/ember-stripe-elements.png\" /\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"https://github.com/code-corps/ember-stripe-elements/raw/master/docs/img/demo.gif\" /\u003e\n\u003c/p\u003e\n\n---\n\n[![Build Status](https://travis-ci.org/code-corps/ember-stripe-elements.svg?branch=master)](https://travis-ci.org/code-corps/ember-stripe-elements)\n[![npm version](https://badge.fury.io/js/ember-stripe-elements.svg)](https://badge.fury.io/js/ember-stripe-elements)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-stripe-elements.svg)](https://emberobserver.com/addons/ember-stripe-elements)\n[![Coverage Status](https://coveralls.io/repos/github/code-corps/ember-stripe-elements/badge.svg?branch=master)](https://coveralls.io/github/code-corps/ember-stripe-elements?branch=master)\n[![Inline docs](http://inch-ci.org/github/code-corps/ember-stripe-elements.svg?branch=master)](http://inch-ci.org/github/code-corps/ember-stripe-elements)\n[![MIT License](https://img.shields.io/npm/l/ember-stripe-elements.svg)](https://github.com/code-corps/ember-stripe-elements/blob/master/LICENSE.md)\n\n\u003ch1\u003eember-stripe-elements\u003c/h1\u003e\n\n# This addon is currently unmaintained and has been superseded by [@adopted-ember-addons/ember-stripe-elements](https://github.com/adopted-ember-addons/ember-stripe-elements) \n\nA simple Ember wrapper for [Stripe Elements](https://stripe.com/docs/elements).\n\n## Features\n\n- Inject `\u003cscript src=\"https://js.stripe.com/v3/\"\u003e\u003c/script\u003e` into your application's `\u003cbody\u003e`\n- Initialize `Stripe` with your publishable key\n- 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):\n  - `stripe.elements()`\n  - `stripe.createToken()`\n  - `stripe.createSource()`\n  - `stripe.createPaymentMethod()`\n  - `stripe.retrieveSource()`\n  - `stripe.paymentRequest()`\n  - `stripe.redirectToCheckout()`\n  - `stripe.retrievePaymentIntent()`\n  - `stripe.handleCardPayment()`\n  - `stripe.handleCardAction()`\n  - `stripe.confirmPaymentIntent()`\n  - `stripe.handleCardSetup()`\n  - `stripe.confirmCardSetup()`\n  - `stripe.retrieveSetupIntent()`\n  - `stripe.confirmSetupIntent()`\n- Simple, configurable Ember components like `{{stripe-card}}` (demoed in the gif above)\n\n## Installation\n\n```sh\n$ ember install ember-stripe-elements\n```\n\nNote 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`\n\n```json\n  \"dependencies\": {\n    \"ember-stripe-elements\": \"code-corps/ember-stripe-elements#develop\"\n  }\n```\n\n## Compatibility\n\n* Ember.js v2.18 or above\n* Ember CLI v2.13 or above\n* Node.js v8 or above\n\n## Configuration\n\n### Stripe Publishable Key\n\nYou must set your [publishable key](https://support.stripe.com/questions/where-do-i-find-my-api-keys) in `config/environment.js`.\n\n\n```js\nENV.stripe = {\n  publishableKey: 'pk_thisIsATestKey'\n};\n```\n\n### Mocking the Stripe API\n\nYou can configure the Stripe API to be mocked instead of loaded from `https://js.stripe.com/v3/`. This is useful for testing.\n\n```js\nENV.stripe = {\n  mock: true\n};\n```\n\nWhen enabled, a [mock Stripe object](https://github.com/code-corps/ember-stripe-elements/blob/develop/addon/utils/stripe-mock.js) will be assigned to `window.Stripe` when your app is initialized.\n\nWhen 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:\n\n```js\nthis.owner.lookup('service:stripev3').createToken = () =\u003e ({ token: { id: 'token' } });\n```\n\n### Lazy loading\n\nYou can configure Stripe.js to lazy load when you need it.\n\n```js\nENV.stripe = {\n  lazyLoad: true\n};\n```\n\nWhen 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.\n\n```js\n// subscription page route\n\nimport Route from '@ember/routing/route';\nimport { inject as service } from '@ember/service';\n\nexport default Route.extend({\n  stripe: service('stripev3'),\n\n  beforeModel() {\n    return this.get('stripe').load();\n  }\n});\n```\n\nYou can also pass `publishableKey` to the `load` function.\n\n```js\nthis.get('stripe').load('pk_thisIsATestKey');\n```\n\n## Components\n\n### Basics\n\nEvery component will:\n\n- Accept the same array of [`options`](https://stripe.com/docs/elements/reference#element-options) accepted by Stripe Elements\n- Call `update` on the Stripe `element` if the `options` are updated\n- Bubble the proper JavaScript events into actions\n- Mount Stripe's own `StripeElement` in a `\u003cdiv role=\"mount-point\"\u003e` on `didInsertElement`\n- Unmount on `willDestroyElement`\n- Provide access to the `stripev3` service\n- Have the base CSS class name `.ember-stripe-element`\n- 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`\n- Yield to a block\n- Accept `autofocus=true` passed directly in the component, e.g. `{{stripe-card autofocus=true}}`\n\n\u003e Every component extends from a `StripeElement` base component which is not exposed to your application.\n\n### Actions\n\nThe components bubble up all of [the JavaScript events that can be handled by the Stripe Element in `element.on()`](https://stripe.com/docs/elements/reference#element-on) from the Ember component using the following actions:\n\n- `ready`\n- `blur`\n- `change` (also sets/unsets the `stripeError` property on the component, which can be yielded with the block)\n- `focus`\n- `complete`\n- `error`\n\nYou could handle these actions yourself, for example:\n\n```hbs\n{{stripe-card blur=\"onBlur\"}}\n```\n\n### Component types\n\nThis addon gives you components that match the different [Element types](https://stripe.com/docs/elements/reference#element-types):\n\nStripe recommends using the their `card` element - a flexible single-line input that collects all necessary card details.\nThe `{{stripe-card}}` component provides this input.\n\nAdditionally Stripe provides the following elements, which you can use to build your own form to collect card details:\n\n- `cardNumber`: the card number.\n- `cardExpiry`: the card's expiration date.\n- `cardCvc`: the card's CVC number.\n- `postalCode`: the ZIP/postal code.\n\nThese are provided via our `{{stripe-elements}}` contextual component, which yields sub-components for each element type:\n\n```hbs\n{{#stripe-elements as |elements|}}\n  {{elements.cardNumber}}\n  {{elements.cardExpiry}}\n  {{elements.cardCvc}}\n  {{elements.postalCode}}\n{{/stripe-elements}}\n```\n\n\u003e The `{{stripe-elements}}` component is a tagless component, so does not have any classes etc on it.\n\n### Elements Options\n\nThe `{{stripe-elements}}` contextual component ensures all the individual elements are created from\nthe same [Stripe Elements object](https://stripe.com/docs/stripe-js/reference#the-elements-object).\n\nIf you want to pass options to the Stripe Elements object, pass them to the `{{stripe-elements}}`\ncontextual component. For example, when using the single-line `card` element:\n\n```hbs\n{{#stripe-elements options=elementOptions as |elements|}}\n  {{elements.card options=cardOptions}}\n{{/stripe-elements}}\n```\n\nOr when creating your own form:\n\n```hbs\n{{#stripe-elements options=elementsOptions as |elements|}}\n  {{elements.cardNumber options=cardNumberOptions}}\n  {{elements.cardExpiry}}\n  {{elements.cardCvc}}\n{{/stripe-elements}}\n```\n\n### Block usage with element `options`\n\nIn 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](https://stripe.com/docs/elements/reference#the-element).\n\nFor example, you can choose to render out the `stripeError`, as below (runnable in our dummy app).\n\n```hbs\n{{#stripe-card options=options as |stripeElement stripeError|}}\n  {{#if stripeError}}\n    \u003cp class=\"error\"\u003e{{stripeError.message}}\u003c/p\u003e\n  {{/if}}\n  \u003cbutton {{action \"submit\" stripeElement}}\u003eSubmit\u003c/button\u003e\n  {{#if token}}\n    \u003cp\u003eYour token: \u003ccode\u003e{{token.id}}\u003c/code\u003e\u003c/p\u003e\n  {{/if}}\n{{/stripe-card}}\n```\n\nAlso notice the `submit` action which passes the `stripeElement`; you could define this in your controller like so:\n\n```js\nimport Ember from 'ember';\nconst { Controller, get, inject: { service }, set } = Ember;\n\nexport default Controller.extend({\n  stripev3: service(),\n\n  options: {\n    hidePostalCode: true,\n    style: {\n      base: {\n        color: '#333'\n      }\n    }\n  },\n\n  token: null,\n\n  actions: {\n    submit(stripeElement) {\n      let stripe = get(this, 'stripev3');\n      stripe.createToken(stripeElement).then(({token}) =\u003e {\n        set(this, 'token', token);\n      });\n    }\n  }\n});\n```\n\nNote the naming convention `stripeElement` instead of `element`, as this could conflict with usage of `element` in an Ember component.\n\n### Styling\n\nNote 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](https://stripe.com/docs/elements/reference#element-options).\n\n## Contributing\n\nFork this repo, make a new branch, and send a pull request. Please add tests in order to have your change merged.\n\n### Installation\n\n```sh\ngit clone git@github.com:code-corps/ember-stripe-elements.git\ncd ember-stripe-elements\nnpm install\n```\n\n### Running\n\n```sh\nember serve\n```\n\nVisit your app at [http://localhost:4200](http://localhost:4200).\n\n### Running Tests\n\n```sh\nember test\n```\n\n#### Testing autofill in browsers\n\nThere 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).\n\nTo run using the self-signed certificate, you must:\n\n- Add `127.0.0.1 localhost.ssl` to your `hosts` file\n- Run the app with `ember serve --ssl`\n- Add the certificate to your keychain and trust it for SSL\n- Visit the app at [https://localhost.ssl:4200](https://localhost.ssl:4200).\n\n### Building\n\n```sh\nember build\n```\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\n## Contributors\n\nThanks to @begedin, @snewcomer, @filipecrosk, and @Kilowhisky for your early help on this!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-corps%2Fember-stripe-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-corps%2Fember-stripe-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-corps%2Fember-stripe-elements/lists"}