Skip to content

fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
farhan-t-ottu merged 2 commits into from
Aug 24, 2026
Merged

fix(demos): pass the plugin explicitly when discovering gateways #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f51c684
fix(demos): pass the plugin explicitly when discovering gateways
farhan-t-ottu Aug 24, 2026
c322df9
fix(demos): single-source the session type too
farhan-t-ottu Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/components/CheckoutDemo/CheckoutDemoInner.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
createSandboxSession,
callPaymentMethods,
extractPgCodes,
type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
| { status: "idle" }
| { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
try {
const methodsResponse = await callPaymentMethods({
currencies: ["KWD"],
plugin: PLUGIN,
type: "sandbox",
tags: ["demo"],
});
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

const { session_id } = await createSandboxSession({
pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
type: "e_commerce",
type: PLUGIN,
});
dispatch({ type: "SESSION_CREATED", sessionId: session_id });
} catch (err: any) {
Expand Down
12 changes: 9 additions & 3 deletions src/components/PaymentJourney/PaymentJourneyInner.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
callPaymentMethods,
callPaymentStatusQuery,
getWebhookBaseUrl,
type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
const runStep1 = useCallback(async () => {
dispatch({ type: "COUNTRY_CONFIRMED" });
try {
const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
dispatch({ type: "STEP1_DONE", pgCodes, response });
} catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
const response = await createSandboxSession({
pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
type: PLUGIN,
currency_code: state.selectedCurrency,
customer_id: "sandbox",
extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
{(state.status === "step1_done" || isStepExpanded(2)) && (
<>
<ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
plugin: "payment_request",
plugin: PLUGIN,
operation: "purchase",
currencies: [state.selectedCurrency],
type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
<>
<ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
type: "payment_request",
type: PLUGIN,
pg_codes: state.pgCodes,
amount: "20",
currency_code: state.selectedCurrency,
Expand Down
16 changes: 12 additions & 4 deletions src/components/RecurringDemo/RecurringDemoInner.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
callPaymentMethods,
extractPgCodes,
getWebhookBaseUrl,
type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
webhookEventsRef.current = [];

const pmRequest = {
plugin: "e_commerce",
plugin: PLUGIN,
currencies: ["KWD"],
auto_debit: true,
type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
const agreement = buildAgreement(state.orderId);
const citRequest = {
type: "e_commerce",
type: PLUGIN,
pg_codes: state.pgCodes,
amount: "20",
currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

const session = await createSandboxSession({
pg_codes: state.pgCodes,
type: PLUGIN,
customer_id: state.customerId,
extra: {
payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
const startMITOneStep = useCallback(async () => {
const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
const mitRequest = {
type: "e_commerce",
type: PLUGIN,
pg_codes: [state.citPgCode],
amount: "15",
currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
try {
const result = await createSandboxSession({
pg_codes: [state.citPgCode || state.pgCodes[0]],
type: PLUGIN,
amount: "15",
customer_id: state.customerId,
extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
const startMITTwoStep = useCallback(async () => {
const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
const mitRequest = {
type: "e_commerce",
type: PLUGIN,
pg_codes: [state.citPgCode],
amount: "15",
currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
try {
const session = await createSandboxSession({
pg_codes: [state.citPgCode || state.pgCodes[0]],
type: PLUGIN,
amount: "15",
customer_id: state.customerId,
extra: {
Expand Down
4 changes: 2 additions & 2 deletions src/components/WalletDemo/WalletDemoInner.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

try {
// Step 1 — Fetch wallet-capable gateways
const filter = WALLET_DEMO.pgFilter || ({} as any);
const filter = WALLET_DEMO.pgFilter;
const methodsResponse = await callPaymentMethods({
currencies: [WALLET_DEMO.currency],
plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
// Step 3 — Create Checkout session
const { session_id } = await createSandboxSession({
pg_codes: [pgCode],
type: "e_commerce",
type: filter.plugin,
amount: WALLET_DEMO.sessionAmount,
currency_code: WALLET_DEMO.currency,
customer_id: customerId,
Expand Down
29 changes: 25 additions & 4 deletions src/utils/sandbox.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
* The Ottu plugin a payment belongs to.
*
* Same vocabulary on both sides of the flow: it is the `plugin` filter on the
* Payment Methods API and the `type` of the Checkout API session. A gateway
* enabled for one plugin is not necessarily enabled for the other, so the two
* calls in a single demo must always use the same value.
*/
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
pg_codes: string[];
amount?: string;
currency_code?: string;
customer_id?: string;
type?: string;
/**
* Required for the same reason as `plugin` on `callPaymentMethods`: a session
* type that disagrees with the plugin the gateways were discovered for gets
* pg_codes the session cannot accept (#159191).
*/
type: PaymentPlugin;
/** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
options: CreateSessionOptions
): Promise<SessionResult> {
const body = {
type: options.type ?? "payment_request",
type: options.type,
pg_codes: options.pg_codes,
amount: options.amount ?? "20",
currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
*/
export async function callPaymentMethods(options: {
currencies: string[];
plugin?: string;
/**
* Required: gateways are enabled per plugin, so discovery must state which
* plugin the caller is about to create a session for. Defaulting this is what
* let CheckoutDemo discover `payment_request` gateways and then ask for an
* `e_commerce` session (#159191).
*/
plugin: PaymentPlugin;
operation?: string;
type?: string;
tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
payment_services?: string[];
}): Promise<any> {
const body: Record<string, unknown> = {
plugin: options.plugin ?? "payment_request",
plugin: options.plugin,
operation: options.operation ?? "purchase",
currencies: options.currencies,
};
Expand Down
4 changes: 3 additions & 1 deletion src/utils/walletDemoConfig.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
* The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
* in `./sandbox` — flip that one global to retarget every demo on the site.
*/
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
// Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
currency: "USD",
seedAmount: "10.00",
sessionAmount: "8.00",
pgFilter: {
plugin: "e_commerce",
plugin: "e_commerce" as PaymentPlugin,
type: "sandbox",
tags: ["demo"],
payment_services: ["wallet"],
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
fix(demos): pass the plugin explicitly when discovering gateways by farhan-t-ottu · Pull Request #175 · ottuco/docs · GitHub
Skip to content
fix(demos): pass the plugin explicitly when discovering gateways#175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

farhan-t-ottu
merged 2 commits into

from

Aug 24, 2026
 Merged


fix(demos): pass the plugin explicitly when discovering gateways
#175
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
f51c684

fix(demos): pass the plugin explicitly when discovering gateways


farhan-t-ottu Aug 24, 2026
c322df9

fix(demos): single-source the session type too


farhan-t-ottu Aug 24, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


8 changes: 7 additions & 1 deletion
src/components/CheckoutDemo/CheckoutDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,11 +5,16 @@ import {
 createSandboxSession,
 callPaymentMethods,
 extractPgCodes,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

type State =
 | { status: "idle" }
 | { status: "fetching_methods" }
Expand DownExpand Up@@ -86,6 +91,7 @@ export default function CheckoutDemoInner() {
 try {
 const methodsResponse = await callPaymentMethods({
 currencies: ["KWD"],
 plugin: PLUGIN,
 type: "sandbox",
 tags: ["demo"],
 });
Expand All@@ -94,7 +100,7 @@ export default function CheckoutDemoInner() {

 const { session_id } = await createSandboxSession({
 pg_codes: pgCodes.length > 0 ? pgCodes : ["ottu_sdk"],
 type: "e_commerce",
 type: PLUGIN,
 });
 dispatch({ type: "SESSION_CREATED", sessionId: session_id });
 } catch (err: any) {
Expand Down

12 changes: 9 additions & 3 deletions
src/components/PaymentJourney/PaymentJourneyInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import {
 callPaymentMethods,
 callPaymentStatusQuery,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import { createDemoCallbacks } from "@site/src/utils/checkoutSdk";
import ApiPanel from "@site/src/components/ApiPanel";
Expand All@@ -15,6 +16,10 @@ import { TEST_CARD } from "@site/src/components/TestCardCallout";
import { COUNTRIES, DEFAULT_COUNTRY_INDEX } from "./countries";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "payment_request";

// ── Types ──────────────────────────────────────────────

type Status =
Expand DownExpand Up@@ -325,7 +330,7 @@ export default function PaymentJourneyInner() {
 const runStep1 = useCallback(async () => {
 dispatch({ type: "COUNTRY_CONFIRMED" });
 try {
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: "payment_request", operation: "purchase", type: "sandbox", tags: ["demo"] });
 const response = await callPaymentMethods({ currencies: [state.selectedCurrency], plugin: PLUGIN, operation: "purchase", type: "sandbox", tags: ["demo"] });
 const pgCodes = response?.payment_methods?.map((m: any) => m.code) ?? response?.pg_codes ?? [];
 dispatch({ type: "STEP1_DONE", pgCodes, response });
 } catch (err: any) {
Expand All@@ -341,6 +346,7 @@ export default function PaymentJourneyInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const response = await createSandboxSession({
 pg_codes: state.pgCodes.length > 0 ? state.pgCodes : ["direct-payment"],
 type: PLUGIN,
 currency_code: state.selectedCurrency,
 customer_id: "sandbox",
 extra: {
Expand DownExpand Up@@ -514,7 +520,7 @@ export default function PaymentJourneyInner() {
 {(state.status === "step1_done" || isStepExpanded(2)) && (
 <>
 <ApiPanel label="POST /b/pbl/v2/payment-methods/" data={{
 plugin: "payment_request",
 plugin: PLUGIN,
 operation: "purchase",
 currencies: [state.selectedCurrency],
 type: "sandbox",
Expand DownExpand Up@@ -545,7 +551,7 @@ export default function PaymentJourneyInner() {
 ) : (state.status === "step2_done" || isStepExpanded(3)) && state.sessionId ? (
 <>
 <ApiPanel label="POST /b/checkout/v1/pymt-txn/" data={{
 type: "payment_request",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: state.selectedCurrency,
Expand Down

16 changes: 12 additions & 4 deletions
src/components/RecurringDemo/RecurringDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,18 @@ import {
 callPaymentMethods,
 extractPgCodes,
 getWebhookBaseUrl,
 type PaymentPlugin,
} from "@site/src/utils/sandbox";
import ApiPanel from "@site/src/components/ApiPanel";
import CheckoutSDKEmbed from "@site/src/components/CheckoutSDKEmbed";
import { TEST_CARD } from "@site/src/components/TestCardCallout";
import WebhookViewer, { extractTokenFromWebhook } from "./WebhookViewer";
import styles from "./styles.module.css";

// Single-sourced: gateway discovery and session creation must name the same
// plugin, or the session gets pg_codes that are not enabled for it (#159191).
const PLUGIN: PaymentPlugin = "e_commerce";

// ── Types ────────────────────────────────────────────────────────────────────

type Phase =
Expand DownExpand Up@@ -265,7 +270,7 @@ export default function RecurringDemoInner() {
 webhookEventsRef.current = [];

 const pmRequest = {
 plugin: "e_commerce",
 plugin: PLUGIN,
 currencies: ["KWD"],
 auto_debit: true,
 type: "sandbox",
Expand DownExpand Up@@ -296,7 +301,7 @@ export default function RecurringDemoInner() {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const agreement = buildAgreement(state.orderId);
 const citRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: state.pgCodes,
 amount: "20",
 currency_code: "KWD",
Expand All@@ -310,6 +315,7 @@ export default function RecurringDemoInner() {

 const session = await createSandboxSession({
 pg_codes: state.pgCodes,
 type: PLUGIN,
 customer_id: state.customerId,
 extra: {
 payment_type: "auto_debit",
Expand DownExpand Up@@ -370,7 +376,7 @@ export default function RecurringDemoInner() {
 const startMITOneStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -387,6 +393,7 @@ export default function RecurringDemoInner() {
 try {
 const result = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand All@@ -411,7 +418,7 @@ export default function RecurringDemoInner() {
 const startMITTwoStep = useCallback(async () => {
 const webhookUrl = `${getWebhookBaseUrl()}/webhook/${state.orderId}`;
 const mitRequest = {
 type: "e_commerce",
 type: PLUGIN,
 pg_codes: [state.citPgCode],
 amount: "15",
 currency_code: "KWD",
Expand All@@ -427,6 +434,7 @@ export default function RecurringDemoInner() {
 try {
 const session = await createSandboxSession({
 pg_codes: [state.citPgCode || state.pgCodes[0]],
 type: PLUGIN,
 amount: "15",
 customer_id: state.customerId,
 extra: {
Expand Down

4 changes: 2 additions & 2 deletions
src/components/WalletDemo/WalletDemoInner.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -99,7 +99,7 @@ export default function WalletDemoInner() {

 try {
 // Step 1 — Fetch wallet-capable gateways
 const filter = WALLET_DEMO.pgFilter || ({} as any);
 const filter = WALLET_DEMO.pgFilter;
 const methodsResponse = await callPaymentMethods({
 currencies: [WALLET_DEMO.currency],
 plugin: filter.plugin,
Expand DownExpand Up@@ -131,7 +131,7 @@ export default function WalletDemoInner() {
 // Step 3 — Create Checkout session
 const { session_id } = await createSandboxSession({
 pg_codes: [pgCode],
 type: "e_commerce",
 type: filter.plugin,
 amount: WALLET_DEMO.sessionAmount,
 currency_code: WALLET_DEMO.currency,
 customer_id: customerId,
Expand Down

29 changes: 25 additions & 4 deletions
src/utils/sandbox.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -38,12 +38,27 @@ export const KSA: ConnectEnv = {
// WalletDemo seeds and charges in USD (see walletDemoConfig.ts).
export const ACTIVE_CONNECT: ConnectEnv = SANDBOX;

/**
 * The Ottu plugin a payment belongs to.
 *
 * Same vocabulary on both sides of the flow: it is the `plugin` filter on the
 * Payment Methods API and the `type` of the Checkout API session. A gateway
 * enabled for one plugin is not necessarily enabled for the other, so the two
 * calls in a single demo must always use the same value.
 */
export type PaymentPlugin = "e_commerce" | "payment_request";

export interface CreateSessionOptions {
 pg_codes: string[];
 amount?: string;
 currency_code?: string;
 customer_id?: string;
 type?: string;
 /**
 * Required for the same reason as `plugin` on `callPaymentMethods`: a session
 * type that disagrees with the plugin the gateways were discovered for gets
 * pg_codes the session cannot accept (#159191).
 */
 type: PaymentPlugin;
 /** Arbitrary extra fields merged into the request body (e.g., payment_type, agreement, payment_instrument, webhook_url) */
 extra?: Record<string, unknown>;
}
Expand DownExpand Up@@ -79,7 +94,7 @@ export async function createSandboxSession(
 options: CreateSessionOptions
): Promise<SessionResult> {
 const body = {
 type: options.type ?? "payment_request",
 type: options.type,
 pg_codes: options.pg_codes,
 amount: options.amount ?? "20",
 currency_code: options.currency_code ?? "KWD",
Expand DownExpand Up@@ -151,7 +166,13 @@ export async function callAutoDebit(
 */
export async function callPaymentMethods(options: {
 currencies: string[];
 plugin?: string;
 /**
 * Required: gateways are enabled per plugin, so discovery must state which
 * plugin the caller is about to create a session for. Defaulting this is what
 * let CheckoutDemo discover `payment_request` gateways and then ask for an
 * `e_commerce` session (#159191).
 */
 plugin: PaymentPlugin;
 operation?: string;
 type?: string;
 tags?: string[];
Expand All@@ -160,7 +181,7 @@ export async function callPaymentMethods(options: {
 payment_services?: string[];
}): Promise<any> {
 const body: Record<string, unknown> = {
 plugin: options.plugin ?? "payment_request",
 plugin: options.plugin,
 operation: options.operation ?? "purchase",
 currencies: options.currencies,
 };
Expand Down

4 changes: 3 additions & 1 deletion
src/utils/walletDemoConfig.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,13 +6,15 @@
 * The merchant host / Api-Key / SDK key all come from `ACTIVE_CONNECT`
 * in `./sandbox` — flip that one global to retarget every demo on the site.
 */
import type { PaymentPlugin } from "./sandbox";

export const WALLET_DEMO = {
 // Wallet on sandbox.ottu.net is enabled for USD only (PG `ottu-sandbox-usd`).
 currency: "USD",
 seedAmount: "10.00",
 sessionAmount: "8.00",
 pgFilter: {
 plugin: "e_commerce",
 plugin: "e_commerce" as PaymentPlugin,
 type: "sandbox",
 tags: ["demo"],
 payment_services: ["wallet"],
Expand Down