Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iykekings/svelte-paystack
A svelte library for implementing Paystack payment gateway
https://github.com/iykekings/svelte-paystack
paystack paystack-library paystack-payment-gateway svelte svelte-library
Last synced: 15 days ago
JSON representation
A svelte library for implementing Paystack payment gateway
- Host: GitHub
- URL: https://github.com/iykekings/svelte-paystack
- Owner: iykekings
- Created: 2020-01-28T13:41:49.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T21:10:11.000Z (over 1 year ago)
- Last Synced: 2024-10-13T16:07:17.451Z (25 days ago)
- Topics: paystack, paystack-library, paystack-payment-gateway, svelte, svelte-library
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-paystack
- Size: 523 KB
- Stars: 8
- Watchers: 1
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte-paystack
## A svelte library for implementing paystack payment gateway
## Getting started
> Install
```sh
npm i svelte-paystack
```
> Use
Import Paystack component as the default export from `svelte-paystack` and pass in your paystack configuration to it as `config` prop. This configuration can be found in your paystack dashboard.
```html
import Paystack from 'svelte-paystack';
//import your custom-component
import Button from 'your-path'
let config = {
key: "pk_test_or_public_key",
email: "[email protected]",
amount: 10000,
currency: "NGN",
withSlot:true, // If you need to render a custom component to replace default button
embed: false,
disabled: false,
callback: function(response) {
console.log(
"successfully subscribed. transaction ref is " + response.reference
);
},
onClose: function() {
console.log("window closed");
}
}
//Pass custom component to paystack
//action props from your custom-component will receive func to invoke paystack inline, which you can attach to any event inside your custom-component.
```
> Configuration Options
- For `embed: true` all Configuration options specified here by [paystack embed](https://developers.paystack.co/docs/paystack-embded#section-configuration-options) can be specified.
- For `embed: false` all Configuration options specified here by [paystack inline](https://developers.paystack.co/docs/paystack-inline#section-configuration-options) can be specified.
- For `withSlot: true` works in conjunction with `embed: false`, which gives you the option of using custom component to trigger [paystack inline](https://developers.paystack.co/docs/paystack-inline#section-configuration-options) can be specified.
- More configs:
```ts
embed: boolean // specifies if the payment form should be embedded. Defaults to false
value: string // textContent of the button tag when embed == false. Defaults to "Pay with Paystack"
```
## Examples
- Inline (using custom-component) to trigger [paystack inline](https://developers.paystack.co/docs/paystack-inline#section-configuration-options)
- Inline
- Embed
