@vyconsulting/ionic-stripe-checkout
v0.2.19
Published
A simple Ionic 5 Stripe Checkout component using Angular.
Downloads
17
Maintainers
Readme
A simple Ionic 5 Stripe Checkout component using Angular.
📝 Table of Contents
✅ Prerequisites
The current version of the library is compatible with Ionic 4 and Ionic 5.
⬇️ Install
Using npm
npm install --save @vyconsulting/ionic-stripe-checkout
Using yarn
yarn add @vyconsulting/ionic-stripe-checkout
🛠 Setup
🚀 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
:
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:
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
:
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:
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 :
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"));
Usage
Include the component on page template, like the example below:
<ion-stripe-checkout
[amount]="100"
[currency]="'EUR'"
(checkout)="onPay($event)"
>
</ion-stripe-checkout>
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
Events
- checkout:
EventEmitter<ICreatePaymentCharge | HttpErrorResponse>, the only event dedicated to payment. When the payment is successful, it returns all informations about user checkout. Otherwise it returns HttpErrorResponse from HttpClient.
Features which coming soon
- [ ] Integrate 3D Secure payment
Author
👤 Wetillix
- Github: @vy-group
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification.
🤝 Contributing
Contributions, issues and feature requests are welcome!Feel free to check issues page.
Show your support
Give a ⭐️ if this project helped you!