Get Started

This guide will walk you through creating your first KiraPay payment button and accepting your first payment.

1. Install the SDK

npm install kirapay-merchant-sdk

2. Get Your API Key

Before you begin, make sure you have your KiraPay API key:

Log in to your KiraPay Dashboard
Complete the onboarding process
Copy your API Key for development
Now you will have full access to your merchant dashboard.

3. Make Your First Call

Here's the simplest example to create a payment button:

Plain JavaScript (HTML)

<!DOCTYPE html>
<html>
<head>
    <title>My First KiraPay Payment</title>
</head>
<body>
    <h1>Product: Premium Plan</h1>
    <p>Price: $99.99</p>

    <!-- Payment button will appear here -->
    <div id="payment-button"></div>

    <!-- Load KiraPay SDK -->
    <script src="https://unpkg.com/kirapay-merchant-sdk"></script>

    <script>
        // Create payment button
        const button = new kirapay.ButtonDynamicPrice({
            price: 99.99,
            apiKey: "test_your_api_key_here",
            title: "Buy Now - $99.99"
        });

        // Render button to page
        document.getElementById('payment-button').appendChild(button.render());
    </script>
</body>
</html>

React

import React, { useEffect, useRef } from 'react';
import { ButtonDynamicPrice } from 'kirapay-merchant-sdk';

// if you face any import errors please use the below import line.
/* 
  import { ButtonDynamicPrice } from 'kirapay-merchant-sdk/dist/kirapay-merchant-sdk.esm.js';
*/

function PaymentButton() {
  const buttonRef = useRef(null);
  const buttonInstance = useRef(null);

  useEffect(() => {
    // Create payment button
    buttonInstance.current = new ButtonDynamicPrice({
      price: 99.99,
      apiKey: process.env.NEXT_PUBLIC_KIRAPAY_API_KEY,
      title: "Buy Now - $99.99"
    });

    // Render button
    if (buttonRef.current) {
      buttonRef.current.appendChild(buttonInstance.current.render());
    }

    // Cleanup
    return () => {
      if (buttonInstance.current) {
        buttonInstance.current.destroy();
      }
    };
  }, []);

  return (
    <div>
      <h1>Product: Premium Plan</h1>
      <p>Price: $99.99</p>
      <div ref={buttonRef}></div>
    </div>
  );
}

export default PaymentButton;

4. Test the Payment Flow

Open your page in a browser
Click the payment button
A modal will open with the KiraPay checkout form
Select wallet, token and complete the transaction
The modal will close upon successful payment

Congratulations! 🎉 You've successfully integrated KiraPay payments.

In the next page, you will find detailed information about customizations and all the available functions and methods.

PreviousOverview NextButtonDynamicPrice

Last updated 1 month ago

Was this helpful?

Good morning

hashtag1. Install the SDK

hashtag2. Get Your API Key

hashtag3. Make Your First Call

hashtag4. Test the Payment Flow

1. Install the SDK

2. Get Your API Key

3. Make Your First Call

4. Test the Payment Flow