What is FluxPay?

<script src="https://fluxpay.online/sdk/v1/fluxpay.min.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>

<!-- FluxPay is now available as window.FluxPay -->
<!-- Create payments server-side, then redirect: -->
<script>
  // Call YOUR backend to create a payment (never expose API keys here)
  fetch('/api/create-payment', { method: 'POST', body: JSON.stringify({ amount: 99.99 }) })
    .then(r => r.json())
    .then(({ paymentUrl }) => window.location.href = paymentUrl);
</script>

<!-- OPTION 1: Inline iFrame -->
<iframe
  src="https://fluxpay.online/payment/generic/pay_abc123"
  width="100%"
  height="600"
  frameborder="0"
  allow="payment"
  style="border: none; border-radius: 12px;"
></iframe>

<!-- OPTION 2: Modal/Popup iFrame -->
<div id="payment-modal" style="
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
">
  <div style="
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 500px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
  ">
    <iframe id="payment-iframe" width="100%" height="600" frameborder="0"></iframe>
  </div>
</div>

<script>
function openPayment(paymentUrl) {
  document.getElementById('payment-iframe').src = paymentUrl;
  document.getElementById('payment-modal').style.display = 'block';
}
</script>

// React Component for Embedded Payment
import { useState } from 'react';

function PaymentModal({ paymentUrl, onClose }) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-2xl w-full max-w-lg overflow-hidden">
        <div className="flex justify-between items-center p-4 border-b">
          <h3 className="font-semibold">Complete Payment</h3>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">✕</button>
        </div>
        <iframe
          src={paymentUrl}
          className="w-full h-[600px] border-0"
          allow="payment"
        />
      </div>
    </div>
  );
}

// Usage in your checkout page
function CheckoutPage() {
  const [paymentUrl, setPaymentUrl] = useState(null);

  const handleCheckout = async () => {
    const res = await fetch('/api/create-payment', { method: 'POST' });
    const { paymentUrl } = await res.json();
    setPaymentUrl(paymentUrl);
  };

  return (
    <div>
      <button onClick={handleCheckout}>Pay Now</button>
      {paymentUrl && (
        <PaymentModal
          paymentUrl={paymentUrl}
          onClose={() => setPaymentUrl(null)}
        />
      )}
    </div>
  );
}