Quick Start

Get AlyaPay up and running in 15 minutes.

This guide covers Online Checkout for websites. For POS/ERP integration, see API Integration.

Prerequisites

Before you begin, you'll need:

AlyaPay merchant account
API Key - Provided by our team after account approval

API Base URLs:

Sandbox: https://sandbox-api.alyapay.com
Production: https://api.alyapay.com

Use development URL with test API keys during development, and production URL with live keys when going live.

Step 1: Create Session Token (Backend)

Your backend creates a session token for each checkout.

Endpoint: POST /api/v1/public/sessions

Headers:

X-API-Key: YOUR_API_KEY_HERE
Content-Type: application/json

Request:

{
  "total": 1799.00,
  "currency": "MAD",
  "items": [
    {
      "id": "PRODUCT_123",
      "name": "Wireless Headphones",
      "price": 1799,
      "quantity": 1
    }
  ]
}

Response:

{
  "token": "session_abc123...",
  "expiresAt": "2024-12-08T10:30:00Z"
}

Step 2: Load SDK (Frontend)

Add the AlyaPay SDK to your page:

<script src="https://cdn.alyapay.com/alyapay-sdk.min.js"></script>

Step 3: Initialize SDK

Initialize the SDK with the session token:

const alya = AlyaPay.init({
  sessionToken: 'session_abc123...'
});

Step 4: Render Payment Button

Add a container and render the button:

<div id="alyapay-button"></div>

<script>
  alya.renderButton('#alyapay-button');
</script>

Step 5: Handle Events

Listen for payment events:

alya.on('success', (data) => {
  console.log('Payment successful:', data.transactionId);
  // Verify on backend
});

alya.on('error', (error) => {
  console.error('Payment error:', error);
});

Step 6: Verify Payment (Backend)

Verify the transaction on your backend:

Endpoint: GET /api/v1/public/transactions/{transactionId}

Headers:

X-API-Key: YOUR_API_KEY_HERE

Response:

{
  "id": "trans_123",
  "status": "APPROVED",
  "amount": 1799.00,
  "currency": "MAD"
}

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>AlyaPay Checkout</title>
  <script src="https://cdn.alyapay.com/alyapay-sdk.min.js"></script>
</head>
<body>
  <h1>Complete Your Purchase</h1>
  <div id="alyapay-button"></div>
    
    <script>
    // Get session token from your backend
    fetch('/api/create-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        total: 1799.00,
        currency: 'MAD',
        items: [...]
      })
    })
    .then(res => res.json())
    .then(session => {
      // Initialize AlyaPay
      const alya = AlyaPay.init({
        sessionToken: session.token
      });

      // Render button
      alya.renderButton('#alyapay-button');

      // Handle success
      alya.on('success', (data) => {
        // Verify on backend
        fetch(`/api/verify/${data.transactionId}`)
          .then(() => {
            window.location = '/order-complete';
          });
      });
        });
    </script>
</body>
</html>

Next Steps

Frontend Integration - Detailed SDK documentation
Backend Integration - API endpoints
Events - Handle callbacks
Components - Payment button and widget options

Need Help?

Email support@alyapay.com

Quick Start

On this page