Web

Use the web integration when your ERP, admin portal, or customer-facing web app needs to open the Jodo-hosted payment flow in a browser.

Flow

1. Your frontend asks your backend to create or fetch a Jodo redirect_url.
2. Your frontend opens the redirect_url.
3. Jodo redirects the user to your configured callback_url.
4. Your frontend shows a success, failure, or pending state.
5. Your backend confirms the final status using Jodo APIs and webhooks.

Get the Redirect URL

Do not create the Jodo flow directly from browser code. Your frontend should call your backend, and your backend should call Jodo.

The backend response should include the redirect_url and any internal identifier your frontend needs to track the attempt.

Open Checkout

For most web flows, open the redirect URL in the current browser window.

async function startJodoCheckout() {
  const response = await fetch("/api/jodo/checkout", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      callback_url: "https://example.com/payments/jodo/callback",
    }),
  });

  const { redirect_url } = await response.json();
  window.location.assign(redirect_url);
}

Handle the Callback

When the user lands on your callback_url, show a status page and ask your backend for the latest payment state.

async function loadPaymentStatus(paymentId) {
  const response = await fetch(`/api/payments/${paymentId}/status`);
  const status = await response.json();

  return status;
}

The callback means the user returned from the Jodo flow. It should not be the only source of truth for payment completion.

Recommended UX

• Show a loading state while redirecting to Jodo.
• On callback, show a pending state until backend status is confirmed.
• Provide a retry option only after checking the current attempt status.
• Avoid creating a new payment attempt while an existing attempt is still pending.
• Use webhook updates to refresh server-side payment state.

Test Cases

• Successful completion and callback redirect
• User cancels or closes checkout
• Browser back button during checkout
• Slow bank authentication
• Callback reached before webhook processing completes
• Duplicate click on the checkout button