Liabify Integration Guide

1. Signup with Liabify as a business

Getting started with Liabify is simple. Register your business and submit the necessary documentation for our review process. Our team will verify your information and approve your account.

Required documents:

Business registration certificate
Valid ID of business owner
Proof of address (not older than 3 months)
Bank account details for settlements

Sign Up as Business

2. Integrate with JS Button Code

Once your account is approved, you can quickly integrate Liabify into your website. Copy the JavaScript code below and paste it into your website where you want the "Pay with LiaPay" button to appear.

Example of how the button will look:

Copy this code to your website:

<script>
  // LiaPay integration script
  (function() {
    const liapayBtn = document.createElement('button');
    liapayBtn.innerHTML = 'Pay with LiaPay <img src="https://liabify.com/assets/logo.png" alt="LiaPay logo" style="width: 24px; height: 24px; margin-left: 8px;" />';
    liapayBtn.className = 'liapay-button';
    liapayBtn.style = 'background: #7502DB; color: #FBFBFB; padding: 12px 24px; border: none; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 40px; transition: all 0.2s;';
    
    // Add hover effect
    liapayBtn.addEventListener('mouseover', function() {
      this.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)';
    });
    
    liapayBtn.addEventListener('mouseout', function() {
      this.style.boxShadow = 'none';
    });
    
    liapayBtn.onclick = function() {
      // Disable button
      this.disabled = true;
      this.style.backgroundColor = '#ccc';
      this.style.cursor = 'not-allowed';
      
      // Create and show modal after half a second
      setTimeout(function() {
        const modal = document.createElement('div');
        modal.className = 'liapay-modal';
        modal.innerHTML = `
          <div class="modal-overlay"></div>
          <div class="modal-content">
            <div class="close-button">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
            <iframe src="https://liabify.com/checkout?merchant=${encodeURIComponent(window.location.hostname)}" class="modal-iframe" title="LiaPay Checkout"></iframe>
          </div>
        `;
        
        document.body.appendChild(modal);
        
        // Show modal with fade in effect
        setTimeout(function() {
          modal.style.display = 'block';
          setTimeout(function() {
            modal.classList.add('fade-in');
          }, 10);
        }, 10);
        
        // Close button functionality
        const closeBtn = modal.querySelector('.close-button');
        const modalOverlay = modal.querySelector('.modal-overlay');
        
        closeBtn.addEventListener('click', function() {
          modal.classList.remove('fade-in');
          setTimeout(function() {
            modal.style.display = 'none';
            document.body.removeChild(modal);
            liapayBtn.disabled = false;
            liapayBtn.style.backgroundColor = '#7502DB';
            liapayBtn.style.cursor = 'pointer';
          }, 300);
        });
        
        modalOverlay.addEventListener('click', function() {
          closeBtn.click();
        });
      }, 500);
    };
    
    // Add button styles
    const style = document.createElement('style');
    style.textContent = `
      .liapay-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .liapay-modal.fade-in {
        opacity: 1;
      }
      
      .modal-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(4px);
        background-color: rgba(0, 0, 0, 0.5);
      }
      
      .modal-content {
        position: relative;
        width: 95vw;
        height: 90vh;
        max-width: 64rem;
        margin: 5vh auto;
        background-color: white;
        overflow: hidden;
        border-radius: 0.5rem;
      }
      
      .modal-iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }
      
      .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: white;
        border-radius: 9999px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 60;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        transition: background-color 0.2s;
      }
      
      .close-button:hover {
        background-color: #f3f4f6;
      }
      
      .close-button svg {
        width: 20px;
        height: 20px;
      }
    `;
    document.head.appendChild(style);
    
    // Add button to container with id "liapay-container"
    document.getElementById('liapay-container').appendChild(liapayBtn);
  })();
</script>

<!-- Add this div where you want the LiaPay button to appear -->
<div id="liapay-container"></div>

Note: Make sure to place the script in the body of your HTML after all other content has loaded.

3. CMS Plugins for Popular Platforms

If you're using a popular e-commerce platform, we offer ready-made plugins for quick and easy integration. Download and install our official plugins for various platforms to start accepting payments immediately.

WooCommerce

Shopify

Magento

BigCommerce

Download CMS Plugins