A simple Ionic 5 Stripe Checkout component using Angular.
- Prerequisites
- Install
- Setup
- Usage
- Features
- Author
- Contributors
- Contributing
- Show your support
- License
The current version of the library is compatible with Ionic 4 and Ionic 5.
Using npm
npm install --save @vyconsulting/ionic-stripe-checkoutUsing yarn
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 :
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"));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"]
},
- amount:
numberit is the price of your product. - currency:
stringit is the currency of your price. Check Stripe Currency Normalized
- 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.
- Integrate 3D Secure payment
👤 Wetillix
- Github: @wetillix
Thanks goes to these wonderful people (emoji key):
amilamen 💻 |
This project follows the all-contributors specification.
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!