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

<script>
  AlyaPay.Payments.init({
    session_token: SESSION_TOKEN,
    locale: 'en'
  });
  
  AlyaPay.Payments.load({
    container: '#alyapay-button'
  });
</script>

<button id="my-button" class="btn-primary">
  Confirm order
</button>

<script>
  // Initialize SDK (don't call load())
  AlyaPay.Payments.init({
    session_token: SESSION_TOKEN,
    locale: 'en'
  });
  
  // Trigger on your button click
  document.getElementById('my-button').addEventListener('click', async () => {
    try {
      await AlyaPay.Payments.startFlow();
    } catch (error) {
      console.error('Payment error:', error);
    }
  });
</script>

#alyapay-button {
  max-width: 400px;
  margin: 20px auto;
}

/* Mobile */
@media (max-width: 768px) {
  #alyapay-button {
    width: 100%;
  }
}

AlyaPay.Payments.load({
  container: '#alyapay-button-container'
});

AlyaPay.Payments.init({
  session_token: SESSION_TOKEN,
  locale: 'fr' // 'en', 'fr', or 'ar'
});