Quickstart

curl 'https://api.sbx.moduluslabs.io/ecom/v1/payment-intents' \
  -H 'Authorization: Bearer sk_test_...' \
  -H 'Content-Type: application/json' \
  -d '{
    "amount": 86500,
    "currency": "PHP",
    "description": "Order #1234",
    "metadata": { "order_id": "1234" }
  }'

{
  "id": "b7e2c1a4-9f3d-4c6b-8a21-5e0f7d9c3b18",
  "client_secret": "3f9a6d2e-7c14-4b8f-a5d0-1e6c2b9f4a73",
  "amount": 86500,
  "currency": "PHP",
  "status": "ACTIVE",
  "expires_at": "2026-09-04T12:00:00Z"
}

<script src="https://js.sbx.moduluslabs.io/v1"></script>

<form id="payment-form">
  <div id="card-number"></div>
  <div id="card-expiry"></div>
  <div id="card-cvc"></div>
  <button id="pay" disabled>Pay</button>
</form>

<!-- The 3D Secure challenge renders here when the bank requires one -->
<div id="threeds-container"></div>

const modulus = new Modulus('pk_test_...');

const elements = modulus.elements({
  paymentIntentId: 'b7e2c1a4-9f3d-4c6b-8a21-5e0f7d9c3b18',
  clientSecret: '3f9a6d2e-7c14-4b8f-a5d0-1e6c2b9f4a73',
});

elements.create('cardNumber').mount('#card-number');
elements.create('cardExpiry').mount('#card-expiry');
elements.create('cardCvc').mount('#card-cvc');

// Keep Pay disabled until every field is valid and filled
elements.on('change', (e) => {
  document.querySelector('#pay').disabled = !e.complete;
});

document.querySelector('#payment-form').addEventListener('submit', async (ev) => {
  ev.preventDefault();

  const result = await modulus.confirmPayment({
    elements,
    billingDetails: {
      firstName: 'Juan', lastName: 'Dela Cruz',
      email: 'juan@example.com',
      address: { line1: '123 Main St', country: 'PH' },
    },
    // 3D Secure is automatic. Render any challenge in your own container,
    // and use onStatusChange to drive your UI. Frictionless cards never
    // reach 'requires_action' and show no challenge.
    threeDS: { container: '#threeds-container' },
    onStatusChange: (status) => {
      if (status === 'submitting')      showSpinner('Processing...');
      if (status === 'requires_action') hideSpinner();            // let the customer complete the challenge
      if (status === 'authenticating')  showSpinner('Authenticating...');
    },
  });

  hideSpinner();

  switch (result.status) {
    case 'SUCCEEDED':
      // result.receipt.transaction_id, result.receipt.approval_code, ...
      showReceipt(result.receipt);
      break;
    case 'DECLINED':
      showError(result.userMessage || 'Card declined. Try another card.');
      break;
    case 'PROCESSING':
      showPending("We're confirming your payment.");
      break;
    default: // FAILED, EXPIRED
      showError(result.userMessage || result.error?.message);
  }
});