Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wetillix/ionic-stripe-checkout
Ionic/Angular library for Stripe checkout
https://github.com/wetillix/ionic-stripe-checkout
angular angular10 checkout ionic ionic-framework ionic4 ionic5 stripe stripe-checkout
Last synced: about 1 month ago
JSON representation
Ionic/Angular library for Stripe checkout
- Host: GitHub
- URL: https://github.com/wetillix/ionic-stripe-checkout
- Owner: wetillix
- License: mit
- Created: 2020-11-07T11:06:55.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-24T22:57:29.000Z (over 2 years ago)
- Last Synced: 2024-11-15T22:27:39.042Z (2 months ago)
- Topics: angular, angular10, checkout, ionic, ionic-framework, ionic4, ionic5, stripe, stripe-checkout
- Language: TypeScript
- Homepage: https://wetillix.com/
- Size: 407 KB
- Stars: 14
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Ionic Stripe Checkout
> A simple Ionic 5 Stripe Checkout component using Angular.
## 📝 Table of Contents
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Setup](#setup)
- [Usage](#usage)
- [Features](#features)
- [Author](#author)
- [Contributors](#contributors)
- [Contributing](#contributing)
- [Show your support](#support)
- [License](#license)
The current version of the library is compatible with Ionic 4 and Ionic 5.
Using npm
```sh
npm install --save @vyconsulting/ionic-stripe-checkout
```
Using yarn
```sh
yarn add @vyconsulting/ionic-stripe-checkout
```
### 🚀 If you want to use it in `development mode`, you can use this example. It's based on Stripe secret key.
Once installed you need to import our module firstly in `AppModule` :
```js
import { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';
@NgModule({
...
imports: [IonicStripeCheckoutModule.forRoot({
stripe_secret_key: "YOUR_STRIPE_SECRET_KEY",
}), ...],
...
})
export class AppModule {
}
```
After do this, in your page where you want to use this component, you will do this:
```js
import { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';
@NgModule({
...
imports: [IonicStripeCheckoutModule, ...],
...
})
export class YourModule {
}
```
### 🚀 If you want to use it in `production mode`, you can use this example. It's based on Stripe publishable key.
Once installed you need to import our module firstly in `AppModule` :
```js
import { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';
@NgModule({
...
imports: [IonicStripeCheckoutModule.forRoot({
stripe_publishable_key: "YOUR_STRIPE_PUBLISHABLE_KEY",
url_create_payment: "http://YOUR_DOMAIN/YOUR_END_POINT_FOR_CREATE_PAYMENT",
url_token_card: "http://YOUR_DOMAIN/YOUR_END_POINT_FOR_CREATE_TOKEN",
language: "en"
}), ...],
...
})
export class AppModule {
}
```
After do this, in your page where you want to use this component, you will do this:
```js
import { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';
@NgModule({
...
imports: [IonicStripeCheckoutModule, ...],
...
})
export class YourModule {
}
```
Finally, if you use `Express.js` as backend, here is an example of code you can use. You can transpose the code into your backend language :
```js
const stripe = require("stripe")("STRIPE_SECRET_KEY");
const express = require("express");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static("."));
app.post("/create-token", async (req, res) => {
const token = await stripe.tokens.create({
card: {
number: req.body.cardNumber,
exp_month: req.body.cardMonth,
exp_year: req.body.cardYear,
cvc: req.body.cardCVC,
},
});
res.json({ token });
});
app.post("/create-payment", async (request, response) => {
stripe.charges
.create({
amount: request.body.amount,
currency: request.body.currency,
source: request.body.source,
})
.then((charge) => {
response.json({ charge });
})
.catch((error) => {
response.json({ error });
});
});
app.listen(4242, () => console.log("Running on port 4242"));
```
Include the component on page template, like the example below:
```
```
In your `tsconfig.json` file, if you use `Angular Language Service` extension, add this line :
```
{
"compilerOptions": {
.
.
.
"paths": {
"@vyconsulting/ionic-stripe-checkout": ["node_modules/@vyconsulting/ionic-stripe-checkout"]
},
```
### API
### Properties
- amount: `number` it is the price of your product.
- currency: `string` it is the currency of your price. Check [Stripe Currency Normalized](https://stripe.com/docs/currencies)
### Events
- checkout: `EventEmitter, the only event dedicated to payment. When the payment is successful, it returns all informations about user checkout. Otherwise it returns HttpErrorResponse from HttpClient.`
- [ ] Integrate 3D Secure payment
👤 **Wetillix**
- Github: [@wetillix](https://github.com/wetillix)
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/wetillix/ionic-stripe-checkout/issues).
Give a ⭐️ if this project helped you!
Copyright © 2022 [Wetillix](https://github.com/wetillix).
This project is [MIT](https://github.com/wetillix/ionic-stripe-checkout/blob/master/LICENSE) licensed.
