Integration Guide

<script src="https://groundedpay.com/embed-shopify.js"
        data-merchant-id="YOUR_MERCHANT_ID"></script>

<script src="https://groundedpay.com/embed.js"
        data-merchant-id="YOUR_MERCHANT_ID"
        data-button-style="floating"
        data-button-text="Pay with Crypto"></script>

<!-- Set amount dynamically from WooCommerce cart -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Read cart total from WooCommerce checkout page
  var totalEl = document.querySelector('.order-total .amount') ||
                document.querySelector('.cart-subtotal .amount');
  if (totalEl) {
    var amount = parseFloat(totalEl.textContent.replace(/[^0-9.]/g, ''));
    if (amount > 0 && window.GroundedPay) {
      // Remove the auto-generated floating button
      var autoBtn = document.querySelector('.groundedpay-btn');
      if (autoBtn) autoBtn.remove();

      // Render button with correct amount next to checkout
      var target = document.querySelector('.wc-proceed-to-checkout') ||
                   document.querySelector('#place_order').parentElement;
      if (target) {
        GroundedPay.renderButton(target, {
          amount: amount,
          orderId: document.querySelector('input[name="order_id"]')?.value
        });
      }
    }
  }
});
</script>

// Add GroundedPay crypto payments
add_action('wp_footer', function() {
  if (is_checkout() || is_cart()) {
    $total = WC()->cart->get_total('edit');
    echo '<script src="https://groundedpay.com/embed.js"
            data-merchant-id="YOUR_MERCHANT_ID"
            data-amount="' . esc_attr($total) . '"
            data-button-position=".wc-proceed-to-checkout"
            data-button-text="Pay with Crypto"></script>';
  }
});

<!-- Place this where you want the button -->
<div id="pay-button"></div>

<script src="https://groundedpay.com/embed.js"
        data-merchant-id="YOUR_MERCHANT_ID"
        data-amount="99.99"
        data-order-id="INV-2024-001"
        data-callback-url="https://yoursite.com/api/payment-webhook"
        data-success-url="https://yoursite.com/thank-you"
        data-button-position="#pay-button"></script>

<!-- Load the embed (no data-amount = no auto-button) -->
<script src="https://groundedpay.com/embed.js"
        data-merchant-id="YOUR_MERCHANT_ID"></script>

<div id="checkout-area"></div>

<script>
// Calculate amount from your cart/order
var cartTotal = calculateCartTotal(); // your function

// Render button with dynamic amount
GroundedPay.renderButton(document.getElementById('checkout-area'), {
  amount: cartTotal,
  orderId: 'order-' + Date.now(),
  callbackUrl: 'https://yoursite.com/api/payment-webhook',
  successUrl: 'https://yoursite.com/thank-you',
  buttonText: 'Pay $' + cartTotal.toFixed(2) + ' with Crypto'
});

// Or trigger payment directly from your own button:
document.getElementById('my-pay-btn').addEventListener('click', function() {
  GroundedPay.pay({
    amount: cartTotal,
    orderId: 'order-' + Date.now(),
    callbackUrl: 'https://yoursite.com/api/payment-webhook',
    successUrl: 'https://yoursite.com/thank-you'
  });
});
</script>

// Express webhook handler
app.post('/api/payment-webhook', (req, res) => {
  const { event, payment_id, status, amount, order_id, tx_hash } = req.body;

  if (event === 'payment.confirmed') {
    // Mark order as paid in your database
    db.markOrderPaid(order_id, {
      paymentId: payment_id,
      txHash: tx_hash,
      amount: amount
    });

    // Send confirmation email, fulfill order, etc.
    sendConfirmationEmail(order_id);
  }

  res.json({ received: true });
});

curl -X POST https://groundedpay.com/api/payments/create \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 49.99,
    "merchant_id": "YOUR_MERCHANT_ID",
    "order_id": "order-123",
    "callback_url": "https://yoursite.com/webhook"
  }'

curl https://groundedpay.com/api/payments/PAYMENT_ID/status