Skip to main content

Web Checkout

Embed Inttegro Checkout in a website or web application without building a payment form. Start with the JavaScript loader, or use the adapter designed for your frontend framework.

Developer preview

The web packages and hosted JavaScript runtime are not yet available for live payments. Use these guides to plan your integration while the preview is being prepared for release.

Choose your web integration

Use the JavaScript loader directly or choose the component that matches your frontend framework. Every adapter loads the same Inttegro-hosted checkout experience.

Inttegro with Inertia

Developer preview

Pass a client-safe Order ID through page props and use the adapter for your React, Vue, or Svelte frontend.

Choose an integration

Use @inttegro/js in a browser application without a supported framework. For React, Vue, Svelte, or Angular, use the corresponding adapter: it follows that framework's component lifecycle while preserving the same Checkout API and customer experience.

Inertia does not need a separate Inttegro package. Choose the React, Vue, or Svelte adapter that matches your Inertia frontend.

Prepare Checkout on your server

Your backend owns credentials, pricing, and every authoritative change to an Order. It should:

  1. Create an order with the amount and commercial details your application has approved.
  2. Finalize the order before showing Checkout.
  3. Return only the client-safe Order ID needed to start payment collection.

Treat the Order ID as a payment capability. It cannot be used to change the Order through Checkout, but anyone who obtains it can attempt to pay. Avoid placing it in analytics, error reports, or public logs.

Keep one Checkout experience

Every web integration loads the Inttegro-hosted runtime and mounts the payment experience in a hosted frame. Framework adapters do not recreate the form or bundle another payment runtime. They manage loading, updates, lifecycle events, and cleanup using the conventions of their framework.

Checkout can fill a page region or render inside a modal owned by your application. The SDK manages the hosted frame and its changing content height; your application owns the modal shell, close policy, focus return, and viewport scrolling. See Render Checkout inside a modal for a complete browser example.

Keep the host application informed

Privacy-safe lifecycle events report when Checkout is ready, customer input changes, a payment attempt begins, more customer action is required, an attempt fails, or the flow completes or is canceled. Forward these signals to your existing telemetry so navigation and route changes do not hide what happened inside Checkout.

The completed event is a customer-interface signal, not fulfillment authority. Before releasing goods, granting access, or marking a local record as paid, have your backend look up the order. For an in-progress payment, use a short bounded polling window and show a pending state if the Order has not reached a terminal state.