Saved Card
In this approach, the OrchestratorX SDK is used on the frontend to capture card details. Card data is securely sent to the OrchestratorX backend and stored in OrchestratorX Vault. Payment orchestration, routing, and connector logic are handled entirely by the OrchestratorX backend.
The merchant uses the OrchestratorX Dashboard to configure connectors, routing rules, and orchestration logic. All payment requests are initiated using vault tokens, and raw card data never reaches merchant systems. Since card details are handled entirely by OrchestratorX, merchants are not required to be PCI DSS compliant for card data handling.
New User (Payments SDK)
1. Create Payment (Server-Side)
The merchant server creates a payment by calling the OrchestratorX payments/create API with transaction details such as amount and currency. OrchestratorX responds with a payment_id , customer_id and client_secret, which are required for client-side processing.
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", //
}'
Note - In case the merchant does not pass the customer ID, then the transaction is treated as a Guest customer checkout
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);
}
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.
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.
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.
Returning or Repeat User (Payments SDK)
1. Create Payment (Server-Side)
The merchant server initiates the payment by calling the payments/create API with transaction details such as amount and currency. OrchestratorX responds with a payment_id , customer_id and client_secret, which are required for client-side processing.
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", //
}'
Note -The merchant needs to pass the same customer ID for the SDK to fetch the saved customer payment methods and display them
In case the merchant is not using the SDK then they need to use the List Customer Saved Payment Methods API to fetch the stored payment methods against a customer
2. Initialize SDK and Fetch Saved Cards
The merchant client initializes the OrchestratorX SDK. The SDK requests eligible payment methods from OrchestratorX, including any saved cards associated with the customer.
// 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);
}
3. Customer Selects a Saved Card
The SDK displays the saved cards in the payment UI, customer enters the CVV.
4. Retrieve Card Data and Authorize
The SDK sends a payments/confirm request with the selected payment_method_id. OrchestratorX securely retrieves the card data from the OrchestratorX Vault and submits the authorization request to the processor via the OrchestratorX Connector.
5. Return Status
The processor returns the authorization result to OrchestratorX, which forwards the final status to the SDK. The customer is redirected to the merchant's return_url with the payment outcome.