KKIAPAY
DashboardSupport
EN 1.0.0
EN 1.0.0
  • Introduction
  • Home
    • KKiaPay
  • Account
    • Create an account
    • Account activation
    • KKiaPay Sandbox : Test Guide
    • Using KKiaPay
  • Payements
    • Supported Currencies
    • Payment Methods
    • Fees
    • Payouts
    • Transactions
  • Plugin and SDK
    • Prestashop
    • WooCommerce
    • Wordpress Give
    • Wordpress Jobster
    • Javascript SDK
      • Using KKiaPay with Vue.js
      • Using KKiaPay with React.js
      • Using KKiaPay with Angular
      • Using KKiaPay with Svelte
    • Android SDK
    • SDK Flutter
    • SDK React-Native
    • SDK Swift for iOS
    • Admin SDKs (Server-side)
      • PHP Admin SDK
      • Python Admin SDK
      • Node.js Admin SDK
  • KKIAPAY SERVICES
    • KKiaPay Direct
    • KKiaPay POS
  • Dashboard
    • General Presentation
    • Menu
      • Transactions
      • Customers
      • Payouts
      • Developers
      • Settings
    • Webhook
  • Security
    • Security provisions
    • Suspicious email and website
    • Untitled
Powered by GitBook
On this page
  • Installation
  • Importation
  • Usage

Was this helpful?

  1. Plugin and SDK
  2. Javascript SDK

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 !

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>
PreviousUsing KKiaPay with AngularNextAndroid SDK

Last updated 3 years ago

Was this helpful?

To avoid fraud, perform the server-side verification of the transaction operation. Learn more about the .

Admin SDKs (Server-Side)