Merge pull request #1 from HydrogenAfrica/develop

svelte component

.github/workflows/publish.yml

@@ -0,0 +1,22 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Publish package on NPM 📦
+        run: | 
+          npm install
+          npm run build
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,7 @@
+/node_modules/
+/public/build/
+
+.DS_Store
+dist
+
+node_modules/

README.md

@@ -1 +1,95 @@
-# hydrogenpay-svelte
+<p align="center">
+<img width="400" valign="top" src="https://hydrogenpay.com/wp-content/uploads/2023/05/logo.png" data-canonical-src="https://hydrogenpay.com/wp-content/uploads/2023/05/logo.png" style="max-width:100%; ">
+</p>
+<br/>
+
+# Hydrogen Svelte SDK
+
+Hydrogen Svelte SDK allows you to accept payment using in your svelte application
+
+## Installation
+
+Register for a merchant account on [Hydrogen Merchant Dashboard](https://dashboard.hydrogenpay.com) to get started.
+
+```bash
+npm install --save hydrogenpay-svelte
+```
+
+```bash
+yarn add hydrogenpay-svelte
+```
+
+```bash
+pnpm add hydrogenpay-svelte
+```
+
+## Support
+
+If you have any problems, questions or suggestions, create an issue here or send your inquiry to support@hydrogenpay.com
+
+## Implementation
+
+You should already have your api key, If not, go to [Profile & Settings](https://dashboard.hydrogenpay.com).
+
+### Usage 
+
+```jsx
+<script>
+	import HydrogenPay from 'hydrogenpay-svelte';
+</script>
+
+<main>
+	<HydrogenPay
+		amount={500}
+		email="test@mail.com"
+		customerName="John Doe"
+		meta="ewr34we4w"
+		apiKey="PK_TEST_cca53e0b3bc7847aff94502b8a585f84"
+		description="Test description"
+		currency="NGN"
+		frequency={1}
+		isRecurring={false}
+		endDate="2025-10-02"
+		buttonText="Pay With Hydrogen"
+		onSuccess={(response, closeModal) => {
+			console.log(response);
+
+			setTimeout(() => closeModal(), 3000);
+		}}
+		onClose={(close) => {
+			console.log(close);
+		}}
+		buttonStyle={{
+			style:
+				'padding-top: 10px; padding-bottom: 10px; width: 50%; border-radius: 8px; color: #000; font-size: 10px',
+		}}
+	/>
+</main>
+
+<style>
+	main {
+		text-align: center;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+</style>
+```
+
+## Options Type
+
+| Name         | Type       | Required | Desc                                                                        |
+| ------------ | ---------- | -------- | --------------------------------------------------------------------------- |
+| currency     | `String`   | Required | The currency for the transaction e.g NGN, USD                               |
+| email        | `String`   | Required | The email of the user to be charged                                         |
+| description  | `String`   | Optional | The transaction description                                                 |
+| customerName | `String`   | Required | The fullname of the user to be charged                                      |
+| amount       | `Number`   | Required | The transaction amount                                                      |
+| apiKey       | `String`   | Required | Your LIVE or TEST apiKey or see above step to get yours                                   |
+| onSuccess    | `Function` | Optional | Callback when transaction is successful                                     |
+| onClose      | `Function` | Optional | Callback when transaction is closed of cancel                               |
+| buttonText   | `String`   | Optional | Payment Button Text. Default: Hydrogen Pay                                  |
+| buttonStyle  | `Object`   | Optional | Styling Object                                                   |
+| isRecurring  | `boolean`  | Optional | Recurring Payment                                                           |
+| frequency    | `String`   | Optional | Recurring Payment frequency                                                 |
+| endDate      | `String`   | Optional | Recurring Payment End Date. OPTIONAL but (REQUIRED when isRecurring = true) |

example/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

example/README.md

@@ -0,0 +1,107 @@
+# This repo is no longer maintained. Consider using `npm init vite` and selecting the `svelte` option or — if you want a full-fledged app framework — use [SvelteKit](https://kit.svelte.dev), the official application framework for Svelte.
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```