Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smile-io/ember-cli-stripe
Stripe checkout for Ember
https://github.com/smile-io/ember-cli-stripe
ember ember-addon ember-cli stripe-checkout
Last synced: 7 days ago
JSON representation
Stripe checkout for Ember
- Host: GitHub
- URL: https://github.com/smile-io/ember-cli-stripe
- Owner: smile-io
- License: mit
- Created: 2014-11-20T20:29:26.000Z (about 10 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T10:05:48.000Z (about 1 month ago)
- Last Synced: 2025-01-13T10:06:15.715Z (14 days ago)
- Topics: ember, ember-addon, ember-cli, stripe-checkout
- Language: JavaScript
- Size: 2.22 MB
- Stars: 89
- Watchers: 29
- Forks: 35
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Stripe checkout for Ember [](http://travis-ci.org/smile-io/ember-cli-stripe)
## Description
Simplest way to implement card payments in your Ember app.
This addon integrates Stripe's embedded payment form, Checkout.
See [Stripe Checkout](https://stripe.com/docs/checkout#integration-custom) docs.
The best documentation is the sample application in `tests/dummy`.
## Installation
```sh
ember install ember-cli-stripe
```
## Usage
```handlebars
{{stripe-checkout
image="/square-image.png"
name="Demo Site"
description="2 widgets ($20.00)"
amount=2000
onToken=(action "processStripeToken")
}}
```
## Component properties
| Property | Purpose |
| -------------- | ---------------------------------------------------------- |
| `label` | Stripe Checkout button text. |
| `isDisabled` | When true, the Stripe Checkout button is disabled. |
| `showCheckout` | Can be used to open the Stripe Checkout modal dynamically. |
Besides the above, all [Stripe Checkout configuration options](https://stripe.com/docs/checkout#integration-custom)
are supported. If you notice anything missing please open an issue.
### Actions
The primary action of this component, `onToken` is called when the Stripe checkout succeeds. Its main param is a [Stripe Token](https://stripe.com/docs/api#tokens) object.
```javascript
import Ember from "ember";
export default Ember.Controller.extend({
actions: {
/**
* Receives a Stripe token after checkout succeeds
* The token looks like this https://stripe.com/docs/api#tokens
*/
processStripeToken(token, args) {
// Send token to the server to associate with account/user/etc
},
},
});
```
List of all actions:
| Action | Purpose |
| ---------- | ----------------------------------------------------------- |
| `onToken` | The callback invoked when the Checkout process is complete. |
| `onOpened` | The callback invoked when Checkout is opened. |
| `onClosed` | The callback invoked when Checkout is closed. |
## Configuration
All Stripe Checkout configuration options can be set in your apps config.
In most cases, you will want to add at least your Stripe **publishable key** to your app's config, but this can be set as a property on the component too.
```javascript
// config/environment.js
module.exports = function(environment) {
var ENV = {
stripe: {
key: 'pk_test_C0sa3IlkLWBlrB8laH2fbqfh',
....
},
};
return ENV;
};
```
**Note:** If Stripe options are set in the _environment.js_ file **and** when invoking the component, the later value will win.
Multiple Stripe keys are supported, when passed directly to the component.
## Compatibility
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
### For older versions of Ember.js
| Ember.js version | ember-cli-stripe version |
| ---------------- | ------------------------ |
| `4+` | `4.x` |
| `3.4+` | `3.x` |
| `2.18+` | `2.x` |
| `1.13+` | `0.x` |
**Note:** At your own risk, feel free to try current version, it might still work.
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).