{"id":23086672,"url":"https://github.com/wetillix/ionic-stripe-checkout","last_synced_at":"2025-08-16T05:32:01.846Z","repository":{"id":46034111,"uuid":"310825648","full_name":"wetillix/ionic-stripe-checkout","owner":"wetillix","description":"Ionic/Angular library for Stripe checkout","archived":false,"fork":false,"pushed_at":"2022-04-24T22:57:29.000Z","size":417,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-15T22:27:39.042Z","etag":null,"topics":["angular","angular10","checkout","ionic","ionic-framework","ionic4","ionic5","stripe","stripe-checkout"],"latest_commit_sha":null,"homepage":"https://wetillix.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wetillix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-11-07T11:06:55.000Z","updated_at":"2024-10-21T14:42:10.000Z","dependencies_parsed_at":"2022-09-26T18:40:31.969Z","dependency_job_id":null,"html_url":"https://github.com/wetillix/ionic-stripe-checkout","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wetillix%2Fionic-stripe-checkout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wetillix%2Fionic-stripe-checkout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wetillix%2Fionic-stripe-checkout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wetillix%2Fionic-stripe-checkout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wetillix","download_url":"https://codeload.github.com/wetillix/ionic-stripe-checkout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230014324,"owners_count":18159810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular10","checkout","ionic","ionic-framework","ionic4","ionic5","stripe","stripe-checkout"],"created_at":"2024-12-16T19:29:28.742Z","updated_at":"2024-12-16T19:29:29.371Z","avatar_url":"https://github.com/wetillix.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eIonic Stripe Checkout\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg src=\"https://img.shields.io/badge/version-0.2.19-blue.svg?cacheSeconds=2592000\" /\u003e\n  \u003ca href=\"https://github.com/wetillix/ionic-stripe-checkout#readme\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/wetillix/ionic-stripe-checkout/graphs/commit-activity\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/wetillix/ionic-stripe-checkout/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/@vyconsulting/ionic-stripe-checkout\"\u003e\n    \u003cimg alt=\"Total downloads\" src=\"https://img.shields.io/npm/dt/@vyconsulting/ionic-stripe-checkout?style=plastic\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e A simple Ionic 5 Stripe Checkout component using Angular.\n\n\u003c!-- ### 🏠 [Homepage](https://github.com/wetillix/ionic-stripe-checkout) --\u003e\n\n## 📝 Table of Contents\n\n- [Prerequisites](#prerequisites)\n- [Install](#install)\n- [Setup](#setup)\n- [Usage](#usage)\n- [Features](#features)\n- [Author](#author)\n- [Contributors](#contributors)\n- [Contributing](#contributing)\n- [Show your support](#support)\n- [License](#license)\n\n## ✅ Prerequisites \u003ca name = \"prerequisites\"\u003e\u003c/a\u003e\n\nThe current version of the library is compatible with Ionic 4 and Ionic 5.\n\n## ⬇️ Install \u003ca name = \"install\"\u003e\u003c/a\u003e\n\nUsing npm\n\n```sh\nnpm install --save @vyconsulting/ionic-stripe-checkout\n```\n\nUsing yarn\n\n```sh\nyarn add @vyconsulting/ionic-stripe-checkout\n```\n\n## 🛠 Setup \u003ca name = \"setup\"\u003e\u003c/a\u003e\n\n### 🚀 If you want to use it in `development mode`, you can use this example. It's based on Stripe secret key.\n\nOnce installed you need to import our module firstly in `AppModule` :\n\n```js\nimport { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';\n\n@NgModule({\n  ...\n  imports: [IonicStripeCheckoutModule.forRoot({\n    stripe_secret_key: \"YOUR_STRIPE_SECRET_KEY\",\n  }), ...],\n  ...\n})\nexport class AppModule {\n}\n```\n\nAfter do this, in your page where you want to use this component, you will do this:\n\n```js\nimport { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';\n\n@NgModule({\n  ...\n  imports: [IonicStripeCheckoutModule, ...],\n  ...\n})\nexport class YourModule {\n}\n```\n\n### 🚀 If you want to use it in `production mode`, you can use this example. It's based on Stripe publishable key.\n\nOnce installed you need to import our module firstly in `AppModule` :\n\n```js\nimport { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';\n\n@NgModule({\n  ...\n  imports: [IonicStripeCheckoutModule.forRoot({\n    stripe_publishable_key: \"YOUR_STRIPE_PUBLISHABLE_KEY\",\n    url_create_payment: \"http://YOUR_DOMAIN/YOUR_END_POINT_FOR_CREATE_PAYMENT\",\n    url_token_card: \"http://YOUR_DOMAIN/YOUR_END_POINT_FOR_CREATE_TOKEN\",\n    language: \"en\"\n  }), ...],\n  ...\n})\nexport class AppModule {\n}\n```\n\nAfter do this, in your page where you want to use this component, you will do this:\n\n```js\nimport { IonicStripeCheckoutModule } from '@vyconsulting/ionic-stripe-checkout';\n\n@NgModule({\n  ...\n  imports: [IonicStripeCheckoutModule, ...],\n  ...\n})\nexport class YourModule {\n}\n```\n\nFinally, 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 :\n\n```js\nconst stripe = require(\"stripe\")(\"STRIPE_SECRET_KEY\");\nconst express = require(\"express\");\nconst app = express();\napp.use(express.json());\napp.use(express.urlencoded({ extended: true }));\napp.use(express.static(\".\"));\n\napp.post(\"/create-token\", async (req, res) =\u003e {\n  const token = await stripe.tokens.create({\n    card: {\n      number: req.body.cardNumber,\n      exp_month: req.body.cardMonth,\n      exp_year: req.body.cardYear,\n      cvc: req.body.cardCVC,\n    },\n  });\n  res.json({ token });\n});\n\napp.post(\"/create-payment\", async (request, response) =\u003e {\n  stripe.charges\n    .create({\n      amount: request.body.amount,\n      currency: request.body.currency,\n      source: request.body.source,\n    })\n    .then((charge) =\u003e {\n      response.json({ charge });\n    })\n    .catch((error) =\u003e {\n      response.json({ error });\n    });\n});\n\napp.listen(4242, () =\u003e console.log(\"Running on port 4242\"));\n```\n\n## Usage \u003ca name = \"usage\"\u003e\u003c/a\u003e\n\nInclude the component on page template, like the example below:\n\n```\n  \u003cion-stripe-checkout\n    [amount]=\"100\"\n    [currency]=\"'EUR'\"\n    (checkout)=\"onPay($event)\"\n  \u003e\n  \u003c/ion-stripe-checkout\u003e\n```\n\nIn your `tsconfig.json` file, if you use `Angular Language Service` extension, add this line :\n\n```\n{\n      \"compilerOptions\": {\n       .\n       .\n       .\n        \"paths\": {\n          \"@vyconsulting/ionic-stripe-checkout\": [\"node_modules/@vyconsulting/ionic-stripe-checkout\"]\n        },\n```\n\n### API\n\n### Properties\n\n- amount: `number` it is the price of your product.\n- currency: `string` it is the currency of your price. Check [Stripe Currency Normalized](https://stripe.com/docs/currencies)\n\n### Events\n\n- checkout: `EventEmitter\u003cICreatePaymentCharge | HttpErrorResponse\u003e, the only event dedicated to payment. When the payment is successful, it returns all informations about user checkout. Otherwise it returns HttpErrorResponse from HttpClient.`\n\n## Features which coming soon \u003ca name = \"features\"\u003e\u003c/a\u003e\n\n- [ ] Integrate 3D Secure payment\n\n## Author \u003ca name = \"author\"\u003e\u003c/a\u003e\n\n👤 **Wetillix**\n\n- Github: [@wetillix](https://github.com/wetillix)\n\n## Contributors ✨ \u003ca name = \"contributors\"\u003e\u003c/a\u003e\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/amilamen\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/46297789?s=400\u0026u=03563203ec0290dd65dded1ad75c4c5e4adb7be4\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eamilamen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wetillix/ionic-stripe-checkout/commits?author=amilamen\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.\n\n## 🤝 Contributing \u003ca name = \"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/wetillix/ionic-stripe-checkout/issues).\n\n## Show your support \u003ca name = \"support\"\u003e\u003c/a\u003e\n\nGive a ⭐️ if this project helped you!\n\n## 📝 License \u003ca name = \"license\"\u003e\u003c/a\u003e\n\nCopyright © 2022 [Wetillix](https://github.com/wetillix).\u003cbr /\u003e\nThis project is [MIT](https://github.com/wetillix/ionic-stripe-checkout/blob/master/LICENSE) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwetillix%2Fionic-stripe-checkout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwetillix%2Fionic-stripe-checkout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwetillix%2Fionic-stripe-checkout/lists"}