Ionic Stripe Checkout

A simple Ionic 5 Stripe Checkout component using Angular.

📝 Table of Contents

• Prerequisites
• Install
• Setup
• Usage
• Features
• Author
• Contributors
• Contributing
• Show your support
• License

✅ 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: @wetillix

Contributors ✨

Thanks goes to these wonderful people (emoji key):

amilamen 💻

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!

📝 License

Copyright © 2022 Wetillix.
This project is MIT licensed.