/* * Rain API Playground: self-mounting widget. * * Mintlify injects every .js file in the repo into every docs page, so this * file is a no-op unless a

exists (see * api-playground.mdx). A MutationObserver handles Mintlify's client-side * navigation: the widget mounts whenever the container appears. * * Flow definitions are pure data + small builders of (cfg, ctx); adding a * flow requires no changes to the render engine below. All five flows ship * here: Customer Onboarding, Card Creation, Funding & Collateral, Transfers * & On/Off-Ramp, and Transactions. * * Most steps are REST calls (method + path). A few real steps aren't REST * at all (an onchain deposit, a bank wire, a signed withdrawal transaction). * Those use `{ kind: 'manual', label, summary }` instead of `method`/`path`: * the render engine shows them with a label badge instead of a method chip * and skips the "Copy cURL" button, since there's no request to generate. */ (function () { 'use strict'; if (typeof document === 'undefined') return; /* ================================================================ */ /* Flow definitions */ /* ================================================================ */ const ENVIRONMENTS = { sandbox: { label: 'Sandbox', baseUrl: 'https://api-dev.rain.xyz/v1' }, production: { label: 'Production', baseUrl: 'https://api.rain.xyz/v1' }, }; // Relative paths, not a hardcoded domain: the widget is mounted inside // this same Mintlify site, so these resolve correctly on every preview, // staging, and production deploy. const API_KEY_HREF = '/docs/set-up-access'; const SAMPLE_ADDRESS = { line1: '123 Main St', city: 'Austin', region: 'TX', postalCode: '78701', countryCode: 'US', }; const SAMPLE_WALLET = '0x71C7656EC7ab88b098defB751B7401B5f6d8976F'; const SAMPLE_BANK_ADDRESS = { addressLine1: '123 Main St', city: 'Austin', region: 'TX', postalCode: '78701', countryCode: 'US', }; function sampleExternalFiatAccount(rail) { return { currency: 'usd', rail, thirdParty: false, beneficiaryType: 'individual', beneficiaryFirstName: 'John', beneficiaryLastName: 'Doe', beneficiaryAddress: SAMPLE_BANK_ADDRESS, bankName: 'Example Bank', bankAddress: SAMPLE_BANK_ADDRESS, accountNumber: '000123456789', routingNumber: '021000021', bankAccountType: 'checking', }; } function slug(text, fallback) { const s = String(text || '').toLowerCase().replace(/[^a-z0-9]+/g, ''); return s || fallback; } function personEmail(first, last) { return `${slug(first, 'john')}.${slug(last, 'doe')}@example.com`; } const onboardingFlow = { id: 'onboarding', title: 'Customer Onboarding', subtitle: 'Submit KYC/KYB applications and track approval', docsHref: '/docs/signing-up-a-customer', configFields: [ { key: 'customerType', label: 'Customer Type', type: 'segmented', default: 'individual', options: [ { value: 'individual', label: 'Individual' }, { value: 'business', label: 'Business' }, ], }, { key: 'firstName', label: 'First Name', type: 'text', default: 'John', showIf: cfg => cfg.customerType === 'individual' }, { key: 'lastName', label: 'Last Name', type: 'text', default: 'Doe', showIf: cfg => cfg.customerType === 'individual' }, { key: 'companyName', label: 'Company Name', type: 'text', default: 'Acme Corp', showIf: cfg => cfg.customerType === 'business' }, { key: 'externalId', label: 'External ID (optional)', type: 'text', default: 'usr_12345' }, { key: 'model', label: 'Management Model', type: 'segmented', default: 'rain', options: [ { value: 'rain', label: 'Rain-Managed' }, { value: 'partner', label: 'Partner-Managed' }, ], hint: 'Rain-Managed programs require a wallet address for each applicant.', }, ], architecture(cfg) { const business = cfg.customerType === 'business'; const rows = [ [{ kicker: business ? 'COMPANY' : 'CUSTOMER', title: business ? (cfg.companyName || 'Acme Corp') : `${cfg.firstName || 'John'} ${cfg.lastName || 'Doe'}`, sub: business ? 'business' : 'individual', kind: 'primary', }], ]; const second = [ { icon: '📄', title: business ? 'KYB Application' : 'KYC Application', sub: business ? '+ documents' : 'compliance review' }, ]; if (business) { second.push({ icon: '👥', title: 'UBOs', sub: 'verified individually' }); } second.push({ icon: '💳', title: 'Cardholder', sub: 'auto-created on approval', kind: 'auto' }); if (cfg.model === 'rain') { second.push({ icon: '🔗', title: 'Smart Contract', sub: 'auto-assigned on approval', kind: 'auto' }); } rows.push(second); return rows; }, steps(cfg, ctx) { const business = cfg.customerType === 'business'; const externalId = (cfg.externalId || '').trim(); if (!business) { const first = cfg.firstName || 'John'; const last = cfg.lastName || 'Doe'; const body = { firstName: first, lastName: last, email: personEmail(first, last), birthDate: '1990-01-15', nationalId: '123456789', countryOfIssue: 'US', address: SAMPLE_ADDRESS, ipAddress: '203.0.113.1', occupation: '15-1252', annualSalary: '50000-100000', accountPurpose: 'web3Payments', expectedMonthlyVolume: '1000-5000', isTermsOfServiceAccepted: true, }; if (cfg.model === 'rain') body.walletAddress = SAMPLE_WALLET; if (externalId) body.externalId = externalId; const userSteps = []; if (externalId) { userSteps.push({ method: 'GET', path: `/issuing/applications/user/external/${externalId}`, summary: `Check for an existing application with externalId "${externalId}" before creating one. A 200 means it already exists, use its id as USER_ID and skip the create step below; a 404 means none exists yet, continue to create one`, save: [{ name: 'USER_ID', from: 'response.id (only on a 200; skip the create step if found)' }], }); } userSteps.push( { method: 'POST', path: '/issuing/applications/user', summary: `Create consumer (KYC) application for "${first} ${last}"`, body, save: [{ name: 'USER_ID', from: 'response.id' }, { name: 'COMPLETION_LINK_URL', from: 'response.applicationCompletionLink.url' }], }, { method: 'GET', path: '/issuing/applications/user/{USER_ID}', summary: 'Poll application status until approved (or listen for the user.updated webhook)', save: [{ name: 'APPLICATION_STATUS', from: 'response.applicationStatus' }], }, { method: 'GET', path: '/issuing/users/{USER_ID}', summary: 'Retrieve the approved user. Rain creates the cardholder automatically on approval', }, ); return userSteps; } const company = cfg.companyName || 'Acme Corp'; const domain = slug(company, 'acme'); const initialUser = { firstName: 'John', lastName: 'Doe', email: `john@${domain}.com`, birthDate: '1990-01-15', nationalId: '123456789', countryOfIssue: 'US', address: SAMPLE_ADDRESS, ipAddress: '203.0.113.1', isTermsOfServiceAccepted: true, }; if (cfg.model === 'rain') initialUser.walletAddress = SAMPLE_WALLET; const body = { name: company, address: SAMPLE_ADDRESS, entity: { name: `${company} LLC`, description: 'Software and payments company', industry: 'software', registrationNumber: '123456789', taxId: '12-3456789', website: `https://${domain}.com`, }, initialUser, representatives: [], ultimateBeneficialOwners: [ { firstName: 'John', lastName: 'Smith', email: `john@${domain}.com`, birthDate: '1985-06-20', nationalId: '987654321', countryOfIssue: 'US', address: SAMPLE_ADDRESS, }, ], }; if (externalId) body.externalId = externalId; const companySteps = []; if (externalId) { companySteps.push({ method: 'GET', path: `/issuing/applications/company/external/${externalId}`, summary: `Check for an existing application with externalId "${externalId}" before creating one. A 200 means it already exists, use its id as COMPANY_ID and skip the create step below; a 404 means none exists yet, continue to create one`, save: [{ name: 'COMPANY_ID', from: 'response.id (only on a 200; skip the create step if found)' }], }); } companySteps.push( { method: 'POST', path: '/issuing/applications/company', summary: `Create corporate (KYB) application for "${company}"`, body, save: [ { name: 'COMPANY_ID', from: 'response.id' }, { name: 'UBO_ID', from: 'response.ultimateBeneficialOwners[0].id' }, ], }, { method: 'PUT', path: '/issuing/applications/company/{COMPANY_ID}/document', summary: 'Upload company documents: repeat for incorporationCert and shareholderRegistry', form: [ { name: 'document', value: '@incorporation-certificate.pdf' }, { name: 'type', value: 'incorporationCert' }, ], }, { method: 'PUT', path: '/issuing/applications/company/{COMPANY_ID}/ubo/{UBO_ID}/document', summary: 'Upload an identity document for UBO "John Smith"', form: [ { name: 'document', value: '@passport.jpg' }, { name: 'type', value: 'passport' }, ], }, { method: 'GET', path: '/issuing/applications/company/{COMPANY_ID}', summary: 'Poll company + per-UBO status. Rain approves the company only after approving every UBO', save: [{ name: 'APPLICATION_STATUS', from: 'response.applicationStatus' }], }, ); return companySteps; }, stateVars(cfg) { if (cfg.customerType === 'business') { return [ { name: 'COMPANY_ID', desc: 'from POST /issuing/applications/company response `id`' }, { name: 'UBO_ID', desc: 'from response `ultimateBeneficialOwners[].id` (one per UBO)' }, { name: 'APPLICATION_STATUS', desc: 'from GET /issuing/applications/company/{COMPANY_ID}' }, ]; } return [ { name: 'USER_ID', desc: 'from POST /issuing/applications/user response `id`' }, { name: 'COMPLETION_LINK_URL', desc: 'from response `applicationCompletionLink.url`. Redirect the user here if status is needsVerification or needsInformation' }, { name: 'APPLICATION_STATUS', desc: 'from GET /issuing/applications/user/{USER_ID}' }, ]; }, promptNotes(cfg, ctx) { const notes = [ 'Application states: approved, pending, needsInformation, needsVerification, manualReview, denied, locked, canceled. Only approved is a success terminal state.', 'Prefer the ' + (cfg.customerType === 'business' ? 'company.updated' : 'user.updated') + ' webhook over polling in production.', ]; if (cfg.customerType === 'individual') { notes.push('If status is needsVerification or needsInformation, redirect the user to COMPLETION_LINK_URL (append its params plus your own `redirect` query param).'); } else { notes.push('Required company documents: certificate of incorporation and shareholder registry. entity.taxId is the EIN; entity.registrationNumber is the state registration number. Do not swap them.'); } if (cfg.model === 'rain') { notes.push('Rain-Managed: every applicant must include a walletAddress (EVM), solanaAddress, or stellarAddress. On approval, Rain auto-assigns collateral smart contracts.'); } else { notes.push('Partner-Managed: applications don\'t require a wallet address. Manage collateral at the tenant level via the Rain Dashboard.'); } if (ctx.env === 'sandbox') { notes.push('Sandbox tip: set the last name to contain a target status to simulate it, for example "TestApproved" or "TestNeedsVerification" (case-insensitive).'); } return notes; }, }; const cardCreationFlow = { id: 'cards', title: 'Card Creation', subtitle: 'Issue a virtual or physical card for an approved cardholder', docsHref: '/docs/issuing-cards', configFields: [ { key: 'type', label: 'Card Type', type: 'segmented', default: 'virtual', options: [ { value: 'virtual', label: 'Virtual' }, { value: 'physical', label: 'Physical' }, ], }, { key: 'userId', label: 'User ID', type: 'text', default: '{USER_ID}', hint: 'Use the USER_ID from an approved Customer Onboarding application.' }, { key: 'limitAmount', label: 'Spending Limit (cents)', type: 'text', default: '100000' }, { key: 'limitFrequency', label: 'Limit Frequency', type: 'select', default: 'per30DayPeriod', options: [ { value: 'per24HourPeriod', label: 'Per 24 Hours' }, { value: 'per7DayPeriod', label: 'Per 7 Days' }, { value: 'per30DayPeriod', label: 'Per 30 Days' }, { value: 'perYearPeriod', label: 'Per Year' }, { value: 'allTime', label: 'All Time' }, { value: 'perAuthorization', label: 'Per Authorization' }, ], }, { key: 'requireActivation', label: 'Require Activation', type: 'segmented', default: 'no', options: [ { value: 'no', label: 'No' }, { value: 'yes', label: 'Yes' }, ], hint: 'By default a new card is active immediately. Set this to require an explicit activation step.', }, { key: 'shippingMethod', label: 'Shipping Method', type: 'select', default: 'standard', options: [ { value: 'standard', label: 'Standard (untracked)' }, { value: 'express', label: 'Express (tracked)' }, { value: 'international', label: 'International (tracked)' }, { value: 'apc', label: 'APC (untracked)' }, { value: 'uspsInternational', label: 'USPS International (untracked)' }, { value: 'apcTracked', label: 'APC (tracked)' }, ], showIf: cfg => cfg.type === 'physical', }, { key: 'displayName', label: 'Embossed Name', type: 'text', default: 'JOHN DOE', showIf: cfg => cfg.type === 'physical' }, ], architecture(cfg) { const physical = cfg.type === 'physical'; const rows = [ [{ kicker: 'USER', title: cfg.userId || '{USER_ID}', sub: 'approved cardholder', kind: 'primary' }], [{ icon: '💳', title: physical ? 'Physical Card' : 'Virtual Card', sub: cfg.requireActivation === 'yes' ? 'notActivated' : 'active' }], ]; if (physical) { rows.push([{ icon: '📦', title: 'Shipment', sub: cfg.shippingMethod || 'standard', kind: 'auto' }]); } if (cfg.requireActivation === 'yes') { rows.push([{ icon: '✅', title: 'Activation', sub: 'cardholder confirms last4', kind: 'auto' }]); } return rows; }, steps(cfg, ctx) { const physical = cfg.type === 'physical'; const userId = (cfg.userId || '').trim() || '{USER_ID}'; const requireActivation = cfg.requireActivation === 'yes'; const amount = Number(cfg.limitAmount) || 100000; const body = { type: cfg.type, limit: { amount, frequency: cfg.limitFrequency || 'per30DayPeriod' }, }; if (requireActivation) body.status = 'notActivated'; if (physical) { body.configuration = { displayName: cfg.displayName || 'JOHN DOE' }; body.shipping = { ...SAMPLE_ADDRESS, method: cfg.shippingMethod || 'standard', phoneNumber: '+15125550100', firstName: 'John', lastName: 'Doe', }; } const steps = [ { method: 'POST', path: `/issuing/users/${userId}/cards`, summary: `Create a ${cfg.type} card for the approved user`, body, save: [ { name: 'CARD_ID', from: 'response.id' }, { name: 'LAST4', from: 'response.last4' }, ], }, ]; if (requireActivation) { steps.push( { method: 'GET', path: '/issuing/cards/{CARD_ID}', summary: 'Retrieve last4 and expiration so the cardholder can confirm them before activating', }, { method: 'PATCH', path: '/issuing/cards/{CARD_ID}', summary: 'Activate the card once the cardholder confirms its details', body: { status: 'active' }, }, ); } steps.push({ method: 'PUT', path: '/issuing/cards/{CARD_ID}/pin', summary: 'Set the card PIN, encrypted client-side before this call', headers: { SessionId: '$SESSION_ID' }, body: { encryptedPin: { iv: '', data: '' } }, }); return steps; }, stateVars(cfg) { return [ { name: 'CARD_ID', desc: 'from POST /issuing/users/{userId}/cards response `id`' }, { name: 'LAST4', desc: 'from response `last4`, used to confirm the card with the cardholder before activation' }, { name: 'SESSION_ID', desc: 'an encrypted session id generated per your PIN encryption setup' }, ]; }, promptNotes(cfg, ctx) { const notes = [ 'Virtual and physical cards use the same endpoint; the `type` field determines what setup applies.', 'PIN values must be encrypted client-side (AES-128-GCM, RSA-OAEP-wrapped session key) before calling PUT /issuing/cards/{CARD_ID}/pin. See /docs/managing-a-cards-pin for the full encryption example.', 'There is no sandbox simulation for card creation, shipping, or activation: call these endpoints for real against the sandbox base URL.', ]; if (cfg.type === 'physical') { notes.push('Once a shipping address is submitted it cannot be changed. If the address was wrong, issue a new card instead.'); } return notes; }, }; const fundingFlow = { id: 'funding', title: 'Funding & Collateral', subtitle: 'Fund a Rain-Managed program and manage collateral', docsHref: '/docs/managing-collateral', configFields: [ { key: 'scope', label: 'Scope', type: 'segmented', default: 'user', options: [ { value: 'user', label: 'User' }, { value: 'company', label: 'Company' }, ], }, { key: 'action', label: 'Action', type: 'segmented', default: 'fund', options: [ { value: 'fund', label: 'Fund' }, { value: 'withdraw', label: 'Withdraw' }, ], }, { key: 'chainId', label: 'Chain', type: 'select', default: '8453', options: [ { value: '1', label: 'Ethereum' }, { value: '137', label: 'Polygon' }, { value: '8453', label: 'Base' }, { value: 'solana', label: 'Solana' }, ], }, { key: 'token', label: 'Token Address', type: 'text', default: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' }, { key: 'amount', label: 'Amount', type: 'text', default: '100' }, { key: 'adminAddress', label: 'Admin Address', type: 'text', default: SAMPLE_WALLET, showIf: cfg => cfg.action === 'withdraw' }, { key: 'recipientAddress', label: 'Recipient Address', type: 'text', default: SAMPLE_WALLET, showIf: cfg => cfg.action === 'withdraw' }, ], architecture(cfg) { const scope = cfg.scope === 'company' ? 'Company' : 'User'; const rows = [ [{ kicker: scope.toUpperCase(), title: '{' + scope.toUpperCase() + '_ID}', sub: 'Rain-Managed', kind: 'primary' }], [{ icon: '🔗', title: 'Smart Contract', sub: `chain ${cfg.chainId || '8453'}` }], ]; if (cfg.action === 'withdraw') { rows.push([{ icon: '⛓', title: 'Withdrawal', sub: 'signed onchain transaction', kind: 'auto' }]); } else { rows.push([{ icon: '⛓', title: 'Deposit', sub: 'onchain token transfer', kind: 'auto' }]); } rows.push([{ icon: '💰', title: 'Collateral Balance', sub: 'confirmed via API', kind: 'auto' }]); return rows; }, steps(cfg, ctx) { const scope = cfg.scope === 'company' ? 'companies' : 'users'; const idToken = cfg.scope === 'company' ? '{COMPANY_ID}' : '{USER_ID}'; const token = cfg.token || '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'; const amount = cfg.amount || '100'; const chainId = cfg.chainId || '8453'; if (cfg.action === 'withdraw') { const adminAddress = cfg.adminAddress || SAMPLE_WALLET; const recipientAddress = cfg.recipientAddress || SAMPLE_WALLET; return [ { method: 'GET', path: `/issuing/${scope}/${idToken}/signatures/withdrawals?chainId=${chainId}&token=${token}&amount=${amount}&adminAddress=${adminAddress}&recipientAddress=${recipientAddress}`, summary: 'Request a withdrawal signature. adminAddress must already be an onchain admin of the collateral contract', save: [{ name: 'WITHDRAWAL_SIGNATURE', from: 'response.signature' }], }, { kind: 'manual', label: 'Onchain', summary: `Call withdrawAsset on the collateral contract on chain ${chainId} with WITHDRAWAL_SIGNATURE, signed by ${adminAddress}. This moves the funds; it is not a Rain API call`, }, { method: 'GET', path: `/issuing/${scope}/${idToken}/balances`, summary: 'Confirm the updated collateral balance', }, ]; } return [ { method: 'GET', path: `/issuing/${scope}/${idToken}/contracts`, summary: 'Get the smart contract and its deposit address', save: [{ name: 'DEPOSIT_ADDRESS', from: 'response[0].depositAddress' }], }, { kind: 'manual', label: 'Onchain', summary: `Send ${amount} of ${token} to DEPOSIT_ADDRESS on chain ${chainId}. This is a plain token transfer; it is not a Rain API call`, }, { method: 'GET', path: `/issuing/${scope}/${idToken}/balances`, summary: 'Confirm the deposit landed by checking spendingPower', }, ]; }, stateVars(cfg) { if (cfg.action === 'withdraw') { return [ { name: 'WITHDRAWAL_SIGNATURE', desc: 'from GET .../signatures/withdrawals response `signature`, used in the onchain withdrawAsset call' }, ]; } return [ { name: 'DEPOSIT_ADDRESS', desc: 'from GET .../contracts response `depositAddress`' }, ]; }, promptNotes(cfg, ctx) { const notes = [ 'This flow assumes a Rain-Managed program. Partner-Managed collateral is managed from the Rain Dashboard, not this API.', 'Steps marked "Onchain" are not Rain API calls: they are wallet or smart contract actions with no cURL equivalent.', 'Balances update within minutes of a deposit landing onchain. Re-poll the balances endpoint rather than waiting on a dedicated webhook for the deposit itself.', ]; if (ctx.env === 'sandbox') { notes.push('Sandbox tip: mint test rUSD by calling the rUSD test-token contract\'s mint function directly from a block explorer (max 100 per call). See /docs/sandbox-mint-test-tokens-for-collateral.'); } return notes; }, }; const transfersFlow = { id: 'transfers', title: 'Transfers & On/Off-Ramp', subtitle: 'Move funds between fiat and crypto with a payment route or a one-time transfer', docsHref: '/docs/transfers', configFields: [ { key: 'mechanism', label: 'Mechanism', type: 'segmented', default: 'route', options: [ { value: 'route', label: 'Ongoing Route' }, { value: 'transfer', label: 'One-Time Transfer' }, ], hint: 'An ongoing route stays open for repeated deposits. A one-time transfer locks a quote for a single conversion.', }, { key: 'direction', label: 'Direction', type: 'segmented', default: 'onramp', options: [ { value: 'onramp', label: 'Onramp (fiat → crypto)' }, { value: 'offramp', label: 'Offramp (crypto → fiat)' }, ], showIf: cfg => cfg.mechanism === 'route', }, { key: 'cryptoCurrency', label: 'Crypto Currency', type: 'select', default: 'usdc', options: [ { value: 'usdc', label: 'USDC' }, { value: 'rusd', label: 'rUSD' }, ], }, { key: 'cryptoRail', label: 'Crypto Rail', type: 'select', default: 'base', options: [ { value: 'ethereum', label: 'Ethereum' }, { value: 'polygon', label: 'Polygon' }, { value: 'base', label: 'Base' }, { value: 'solana', label: 'Solana' }, ], }, { key: 'fiatRail', label: 'Fiat Rail', type: 'select', default: 'ach', options: [ { value: 'ach', label: 'ACH' }, { value: 'wire', label: 'Wire' }, ], }, { key: 'amount', label: 'Amount', type: 'text', default: '500' }, ], architecture(cfg) { const route = cfg.mechanism === 'route'; const onramp = cfg.direction === 'onramp'; const rows = [[{ kicker: 'USER', title: '{USER_ID}', sub: 'Rain customer', kind: 'primary' }]]; if (route) { rows.push([{ icon: '🔁', title: 'Payment Route', sub: onramp ? 'fiat → crypto' : 'crypto → fiat' }]); } else { rows.push([{ icon: '📄', title: 'Quote', sub: 'crypto → fiat' }, { icon: '🔀', title: 'Transfer', sub: 'locked to the quote' }]); } rows.push([{ icon: '⛓', title: route && onramp ? 'Bank Transfer' : 'Onchain Deposit', sub: 'moves the actual funds', kind: 'auto' }]); rows.push([{ icon: '📊', title: 'Transaction', sub: 'type: transfer', kind: 'auto' }]); return rows; }, steps(cfg, ctx) { const cryptoCurrency = cfg.cryptoCurrency || 'usdc'; const cryptoRail = cfg.cryptoRail || 'base'; const fiatRail = cfg.fiatRail || 'ach'; const amount = cfg.amount || '500'; if (cfg.mechanism === 'transfer') { return [ { method: 'POST', path: '/payment-accounts', summary: 'Create the fiat destination account for the transfer', body: { userId: '{USER_ID}', type: 'externalFiatAccount', nickname: 'Payout account', externalFiatAccount: sampleExternalFiatAccount(fiatRail) }, save: [{ name: 'PAYMENT_ACCOUNT_ID', from: 'response.id' }], }, { method: 'POST', path: '/quotes', summary: 'Lock a quote converting crypto to fiat', body: { userId: '{USER_ID}', source: { currency: cryptoCurrency, rail: cryptoRail, amount }, destination: { currency: 'usd', rail: fiatRail, address: { type: 'paymentAccount', id: '{PAYMENT_ACCOUNT_ID}' } }, }, save: [{ name: 'QUOTE_ID', from: 'response.id' }], }, { method: 'POST', path: '/transfers', summary: 'Execute the transfer against the locked quote', headers: { 'idempotency-key': '$(uuidgen)' }, body: { quoteId: '{QUOTE_ID}', refundAddress: SAMPLE_WALLET }, save: [ { name: 'TRANSFER_ID', from: 'response.id' }, { name: 'DEPOSIT_ADDRESS', from: 'response.transfer.depositAddress.address' }, ], }, { kind: 'manual', label: 'Onchain', summary: `Send ${cryptoCurrency.toUpperCase()} on ${cryptoRail} to DEPOSIT_ADDRESS before the quote expires`, }, { method: 'GET', path: '/issuing/transactions/{TRANSFER_ID}', summary: 'Poll the transfer status until it settles', }, ]; } const onramp = cfg.direction === 'onramp'; const steps = []; if (!onramp) { steps.push({ method: 'POST', path: '/payment-accounts', summary: 'Create the fiat destination account for the offramp', body: { userId: '{USER_ID}', type: 'externalFiatAccount', nickname: 'Offramp account', externalFiatAccount: sampleExternalFiatAccount(fiatRail) }, save: [{ name: 'PAYMENT_ACCOUNT_ID', from: 'response.id' }], }); } steps.push({ method: 'POST', path: '/payment-routes', summary: onramp ? 'Create an onramp route from fiat to crypto' : 'Create an offramp route from crypto to fiat', body: onramp ? { userId: '{USER_ID}', source: { currency: 'usd', rail: fiatRail }, destination: { currency: cryptoCurrency, rail: cryptoRail, address: { type: 'onchain', address: SAMPLE_WALLET } } } : { userId: '{USER_ID}', source: { currency: cryptoCurrency, rail: cryptoRail }, destination: { currency: 'usd', rail: fiatRail, address: { type: 'paymentAccount', id: '{PAYMENT_ACCOUNT_ID}' } }, refundAddress: SAMPLE_WALLET }, save: [ { name: 'PAYMENT_ROUTE_ID', from: 'response.id' }, { name: 'DEPOSIT_ADDRESS', from: 'response.depositAddress' }, ], }); steps.push({ kind: 'manual', label: onramp ? 'Bank Transfer' : 'Onchain', summary: onramp ? `Send ${amount} via ${fiatRail.toUpperCase()} to the virtual account in DEPOSIT_ADDRESS` : `Send ${cryptoCurrency.toUpperCase()} on ${cryptoRail} to DEPOSIT_ADDRESS`, }); if (ctx.env === 'sandbox') { steps.push({ method: 'POST', path: '/simulate/payment-routes', summary: 'Sandbox only: simulate the deposit landing without waiting for a real bank or chain transfer', body: { paymentRouteId: '{PAYMENT_ROUTE_ID}', amount }, }); } steps.push({ method: 'GET', path: '/issuing/transactions?type=transfer', summary: 'See the resulting transfer transaction', }); return steps; }, stateVars(cfg) { if (cfg.mechanism === 'transfer') { return [ { name: 'PAYMENT_ACCOUNT_ID', desc: 'from POST /payment-accounts response `id`' }, { name: 'QUOTE_ID', desc: 'from POST /quotes response `id`' }, { name: 'TRANSFER_ID', desc: 'from POST /transfers response `id`' }, { name: 'DEPOSIT_ADDRESS', desc: 'from POST /transfers response `transfer.depositAddress.address`' }, ]; } const vars = [ { name: 'PAYMENT_ROUTE_ID', desc: 'from POST /payment-routes response `id`' }, { name: 'DEPOSIT_ADDRESS', desc: 'from POST /payment-routes response `depositAddress`' }, ]; if (cfg.direction === 'offramp') { vars.unshift({ name: 'PAYMENT_ACCOUNT_ID', desc: 'from POST /payment-accounts response `id`' }); } return vars; }, promptNotes(cfg, ctx) { const notes = [ 'This flow uses /payment-routes, the current path. /automations still works but is deprecated in favor of /payment-routes.', 'The Manual step has no cURL equivalent: it is a real bank transfer or onchain deposit, not a Rain API call.', 'Prefer the transactionTransfer webhook (created → completed) over polling in production.', ]; if (cfg.mechanism === 'route') { notes.push('This flow only models the USD/ach/wire ⇄ crypto path published in the OpenAPI spec. Regional rails (MXN SPEI, BRL PIX, COP) exist in the docs but are not yet reflected in the spec\'s enums, so don\'t assume their field names from this playground.'); } return notes; }, }; const transactionsFlow = { id: 'transactions', title: 'Transactions', subtitle: 'Simulate a card authorization and inspect the resulting transaction', docsHref: '/docs/transaction-simulations', configFields: [ { key: 'cardId', label: 'Card ID', type: 'text', default: '{CARD_ID}', hint: 'Use the CARD_ID from Card Creation.' }, { key: 'amount', label: 'Amount (cents)', type: 'text', default: '2500' }, { key: 'currency', label: 'Currency', type: 'select', default: 'USD', options: [ { value: 'USD', label: 'USD' }, { value: 'EUR', label: 'EUR' }, { value: 'GBP', label: 'GBP' }, ], }, { key: 'merchantName', label: 'Merchant Name', type: 'text', default: 'Blue Bottle Coffee' }, { key: 'merchantCategoryCode', label: 'Merchant Category Code', type: 'text', default: '5814' }, { key: 'outcome', label: 'Outcome', type: 'segmented', default: 'approve', options: [ { value: 'approve', label: 'Approve' }, { value: 'decline', label: 'Decline' }, ], }, { key: 'declineReason', label: 'Decline Reason', type: 'select', default: 'account_credit_limit_exceeded', options: [ { value: 'account_credit_limit_exceeded', label: 'Credit Limit Exceeded' }, { value: 'card_locked', label: 'Card Locked' }, { value: 'card_canceled', label: 'Card Canceled' }, { value: 'card_not_activated', label: 'Card Not Activated' }, { value: 'blocked_mcc', label: 'Blocked MCC' }, { value: 'blocked_merchant', label: 'Blocked Merchant' }, { value: 'balance_inquiry_not_permitted', label: 'Balance Inquiry Not Permitted' }, { value: 'expiry_mismatch', label: 'Expiry Mismatch' }, { value: 'cvv_mismatch', label: 'CVV Mismatch' }, { value: 'invalid_pin', label: 'Invalid PIN' }, { value: 'restricted_country', label: 'Restricted Country' }, ], showIf: cfg => cfg.outcome === 'decline', }, { key: 'settlement', label: 'After Authorization', type: 'segmented', default: 'settle', options: [ { value: 'settle', label: 'Settle' }, { value: 'reverse', label: 'Reverse' }, ], showIf: cfg => cfg.outcome === 'approve', }, ], architecture(cfg) { const approved = cfg.outcome === 'approve'; const rows = [ [{ kicker: 'CARD', title: cfg.cardId || '{CARD_ID}', sub: 'sandbox card', kind: 'primary' }], [{ icon: '🧾', title: 'Simulated Authorization', sub: approved ? 'authorized' : 'declined' }], ]; if (approved) { rows.push([{ icon: cfg.settlement === 'reverse' ? '↩️' : '✅', title: cfg.settlement === 'reverse' ? 'Reversed' : 'Settled', sub: 'posted transaction', kind: 'auto' }]); } rows.push([{ icon: '📊', title: 'Transaction', sub: 'viewable via API', kind: 'auto' }]); return rows; }, steps(cfg, ctx) { const approved = cfg.outcome === 'approve'; const cardId = (cfg.cardId || '').trim() || '{CARD_ID}'; const amount = Number(cfg.amount) || 2500; const body = { cardId, amount, currency: cfg.currency || 'USD', merchantName: cfg.merchantName || 'Blue Bottle Coffee', merchantCategoryCode: cfg.merchantCategoryCode || '5814', }; if (!approved) body.declineReason = cfg.declineReason || 'account_credit_limit_exceeded'; const steps = [ { method: 'POST', path: '/simulate/transactions/authorize', summary: `Simulate a card authorization, exactly as if ${body.merchantName} had initiated it`, body, save: [ { name: 'TRANSACTION_ID', from: 'response.transactionId' }, { name: 'SIMULATED_STATUS', from: 'response.status' }, ], }, ]; if (approved) { steps.push(cfg.settlement === 'reverse' ? { method: 'POST', path: '/simulate/transactions/{TRANSACTION_ID}/reverse', summary: 'Reverse the authorization hold' } : { method: 'POST', path: '/simulate/transactions/{TRANSACTION_ID}/settle', summary: 'Settle the authorization into a posted transaction' }); } steps.push( { method: 'GET', path: '/issuing/transactions/{TRANSACTION_ID}', summary: 'View the persisted transaction', }, { method: 'GET', path: `/issuing/transactions?cardId=${cardId}`, summary: 'List transactions for this card', }, ); return steps; }, stateVars(cfg) { return [ { name: 'TRANSACTION_ID', desc: 'from POST /simulate/transactions/authorize response `transactionId`' }, { name: 'SIMULATED_STATUS', desc: 'from response `status`: authorized, declined, or settled' }, ]; }, promptNotes(cfg, ctx) { return [ '/simulate/transactions/* is sandbox only and returns 404 in production.', 'The simulate response\'s status (authorized/declined/settled) is a different vocabulary from the persisted transaction\'s status (pending/reversed/declined/completed). Don\'t treat them as the same enum.', 'POST /simulate/3ds-challenge is a related sandbox tool for testing 3DS challenges, not covered by this flow.', 'Webhook lifecycle: transaction.requested → transaction.created → transaction.updated (0..n) → transaction.completed.', ]; }, }; const FLOWS = [onboardingFlow, cardCreationFlow, fundingFlow, transfersFlow, transactionsFlow]; /* ================================================================ */ /* Skeleton */ /* ================================================================ */ const SKELETON = `

Configuration

Architecture

API Flow

⚿ Get API Key ▤ Docs

Base URL:

`; /* ================================================================ */ /* State (module-level: survives SPA remounts) */ /* ================================================================ */ const state = { flowId: FLOWS[0].id, env: 'sandbox', promptTab: 'claude', cfg: {}, }; for (const flow of FLOWS) { state.cfg[flow.id] = {}; for (const field of flow.configFields) { state.cfg[flow.id][field.key] = field.default; } } let root = null; const $ = sel => root.querySelector(sel); function esc(value) { return String(value) .replace(/&/g, '&').replace(//g, '>') .replace(/"/g, '"').replace(/'/g, '''); } function currentFlow() { return FLOWS.find(f => f.id === state.flowId); } function currentCtx() { return { env: state.env, baseUrl: ENVIRONMENTS[state.env].baseUrl }; } /* ================================================================ */ /* cURL + prompt builders */ /* ================================================================ */ // {USER_ID} path tokens become $USER_ID shell vars; URL is double-quoted // so they expand once the user exports the saved IDs. function shellPath(path) { return path.replace(/\{([A-Z][A-Z0-9_]*)\}/g, '$$$1'); } function buildCurl(step, ctx) { const lines = [`curl -X ${step.method} "${ctx.baseUrl}${shellPath(step.path)}"`]; lines.push(' -H "Api-Key: $RAIN_API_KEY"'); for (const [name, value] of Object.entries(step.headers || {})) { lines.push(` -H "${name}: ${value}"`); } if (step.body) { lines.push(' -H "Content-Type: application/json"'); const json = JSON.stringify(step.body, null, 2).replace(/'/g, `'\\''`); lines.push(` -d '${json}'`); } else if (step.form) { for (const part of step.form) { lines.push(` -F "${part.name}=${part.value}"`); } } return lines.join(' \\\n'); } function visibleFields(flow, cfg) { return flow.configFields.filter(f => !f.showIf || f.showIf(cfg)); } function fieldDisplayValue(field, cfg) { const value = cfg[field.key]; if (field.options) { const opt = field.options.find(o => o.value === value); return opt ? opt.label : value; } return value; } function buildPrompt(flow, cfg, ctx, tab) { const steps = flow.steps(cfg, ctx); const lines = []; lines.push(`# ${flow.title}: Rain API Implementation`); lines.push(''); lines.push(tab === 'codex' ? '> Use with Codex: paste into your session or add to AGENTS.md.' : '> Use with Claude Code: paste into your session or add to CLAUDE.md.'); lines.push(''); lines.push('## Overview'); lines.push(flow.subtitle); lines.push(''); lines.push('## Configuration'); lines.push('| Parameter | Value |'); lines.push('|---|---|'); for (const field of visibleFields(flow, cfg)) { lines.push(`| ${field.label} | ${fieldDisplayValue(field, cfg) || '(not set)'} |`); } lines.push(`| Environment | ${ENVIRONMENTS[ctx.env].label} |`); lines.push(''); lines.push('## Authentication'); lines.push('| Header | Description |'); lines.push('|---|---|'); lines.push('| `Api-Key` | `$RAIN_API_KEY`, required on every request |'); lines.push('| `Content-Type` | `application/json`, required on JSON requests |'); lines.push(''); lines.push(`Base URL: \`${ctx.baseUrl}\``); lines.push(''); lines.push('## State Variables'); lines.push('Capture these from responses and export them before running later steps:'); lines.push(''); lines.push('| Variable | Source |'); lines.push('|---|---|'); for (const v of flow.stateVars(cfg)) { lines.push(`| \`${v.name}\` | ${v.desc} |`); } lines.push(''); lines.push('## Implementation Constraints'); lines.push('- Maintain transactional consistency across all steps.'); lines.push('- Capture and persist every saved ID as state.'); lines.push('- Ensure request parameters match the configuration exactly.'); lines.push('- Do not create duplicate resources (look up by externalId before creating).'); lines.push('- Handle API errors gracefully with appropriate error messages.'); lines.push(''); lines.push('## Before Implementation'); lines.push('1. Review the complete API sequence in "## API Sequence".'); lines.push('2. Identify dependency relationships between steps (which IDs flow where).'); lines.push('3. Plan an error handling strategy for each API call.'); lines.push('4. Then implement the complete flow.'); lines.push(''); lines.push('## API Sequence'); steps.forEach((step, i) => { lines.push(''); lines.push(step.method ? `### Step ${i + 1}: ${step.method} ${step.path}` : `### Step ${i + 1}: ${step.label || 'Manual'} (not a Rain API call)`); lines.push(step.summary + '.'); for (const [name, value] of Object.entries(step.headers || {})) { lines.push(`Header: \`${name}: ${value}\``); } if (step.body) { lines.push('Request body:'); lines.push('```json'); lines.push(JSON.stringify(step.body, null, 2)); lines.push('```'); } else if (step.form) { lines.push('multipart/form-data fields:'); for (const part of step.form) { lines.push(`- ${part.name}: ${part.value}`); } } if (step.save && step.save.length) { lines.push('Save: ' + step.save.map(s => `${s.name} = ${s.from}`).join('; ')); } }); lines.push(''); lines.push('## Notes'); for (const note of flow.promptNotes(cfg, ctx)) { lines.push(`- ${note}`); } lines.push('- Sample values in the "## API Sequence" request bodies above (names, addresses, wallet and bank details) are placeholders. Replace them with real data.'); lines.push(''); lines.push('## Validation Checklist'); lines.push('- [ ] Capture and persist every state variable correctly.'); lines.push('- [ ] Pull every value from an API response; never hardcode an ID.'); lines.push('- [ ] Handle errors for every API call.'); lines.push('- [ ] Validate API responses before extracting IDs.'); lines.push(''); lines.push('## Reference Documentation'); lines.push(`- ${flow.title}: ${flow.docsHref}`); lines.push(`- Get an API key: ${API_KEY_HREF}`); return lines.join('\n'); } /* ================================================================ */ /* Renderers */ /* ================================================================ */ function renderSidebar() { const items = FLOWS.map(flow => ` `).join(''); $('#nav-flows').innerHTML = items; const envButtons = Object.entries(ENVIRONMENTS).map(([key, env]) => ` `).join(''); $('#env-segmented').innerHTML = envButtons; } function renderHeader() { const flow = currentFlow(); $('#flow-title').textContent = flow.title; $('#flow-subtitle').textContent = flow.subtitle; $('#docs-btn').href = flow.docsHref; } function renderConfig() { const flow = currentFlow(); const cfg = state.cfg[flow.id]; const html = visibleFields(flow, cfg).map(field => { let control; if (field.type === 'segmented') { control = `

` + field.options.map(opt => ` `).join('') + `

`; } else if (field.type === 'select') { control = ``; } else { control = ``; } const hint = field.hint ? `

${esc(field.hint)}

` : ''; return `

${esc(field.label)}${control}${hint}

`; }).join(''); $('#config-body').innerHTML = html; } function renderArchitecture() { const flow = currentFlow(); const cfg = state.cfg[flow.id]; const rows = flow.architecture(cfg); const html = rows.map(row => `

` + row.map(node => `

${node.kicker ? `

${esc(node.kicker)}

` : ''} ${node.icon ? `

${node.icon}

` : ''}

${esc(node.title)}

${node.sub ? `

${esc(node.sub)}

` : ''}

`).join('') + `

` ).join('

↓

'); $('#arch-body').innerHTML = html; } function renderSteps() { const flow = currentFlow(); const cfg = state.cfg[flow.id]; const ctx = currentCtx(); const steps = flow.steps(cfg, ctx); const html = steps.map((step, i) => { if (!step.method) { return `

${i + 1}

${esc(step.label || 'Manual')}

${esc(step.summary)}

`; } const path = esc(step.path).replace(/\{([A-Z][A-Z0-9_]*)\}/g, '{$1}'); const headers = step.headers ? `

+ header ${esc(Object.keys(step.headers).join(', '))}

` : ''; return `

${i + 1}

${step.method} ${path}

${esc(step.summary)}

${headers}

`; }).join(''); $('#steps-body').innerHTML = html; $('#base-url').textContent = ctx.baseUrl; } function renderPrompt() { const flow = currentFlow(); const cfg = state.cfg[flow.id]; $('#prompt-tabs').innerHTML = ['claude', 'codex'].map(tab => ` `).join(''); $('#prompt-body').textContent = buildPrompt(flow, cfg, currentCtx(), state.promptTab); } function renderOutputs() { renderArchitecture(); renderSteps(); renderPrompt(); } function renderAll() { renderSidebar(); renderHeader(); renderConfig(); renderOutputs(); } /* ================================================================ */ /* Clipboard */ /* ================================================================ */ function copyText(text, button) { const done = () => { const original = button.innerHTML; button.innerHTML = '✓ Copied'; button.classList.add('copied'); setTimeout(() => { button.innerHTML = original; button.classList.remove('copied'); }, 1400); }; if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text).then(done); } else { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); done(); } } /* ================================================================ */ /* Events (delegated to the widget root) */ /* ================================================================ */ function attachEvents() { root.addEventListener('click', event => { const target = event.target.closest('[data-action]'); if (!target) return; const flow = currentFlow(); const cfg = state.cfg[flow.id]; switch (target.dataset.action) { case 'select-flow': state.flowId = target.dataset.flow; renderAll(); break; case 'select-env': state.env = target.dataset.env; renderAll(); break; case 'set-segment': cfg[target.dataset.field] = target.dataset.value; renderAll(); break; case 'set-tab': state.promptTab = target.dataset.tab; renderPrompt(); break; case 'copy-curl': { const steps = flow.steps(cfg, currentCtx()); copyText(buildCurl(steps[Number(target.dataset.step)], currentCtx()), target); break; } case 'copy-prompt': copyText(buildPrompt(flow, cfg, currentCtx(), state.promptTab), target); break; } }); root.addEventListener('input', event => { const field = event.target.dataset && event.target.dataset.field; if (!field || event.target.tagName === 'SELECT') return; state.cfg[state.flowId][field] = event.target.value; renderOutputs(); }); root.addEventListener('change', event => { if (event.target.dataset && event.target.dataset.field && event.target.tagName === 'SELECT') { state.cfg[state.flowId][event.target.dataset.field] = event.target.value; renderOutputs(); } }); } /* ================================================================ */ /* Boot: mount whenever #rain-playground appears */ /* ================================================================ */ function boot() { const el = document.getElementById('rain-playground'); if (!el || el.dataset.rpMounted) return; el.dataset.rpMounted = '1'; root = el; root.innerHTML = SKELETON; attachEvents(); renderAll(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } // Mintlify navigates client-side; mount when the container (re)appears. new MutationObserver(() => boot()) .observe(document.documentElement, { childList: true, subtree: true }); })();

Rain-managed

Partner-managed