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!

wetillix / ionic-stripe-checkout Goto Github PK