Instant Payment (Auto Capture)

Overview

An instant payment charges the customer's card immediately upon confirmation. There is no separate capture step — authorization and capture happen together, and funds are settled without any additional action from your backend.

This is the right pattern for most standard checkout flows.

How It Works

sequenceDiagram
    participant Client
    participant OrchestratorX
    participant Processor

    Client->>OrchestratorX: POST /payments\n{confirm: true, capture_method: "automatic"}
    OrchestratorX->>Processor: Authorize + Capture
    Processor-->>OrchestratorX: Payment Complete
    OrchestratorX-->>Client: Status: succeeded

1. Your backend calls POST /payments with capture_method: "automatic"
2. OrchestratorX returns a client_secret
3. You pass the client_secret to the frontend SDK and render OrchestratorX SDK.
4. The OrchestratorX SDK renders the payment form, collects card details, and calls confirmPayment() once the use clicks on the make payment button.
5. OrchestratorX sends request to payment process to authorizes and captures the payment in one step.
6. Processor sends the payment response to OrchestratorX, which is relayed back to merchant.

SDK Integration

SDK Integration Steps

Step 1 — Create the Payment (Backend)

curl --location 'https://api.orchestratorx.com/payments' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'api-key: <enter your OrchestratorX API key here>' \
--data-raw '{
    "amount": 6540,
    "currency": "USD",
    "profile_id": <enter the relevant profile id>,
    "customer_id": "customer123",
    "description": "Its my first payment request",
    "return_url": "https://example.com", // 
}'

Step 2 — Initialize SDK (Client-Side)

The merchant client initializes the OrchestratorX SDK using the client_secret and publishable_key. The SDK fetches eligible payment methods from OrchestratorX and renders a secure payment UI.

// Fetches a payment intent and captures the client secret
async function initialize() {
  const response = await fetch("/create-payment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({currency: "USD",amount: 100}),
  });
  const { clientSecret } = await response.json();
  
  // Initialise Hyperloader.js
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://api.orchestratorx.com/v1/HyperLoader.js";
 
  let hyper; 
  script.onload = () => {
      hyper = window.Hyper("YOUR_PUBLISHABLE_KEY",{
      customBackendUrl: "YOUR_BACKEND_URL",
      //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
      })
      const appearance = {
          theme: "midnight",
      };
      const widgets = hyper.widgets({ appearance, clientSecret });
      const unifiedCheckoutOptions = {
          layout: "tabs",
          wallets: {
              walletReturnUrl: "https://example.com/complete",
              //Mandatory parameter for Wallet Flows such as Googlepay, Paypal and Applepay
          },
      };
      const unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
      unifiedCheckout.mount("#unified-checkout");
  };
  document.body.appendChild(script);
}

Step 3 — Collect Card Details

The customer selects a card payment method and enters their card details directly within the OrchestratorX SDK-managed interface, ensuring sensitive data never passes through merchant systems.

Step 4 —Authorize and Store Card

The SDK submits a payments/confirm request to OrchestratorX. OrchestratorX authorizes the payment with the processor.

Step 5 — Return Status

The final payment and vaulting status is returned to the SDK, which redirects the customer to the merchant's configured return_url.

API Integration

API Integration Steps

Step 1 — Create the Payment (Backend)

curl --location 'https://api.orchestratorx.com/payments' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'api-key: <enter your OrchestratorX API key here>' \
--data-raw '{
    "amount": 6540,
    "currency": "USD",
    "profile_id": <enter the relevant profile id>,
    "customer_id": "customer123",
    "description": "Its my first payment request",
    "return_url": "https://example.com", // 
}'

Step 2 — Confirm Payment

The merchant client initializes the OrchestratorX SDK using the client_secret and publishable_key. The SDK fetches eligible payment methods from OrchestratorX and renders a secure payment UI.

// Fetches a payment intent and captures the client secret
async function initialize() {
  const response = await fetch("/create-payment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({currency: "USD",amount: 100}),
  });
  const { clientSecret } = await response.json();
  
  // Initialise Hyperloader.js
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://api.orchestratorx.com/v1/HyperLoader.js";
 
  let hyper; 
  script.onload = () => {
      hyper = window.Hyper("YOUR_PUBLISHABLE_KEY",{
      customBackendUrl: "YOUR_BACKEND_URL",
      //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
      })
      const appearance = {
          theme: "midnight",
      };
      const widgets = hyper.widgets({ appearance, clientSecret });
      const unifiedCheckoutOptions = {
          layout: "tabs",
          wallets: {
              walletReturnUrl: "https://example.com/complete",
              //Mandatory parameter for Wallet Flows such as Googlepay, Paypal and Applepay
          },
      };
      const unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
      unifiedCheckout.mount("#unified-checkout");
  };
  document.body.appendChild(script);
}

Step 3 — Collect Card Details

The customer selects a card payment method and enters their card details directly within the SDK-managed interface, ensuring sensitive data never passes through merchant systems.

Step 4 —Authorize and Store Card

The SDK submits a payments/confirm request to OrchestratorX. OrchestratorX authorizes the payment with the processor and securely stores the card in the OrchestratorX Vault, generating a reusable payment_method_id.

Step 5 — Return Status

The final payment status is returned to the SDK, which redirects the customer to the merchant's configured return_url.