Nearly Perpendicular Macaroons

    @vyconsulting/ionic-stripe-checkout
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.19 • Public • Published

    Ionic Stripe Checkout

    Documentation Maintenance License: MIT

    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

    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 © 2020 Wetillix.
    This project is MIT licensed.

    Install

    npm i @vyconsulting/ionic-stripe-checkout

    DownloadsWeekly Downloads

    0

    Version

    0.2.19

    License

    MIT

    Unpacked Size

    765 kB

    Total Files

    29

    Last publish

    Collaborators

    • amilamen