Understanding the Payment Flow

Here's what happens when a user clicks a payment button:

1. Button Click Event

button.addEventListener('click', async () => {
  // User clicks the payment button
});

2. Generate Checkout URL

The SDK calls the KiraPay API to generate a unique checkout URL:

const response = await fetch(
  'https://api.kira-pay.com/api/link/generate',
  {
    method: 'POST',
    headers: {
      'x-api-key': this.config.apiKey,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      price: this.config.price,
      customOrderId: this.config.customOrderId,
    }),
  }
);

API Request:

{
  "price": 99.99,
  "customOrderId": "order_123" // optional
}

API Response (Success):

{
  "success": true,
  "data": {
    "url": "https://checkout.kira-pay.com/{paymentId}"
  }
}

3. Open Checkout Modal

The SDK opens a modal with an iframe containing the checkout URL:

modal.open(checkoutUrl);

4. User Completes Payment

The user:

1. Sees the payment form in the modal

2. Enters payment details

3. Confirms the transaction

4. Receives confirmation

5. Payment Confirmation

After successful payment:

• The modal closes automatically

• You can track the payment in your dashboard