Using KKiaPay with Svelte
Installation
Please run the following command :
npm install kkiapay@next
Importation
You can now import the kkiapay dependency into your page :
import {
openKkiapayWidget,
addKkiapayListener,
removeKkiapayListener,
} from "kkiapay";
Usage
Define a function that will display the KKiaPay Widget :
<script>
import {
openKkiapayWidget,
removeKkiapayListener,
addKkiapayListener,
} from "kkiapay";
function open() {
openKkiapayWidget({
amount: 1000,
api_key: "xxxxxxxxxxxxxxxx",
sandbox: true,
phone: "97000000",
});
}
</script>
You can now use this function in your template to open the payment window :
<main>
<button on:click={open}> Pay now </button>
</main>
Important !
To avoid fraud, perform the server-side verification of the transaction operation. Learn more about the Admin SDKs (Server-Side).
You can subscribe to payment transaction events with the addKkiapayListener function. To be notified of the successful status of a payment transaction, you can proceed as follows :
<script>
import { onMount, onDestroy } from "svelte";
import {
openKkiapayWidget,
removeKkiapayListener,
addKkiapayListener,
} from "kkiapay";
function successHandler() {
console.log("payment success...");
}
onMount(() => {
addKkiapayListener("success", successHandler);
console.log("the component has mounted");
});
</script>
Because it is added in the mounted hook, the addKkiapayListener function will be called each time your component is rendered. If the component is returned n times, the function will be enrolled n times.
In order to avoid memory leaks, we will need to delete the callback when the component is destroyed :
<script>
//... others options
onDestroy(() => {
removeKkiapayListener("success", successHandler);
});
</script>
Last updated
Was this helpful?