{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","platform-tabs","platform-tab","horizontal-tabs","horizontal-tab","br","img","feature-list","icon","yes","no"]},"type":"markdown"},"seo":{"title":"Checkout","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"checkout","__idx":0},"children":["Checkout"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Accept payments with an embeddable checkout, modular components, or no-code links."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"find-your-solution","__idx":1},"children":["Find your solution"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"checkout-recommendation-system"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"recommendation-selector","id":"developer-selector"},"children":[{"$$mdtype":"Tag","name":"label","attributes":{"htmlFor":"developer-availability"},"children":["\n      Do you have development capacity to build your payment integration?\n    "]},{"$$mdtype":"Tag","name":"select","attributes":{"id":"developer-availability","className":"recommendation-dropdown"},"children":[{"$$mdtype":"Tag","name":"option","attributes":{"value":""},"children":["Select an option..."]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"yes"},"children":["Yes, we have development capacity"]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"no"},"children":["No, we need a no-code solution"]}]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"recommendation-selector","id":"website-selector","style":{"display":"none"}},"children":[{"$$mdtype":"Tag","name":"label","attributes":{"htmlFor":"website-app"},"children":["\n      Do you have a website or app where the payment needs to take place?\n    "]},{"$$mdtype":"Tag","name":"select","attributes":{"id":"website-app","className":"recommendation-dropdown"},"children":[{"$$mdtype":"Tag","name":"option","attributes":{"value":""},"children":["Select an option..."]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"embedded"},"children":["Yes, payment must happen inside our website or app"]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"no-website"},"children":["No, we don","'","t have a website or app — we just need a hosted payment page we can share with customers"]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"both"},"children":["We have a website but also want a standalone payment page option"]}]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"recommendation-selector","id":"timeline-selector","style":{"display":"none"}},"children":[{"$$mdtype":"Tag","name":"label","attributes":{"htmlFor":"timeline"},"children":["\n      How fast do you need to go live?\n    "]},{"$$mdtype":"Tag","name":"select","attributes":{"id":"timeline","className":"recommendation-dropdown"},"children":[{"$$mdtype":"Tag","name":"option","attributes":{"value":""},"children":["Select an option..."]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"fast"},"children":["As fast as possible — hours, not weeks"]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"invest-time"},"children":["We can invest time to build the right experience"]}]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"recommendation-selector","id":"control-selector","style":{"display":"none"}},"children":[{"$$mdtype":"Tag","name":"label","attributes":{"htmlFor":"design-control"},"children":["\n      How much control do you need over the design of your payment form?\n    "]},{"$$mdtype":"Tag","name":"select","attributes":{"id":"design-control","className":"recommendation-dropdown"},"children":[{"$$mdtype":"Tag","name":"option","attributes":{"value":""},"children":["Select an option..."]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"full"},"children":["Full control — every field, button and layout must match our brand exactly"]},{"$$mdtype":"Tag","name":"option","attributes":{"value":"standard"},"children":["Standard branding is enough — colours, fonts, button shape, component size"]}]}]}]},{"$$mdtype":"Tag","name":"style","attributes":{},"children":["\n.checkout-recommendation-system {\n  margin: 2rem 0;\n  padding: 1.5rem;\n  background: linear-gradient(135deg, var(--white) 0%, var(--bright-blue-01) 100%);\n  border-radius: 8px;\n  border: 1px solid var(--bright-blue-02);\n}\n\n.recommendation-selector {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 600px;\n  margin-bottom: 1.5rem;\n}\n\n.recommendation-selector label {\n  color: var(--bright-blue-09);\n  font-size: 1rem;\n}\n\n.recommendation-dropdown {\n  padding: 0.75rem 2.5rem 0.75rem 1rem;\n  font-size: 1rem;\n  border: 2px solid var(--grey-02);\n  border-radius: 6px;\n  background-color: white;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 1rem center;\n  background-size: 12px;\n}\n\n.recommendation-dropdown:hover {\n  border-color: #0600ff;\n}\n\n.recommendation-dropdown:focus {\n  outline: none;\n  border-color: #0600ff;\n  box-shadow: 0 0 0 3px rgba(6, 0, 255, 0.1);\n}\n\nh2 {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n\n.recommended-badge {\n  display: inline-block;\n  background: linear-gradient(135deg, var(--green) 0%, var(--bright-blue) 100%);\n  color: white;\n  padding: 0.25rem 0.75rem;\n  border-radius: 4px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n  line-height: 1.5;\n  flex-shrink: 0;\n}\n\n.horizontal-tab.recommended {\n  position: relative;\n}\n\n.horizontal-tab.recommended::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: linear-gradient(135deg, var(--green) 0%, var(--bright-blue) 100%);\n  border-radius: 4px 4px 0 0;\n}\n"]},{"$$mdtype":"Tag","name":"HtmlScript","attributes":{},"children":["\n(function() {\n  // Prevent multiple initialisations\n  if (window.__checkoutRecommendationInitialized) return;\n  window.__checkoutRecommendationInitialized = true;\n  \n  const DEBUG = true;\n  let currentRecommendation = null;\n  let isManualTabSwitch = false;\n  \n  function log(...args) {\n    if (DEBUG) console.log('[Checkout Rec]', ...args);\n  }\n  \n  // Recommendation logic\n  const recommendationRules = {\n    q1: {\n      'no': { \n        recommend: 'Links', \n        copy: 'Links is the only product that requires zero coding — merchants create and share payment links directly from the Unity Portal.', \n        showNext: false \n      }\n    },\n    q2: {\n      'no-website': { \n        recommend: 'Links', \n        copy: 'Links is the natural fit — it generates a hosted payment page that works anywhere, no website required.', \n        showNext: false \n      },\n      'embedded': { \n        recommend: null,\n        showNext: true\n      },\n      'both': { \n        recommend: null,\n        showNext: true\n      }\n    },\n    q3: {\n      'fast': { \n        recommend: null,\n        copy: null,\n        showNext: false,\n        dynamic: true // Special flag to handle based on Q2\n      },\n      'invest-time': { \n        recommend: null,\n        copy: null,\n        showNext: true,\n        dynamic: true // Special flag to handle based on Q2\n      }\n    },\n    q4: {\n      'full': { \n        recommend: 'Components', \n        copy: 'Components lets you mount each input individually, position them freely, replace PXP UI elements with your own, and apply unlimited custom styling with no constraints.', \n        showNext: false \n      },\n      'standard': { \n        recommend: 'Drop-in',\n        secondary: 'Links',\n        copy: 'Drop-in and Links both offer standard branding control. Drop-in offers meaningful branding control via Unity: accent colour, body text colour, background colour, button text/background colour, button shape, font family including custom Google Fonts, and component size scaling. Links provides a fully hosted payment page with customisable branding and appearance.',\n        showNext: false \n      }\n    }\n  };\n\n  function getRecommendation() {\n    const q1 = document.getElementById('developer-availability')?.value;\n    const q2 = document.getElementById('website-app')?.value;\n    const q3 = document.getElementById('timeline')?.value;\n    const q4 = document.getElementById('design-control')?.value;\n    \n    // Check Q4 first (deepest level) with conditional logic\n    if (q4 && recommendationRules.q4[q4]) {\n      // Special case: Q1=yes, Q2=embedded, Q3=invest-time, Q4=standard → Drop-in only\n      if (q4 === 'standard' && q2 === 'embedded') {\n        return {\n          recommend: 'Drop-in',\n          secondary: null,\n          copy: 'Drop-in offers meaningful branding control via Unity: accent colour, body text colour, background colour, button text/background colour, button shape, font family including custom Google Fonts, and component size scaling.',\n          showNext: false\n        };\n      }\n      \n      return recommendationRules.q4[q4];\n    }\n    \n    // Check Q3 with dynamic logic based on Q2\n    if (q3 && recommendationRules.q3[q3]) {\n      const q3Rule = recommendationRules.q3[q3];\n      \n      if (q3 === 'fast') {\n        // Q3 \"fast\" logic depends on Q2\n        if (q2 === 'embedded') {\n          // Q1=yes, Q2=embedded, Q3=fast → Drop-in only\n          return {\n            recommend: 'Drop-in',\n            copy: 'Drop-in is a plug-and-play single SDK integration, designed to get merchants live in days with all payment methods included out of the box.',\n            showNext: false\n          };\n        } else if (q2 === 'both') {\n          // Q1=yes, Q2=both, Q3=fast → Drop-in and Links\n          return {\n            recommend: 'Drop-in',\n            secondary: 'Links',\n            copy: 'Drop-in and Links are both designed for speed. Drop-in is a plug-and-play single SDK integration that gets you live in days with all payment methods included. Links requires zero coding — create and share payment links directly from the Unity Portal.',\n            showNext: false\n          };\n        }\n      } else if (q3 === 'invest-time') {\n        // Q3 \"invest-time\" logic depends on Q2\n        if (q2 === 'embedded') {\n          // Q1=yes, Q2=embedded, Q3=invest-time → Components and Drop-in\n          return {\n            recommend: 'Components',\n            secondary: 'Drop-in',\n            copy: 'Components and Drop-in are both designed for embedded payments. Components lets you mount each input individually and apply unlimited custom styling. Drop-in is a plug-and-play single SDK integration that gets you live in days with all payment methods included.',\n            showNext: false\n          };\n        } else if (q2 === 'both') {\n          // Q1=yes, Q2=both, Q3=invest-time → Show Q4\n          return { recommend: null, showNext: true };\n        }\n      }\n    }\n    \n    // Check Q2\n    if (q2 && recommendationRules.q2[q2]) {\n      return recommendationRules.q2[q2];\n    }\n    \n    // Check Q1\n    if (q1 && recommendationRules.q1[q1]) {\n      return recommendationRules.q1[q1];\n    }\n    \n    return null;\n  }\n\n  // Get current active platform\n  function getCurrentPlatform() {\n    // Find the active platform button (Web, Android, or iOS)\n    const platformButtons = document.querySelectorAll('.components__PlatformTabButton-sc-5p96il-7');\n    \n    log('Checking platform buttons for active state...');\n    for (const button of platformButtons) {\n      const buttonText = button.textContent.trim();\n      const classes = button.className;\n      \n      // The active platform button has class 'kxoAlJ', inactive has 'diVxVF'\n      const isSelected = classes.includes('kxoAlJ');\n      \n      log(`  Button \"${buttonText}\": ${isSelected ? 'ACTIVE' : 'inactive'} (${classes})`);\n      \n      if (isSelected) {\n        const buttonTextLower = buttonText.toLowerCase();\n        log('✓ Active platform button found:', buttonText);\n        \n        if (buttonTextLower.includes('android')) return 'Android';\n        if (buttonTextLower.includes('ios')) return 'iOS';\n        if (buttonTextLower.includes('web')) return 'Web';\n      }\n    }\n    \n    log('Could not detect active platform from buttons, defaulting to Web');\n    return 'Web'; // Default to Web\n  }\n\n  function applyRecommendation(result) {\n    log('=== Applying recommendation:', result, 'isManualTabSwitch:', isManualTabSwitch);\n    \n    // Detect current platform\n    const currentPlatform = getCurrentPlatform();\n    log('Current platform:', currentPlatform);\n    \n    // Create a working copy of result to avoid modifying the original\n    let workingResult = result;\n    \n    // Adjust recommendation if Links is recommended on Android/iOS\n    if ((currentPlatform === 'Android' || currentPlatform === 'iOS') && result) {\n      \n      // If Links is the only recommendation, switch to Drop-in (not Components, since they said \"no dev capacity\")\n      if (result.recommend === 'Links' && !result.secondary) {\n        log('Links not available on', currentPlatform, '- switching to Drop-in');\n        workingResult = {\n          recommend: 'Drop-in',\n          secondary: null,\n          copy: 'Links (our no-code hosted payment page solution) is only available for Web. For ' + currentPlatform + ', we recommend Drop-in instead — a low-code embedded checkout that gets you live in days with minimal development effort.',\n          showNext: false\n        };\n      } \n      // If Links is secondary, remove it and update copy\n      else if (result.secondary === 'Links') {\n        log('Removing Links as secondary on', currentPlatform);\n        workingResult = {\n          recommend: result.recommend,\n          secondary: null,\n          copy: result.recommend + ' is recommended for ' + currentPlatform + '. (Note: Links is only available for Web.)',\n          showNext: false\n        };\n      }\n    }\n    \n    // Always remove all existing badges first (both heading badges and tab badges)\n    const existingBadges = document.querySelectorAll('.recommended-badge');\n    log('Removing', existingBadges.length, 'existing badges');\n    existingBadges.forEach(badge => {\n      log('  Removing badge from:', badge.parentElement?.textContent?.substring(0, 50));\n      const parent = badge.parentElement;\n      if (parent) {\n        parent.removeAttribute('data-has-badge');\n      }\n      badge.remove();\n    });\n    \n    // Remove all tab badges\n    removeAllTabBadges();\n    \n    if (!workingResult || !workingResult.recommend) {\n      log('No recommendation, exiting');\n      return;\n    }\n    \n    const recommended = workingResult.recommend;\n    const secondary = workingResult.secondary;\n    \n    // Store current recommendation (store the ORIGINAL, not the platform-adjusted version)\n    currentRecommendation = result;\n    log('Stored recommendation:', currentRecommendation);\n    \n    // Add badge to the recommended tab\n    addBadgeToTab(recommended);\n    \n    // Add badge to secondary recommendation if it exists\n    if (secondary) {\n      addBadgeToTab(secondary);\n    }\n    \n    // FIRST: Click the correct tab if not manual switch\n    if (!isManualTabSwitch) {\n      log('Looking for tab button to click first...');\n      const allTabsLists = document.querySelectorAll('.components__HorizontalTabsList-sc-5p96il-18');\n      log('Found', allTabsLists.length, 'tab lists');\n      \n      for (const tabsList of allTabsLists) {\n        // Check if this tabs list is in the currently active platform\n        const platformPanel = tabsList.closest('[role=\"tabpanel\"]');\n        if (platformPanel && platformPanel.getAttribute('aria-hidden') === 'true') {\n          log('Skipping tabs list (platform panel hidden)');\n          continue;\n        }\n        \n        const buttons = tabsList.querySelectorAll('button');\n        log('Checking', buttons.length, 'buttons in this list');\n        \n        for (const btn of buttons) {\n          const btnContent = btn.textContent.trim();\n          log('  Button:', btnContent.substring(0, 30));\n          \n          if (btnContent.includes(recommended)) {\n            const ariaSelected = btn.getAttribute('aria-selected');\n            log('  ✓ Found matching button, aria-selected:', ariaSelected);\n            \n            if (ariaSelected !== 'true') {\n              log('  Clicking button to switch tab');\n              btn.click();\n              \n              // Wait for tab switch to complete, then add badge\n              setTimeout(() => addBadgeToVisibleHeading(workingResult), 100);\n              return; // Exit early, badge will be added after timeout\n            } else {\n              log('  Button already selected');\n              break;\n            }\n          }\n        }\n      }\n    }\n    \n    // If we get here, either manual switch or button already selected\n    // Add badge immediately\n    addBadgeToVisibleHeading(workingResult);\n  }\n  \n  function removeAllTabBadges() {\n    log('=== Removing all tab badges and recommendation copy');\n    // Find all tab titles that might have badges\n    const allTabTitles = document.querySelectorAll('[class*=\"HorizontalTabTitle\"]');\n    allTabTitles.forEach(title => {\n      const badge = title.querySelector('.tab-badge-recommended') ||\n                   Array.from(title.querySelectorAll('span')).find(span => \n                     span.textContent === 'Recommended' || span.textContent === 'RECOMMENDED'\n                   );\n      if (badge) {\n        log('  Removing tab badge from:', title.textContent.substring(0, 30));\n        badge.remove();\n      }\n    });\n    \n    // Remove recommendation copy\n    const existingCopy = document.querySelectorAll('.recommendation-copy');\n    existingCopy.forEach(copy => {\n      log('  Removing recommendation copy');\n      copy.remove();\n    });\n  }\n  \n  function addBadgeToTab(recommended) {\n    log('=== Adding badge to tab for:', recommended);\n    \n    // Find all horizontal tab lists in visible platform panels\n    const allTabsLists = document.querySelectorAll('.components__HorizontalTabsList-sc-5p96il-18');\n    \n    for (const tabsList of allTabsLists) {\n      // Check if this tabs list is in the currently active platform\n      const platformPanel = tabsList.closest('[role=\"tabpanel\"]');\n      if (platformPanel && platformPanel.getAttribute('aria-hidden') === 'true') {\n        log('Skipping tabs list (platform panel hidden)');\n        continue;\n      }\n      \n      // Find all tab buttons\n      const buttons = tabsList.querySelectorAll('button');\n      \n      for (const btn of buttons) {\n        // Look for the tab title within the button\n        const tabTitle = btn.querySelector('[class*=\"HorizontalTabTitle\"]');\n        if (!tabTitle) continue;\n        \n        const titleText = tabTitle.textContent.trim();\n        \n        // Check if this tab matches the recommendation\n        if (titleText.includes(recommended)) {\n          log('  Found matching tab:', titleText);\n          \n          // Check if badge already exists (check for both our custom class and any span with \"Recommended\")\n          const existingBadge = tabTitle.querySelector('.tab-badge-recommended') || \n                               Array.from(tabTitle.querySelectorAll('span')).find(span => \n                                 span.textContent === 'Recommended' || span.textContent === 'RECOMMENDED'\n                               );\n          if (existingBadge) {\n            log('  Badge already exists, skipping');\n            continue;\n          }\n          \n          // Create and add badge matching the original .recommended-badge styling\n          const badge = document.createElement('span');\n          badge.className = 'tab-badge-recommended';\n          badge.textContent = 'Recommended';\n          badge.style.cssText = `\n            display: inline-block;\n            background: linear-gradient(135deg, var(--green) 0%, var(--bright-blue) 100%);\n            color: white;\n            padding: 0.15rem 0.5rem;\n            border-radius: 3px;\n            font-size: 0.625rem;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            white-space: nowrap;\n            line-height: 1.5;\n            margin-left: 0.5rem;\n          `;\n          \n          tabTitle.appendChild(badge);\n          log('  Badge added to tab:', titleText);\n        }\n      }\n    }\n  }\n  \n  function addRecommendationCopy(result) {\n    log('=== Adding recommendation copy for:', result);\n    \n    // Remove any existing recommendation copy first\n    const existingCopy = document.querySelectorAll('.recommendation-copy');\n    existingCopy.forEach(copy => copy.remove());\n    \n    if (!result || !result.recommend || !result.copy) {\n      log('No recommendation copy to display');\n      return;\n    }\n    \n    const copyText = result.copy;\n    \n    // Find which question was answered to trigger this recommendation\n    const q1 = document.getElementById('developer-availability')?.value;\n    const q2 = document.getElementById('website-app')?.value;\n    const q3 = document.getElementById('timeline')?.value;\n    const q4 = document.getElementById('design-control')?.value;\n    \n    let targetSelector = null;\n    \n    // Determine which selector to place the copy after (check from Q4 down to Q1)\n    if (q4) {\n      targetSelector = document.getElementById('control-selector');\n      log('Target: Q4 control-selector');\n    } else if (q3) {\n      targetSelector = document.getElementById('timeline-selector');\n      log('Target: Q3 timeline-selector');\n    } else if (q2) {\n      targetSelector = document.getElementById('website-selector');\n      log('Target: Q2 website-selector');\n    } else if (q1) {\n      targetSelector = document.getElementById('developer-selector');\n      log('Target: Q1 developer-selector');\n    }\n    \n    if (!targetSelector) {\n      log('No target selector found for recommendation copy');\n      return;\n    }\n    \n    // Create and insert the recommendation copy\n    const copyElement = document.createElement('div');\n    copyElement.className = 'recommendation-copy';\n    copyElement.textContent = copyText;\n    copyElement.style.cssText = `\n      font-size: 0.95rem;\n      color: var(--bright-blue-08);\n      margin-top: 1rem;\n      margin-bottom: 1.5rem;\n      padding: 1rem;\n      border-left: 3px solid var(--bright-blue);\n      line-height: 1.5;\n    `;\n    \n    // Insert after the selector\n    targetSelector.insertAdjacentElement('afterend', copyElement);\n    log('Recommendation copy added after selector');\n  }\n  \n  function addBadgeToVisibleHeading(result) {\n    log('=== Adding badge to visible heading for:', result);\n    \n    if (!result || !result.recommend) {\n      return;\n    }\n    \n    const recommended = result.recommend;\n    \n    // Find all h2 headings in the document\n    const headings = document.querySelectorAll('h2');\n    log('Found', headings.length, 'h2 headings');\n    \n    let badgeCount = 0;\n    \n    // Find THE ONE currently visible heading that matches\n    for (const heading of headings) {\n      const text = heading.textContent.trim();\n      \n      // Remove any existing \"Recommended\" text for clean comparison\n      const cleanText = text.replace('Recommended', '').trim();\n      \n      // Match pattern like \"Components for Web\", \"Drop-in for Android\", etc.\n      // Must be EXACT match: \"Drop-in for Web\" not \"Links for Web\"\n      const expectedText = recommended + ' for';\n      if (cleanText.startsWith(expectedText)) {\n        log('Found matching heading:', cleanText);\n        \n        // Check if this heading already has a badge\n        const existingBadge = heading.querySelector('.recommended-badge');\n        if (existingBadge) {\n          log('  ⚠ Heading already has a badge, skipping');\n          continue;\n        }\n        \n        // Find the tab panel container\n        const tabPanel = heading.closest('[role=\"tabpanel\"]');\n        log('  Tab panel:', tabPanel);\n        \n        if (tabPanel) {\n          const ariaHidden = tabPanel.getAttribute('aria-hidden');\n          const isHidden = ariaHidden === 'true';\n          log('  aria-hidden:', ariaHidden, 'isHidden:', isHidden);\n          \n          if (isHidden) {\n            log('✗ Tab panel is hidden (aria-hidden=true), skipping');\n            continue;\n          }\n        }\n        \n        // Additional visibility checks\n        const offsetParent = heading.offsetParent;\n        const computedStyle = window.getComputedStyle(heading);\n        const rect = heading.getBoundingClientRect();\n        const isVisible = offsetParent !== null && \n                         computedStyle.display !== 'none' &&\n                         computedStyle.visibility !== 'hidden' &&\n                         rect.width > 0 && rect.height > 0;\n        \n        log('  offsetParent:', offsetParent);\n        log('  display:', computedStyle.display);\n        log('  visibility:', computedStyle.visibility);\n        log('  rect:', rect.width, 'x', rect.height);\n        log('  isVisible:', isVisible);\n        \n        if (isVisible && badgeCount === 0) {\n          log('✓ Heading is visible, adding badge (count:', badgeCount, ')');\n          \n          // Add badge with unique identifier\n          const badge = document.createElement('span');\n          badge.className = 'recommended-badge';\n          badge.textContent = 'Recommended';\n          badge.setAttribute('data-heading', cleanText);\n          badge.setAttribute('data-recommendation', recommended);\n          heading.appendChild(badge);\n          heading.setAttribute('data-has-badge', 'true');\n          badgeCount++;\n          log('Badge added to:', cleanText, '(total badges now:', badgeCount, ')');\n          \n          // Only badge ONE visible heading, then stop\n          log('Stopping search (found visible match, badgeCount:', badgeCount, ')');\n          break;\n        } else {\n          log('✗ Heading is NOT visible or already badged, skipping');\n        }\n      }\n    }\n    \n    // Add recommendation copy under the dropdown\n    addRecommendationCopy(result);\n    \n    log('=== Done adding badge (total badges added:', badgeCount, ')');\n  }\n\n  // Handle dropdown changes\n  function handleDropdownChange() {\n    log('>>> Dropdown changed');\n    const result = getRecommendation();\n    log('Current result:', result);\n    \n    // Handle visibility of next questions\n    const q1 = document.getElementById('developer-availability')?.value;\n    const q2 = document.getElementById('website-app')?.value;\n    const q3 = document.getElementById('timeline')?.value;\n    \n    const websiteSelector = document.getElementById('website-selector');\n    const timelineSelector = document.getElementById('timeline-selector');\n    const controlSelector = document.getElementById('control-selector');\n    \n    // Q1 logic\n    if (q1 === 'yes') {\n      // Show Q2\n      if (websiteSelector) websiteSelector.style.display = 'flex';\n    } else if (q1 === 'no') {\n      // Hide all subsequent questions\n      if (websiteSelector) websiteSelector.style.display = 'none';\n      if (timelineSelector) timelineSelector.style.display = 'none';\n      if (controlSelector) controlSelector.style.display = 'none';\n      // Clear subsequent dropdowns\n      if (document.getElementById('website-app')) document.getElementById('website-app').value = '';\n      if (document.getElementById('timeline')) document.getElementById('timeline').value = '';\n      if (document.getElementById('design-control')) document.getElementById('design-control').value = '';\n    } else {\n      // No selection - hide all\n      if (websiteSelector) websiteSelector.style.display = 'none';\n      if (timelineSelector) timelineSelector.style.display = 'none';\n      if (controlSelector) controlSelector.style.display = 'none';\n    }\n    \n    // Q2 logic\n    if (q2 === 'embedded' || q2 === 'both') {\n      // Show Q3\n      if (timelineSelector) timelineSelector.style.display = 'flex';\n    } else if (q2 === 'no-website') {\n      // Hide Q3 and Q4\n      if (timelineSelector) timelineSelector.style.display = 'none';\n      if (controlSelector) controlSelector.style.display = 'none';\n      if (document.getElementById('timeline')) document.getElementById('timeline').value = '';\n      if (document.getElementById('design-control')) document.getElementById('design-control').value = '';\n    } else if (q2 === '') {\n      // Q2 cleared - hide Q3 and Q4\n      if (timelineSelector) timelineSelector.style.display = 'none';\n      if (controlSelector) controlSelector.style.display = 'none';\n    }\n    \n    // Q3 logic\n    if (q3 === 'invest-time') {\n      // Show Q4\n      if (controlSelector) controlSelector.style.display = 'flex';\n    } else if (q3 === 'fast') {\n      // Hide Q4\n      if (controlSelector) controlSelector.style.display = 'none';\n      if (document.getElementById('design-control')) document.getElementById('design-control').value = '';\n    } else if (q3 === '') {\n      // Q3 cleared - hide Q4\n      if (controlSelector) controlSelector.style.display = 'none';\n    }\n    \n    // Apply recommendation\n    applyRecommendation(result);\n  }\n  \n  // Handle developer availability change\n  function handleDeveloperAvailabilityChange() {\n    log('>>> Developer availability changed');\n    handleDropdownChange();\n  }\n\n  // Handle platform tab changes\n  function handlePlatformTabChange() {\n    log('>>> Platform tab clicked');\n    // Remove tab badges when switching platforms\n    removeAllTabBadges();\n    \n    // Re-apply the current recommendation to the new active platform\n    if (currentRecommendation) {\n      log('Re-applying stored recommendation:', currentRecommendation);\n      setTimeout(() => applyRecommendation(currentRecommendation), 100);\n    } else {\n      log('No stored recommendation to re-apply');\n    }\n  }\n  \n  // Handle horizontal tab changes\n  function handleHorizontalTabChange() {\n    log('>>> Horizontal tab clicked');\n    isManualTabSwitch = true;\n    \n    // Remove all badges immediately when switching horizontal tabs\n    const existingBadges = document.querySelectorAll('.recommended-badge');\n    log('After tab switch, removing', existingBadges.length, 'badges');\n    existingBadges.forEach(badge => badge.remove());\n    \n    // Don't remove tab badges when manually switching - they should stay visible\n    \n    // Re-apply recommendation after tab content has loaded\n    if (currentRecommendation) {\n      log('Re-applying recommendation after horizontal tab switch');\n      setTimeout(() => {\n        applyRecommendation(currentRecommendation);\n        // Reset the flag after applying\n        setTimeout(() => {\n          isManualTabSwitch = false;\n          log('Reset isManualTabSwitch to false');\n        }, 100);\n      }, 50);\n    } else {\n      isManualTabSwitch = false;\n    }\n  }\n\n  // Initialize\n  function initialize() {\n    log('Initialising...');\n    \n    // Attach listener to all dropdowns\n    const dropdowns = [\n      'developer-availability',\n      'website-app',\n      'timeline',\n      'design-control'\n    ];\n    \n    dropdowns.forEach(id => {\n      const dropdown = document.getElementById(id);\n      if (dropdown && !dropdown.__listenerAttached) {\n        dropdown.addEventListener('change', handleDropdownChange);\n        dropdown.__listenerAttached = true;\n        log(`Dropdown ${id} listener attached`);\n      }\n    });\n    \n    // Listen for platform tab button clicks\n    const platformButtons = document.querySelectorAll('.components__PlatformTabButton-sc-5p96il-7');\n    log('Found', platformButtons.length, 'platform buttons');\n    \n    platformButtons.forEach((btn, index) => {\n      if (!btn.__listenerAttached) {\n        btn.addEventListener('click', handlePlatformTabChange);\n        btn.__listenerAttached = true;\n        log('  Attached listener to platform button', index, ':', btn.textContent.trim());\n      }\n    });\n    \n    // Listen for horizontal tab button clicks (the Components/Drop-in buttons)\n    const horizontalButtons = document.querySelectorAll('.components__HorizontalTabsList-sc-5p96il-18 button');\n    log('Found', horizontalButtons.length, 'horizontal tab buttons');\n    \n    horizontalButtons.forEach((btn, index) => {\n      if (!btn.__listenerAttached) {\n        btn.addEventListener('click', handleHorizontalTabChange);\n        btn.__listenerAttached = true;\n        log('  Attached listener to horizontal button', index);\n      }\n    });\n    \n    log('Initialisation complete');\n  }\n\n  // Wait for DOM to be ready\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initialize);\n  } else {\n    initialize();\n  }\n})();\n"]},{"$$mdtype":"Tag","name":"PlatformTabs","attributes":{},"children":[{"$$mdtype":"Tag","name":"PlatformTab","attributes":{"icon":"globe","iconType":"solid","label":"Web"},"children":[{"$$mdtype":"Tag","name":"HorizontalTabs","attributes":{},"children":[{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-checkout-components.3ba090253e01195cce997eeb3b34439d2e3df19708949b447442244e8711d39a.1a7bc35e.svg","bgColor":"#0600ff","title":"Components","description":"Pre-built, flexible inputs for custom payment UIs.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"components-for-web","__idx":2},"children":["Components for Web"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Checkout Components if you need complete control over your payment experience — from how individual fields are laid out to how each payment method is presented. Components gives you modular, individually mountable inputs for your payment methods that you can arrange and style with no constraints. It supports MIT-based recurring payments, Kount fraud prevention, 3DS, and a unified SDK across Web, Android and iOS.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/components-tablet.6d12c44361ba8c641a1b6941b5cc6483bac00eda085c6c612375650a9845446b.1a7bc35e.png","withLightbox":true,"width":"400px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features","__idx":3},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full UI customisation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Granular control over payment flow"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Seamless integration with existing design systems"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PCI DSS compliant components"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases","__idx":4},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom checkout experiences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Multi-step payment flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Branded payment pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Complex form requirements"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods","__idx":5},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands google-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands apple-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/icon-brand-paze-alt2.02558944e5afff0813250b16ffb5c2cdd7d90beb9b447c95165d00ff613b6c2d.18a770b0.svg","style":{"display":"inline-block","verticalAlign":"middle"}},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-checkout-drop-in.cf4fee7966c995498c87378c312856cdb16eb394c711bead9a630cbdb5908ed1.1a7bc35e.svg","bgColor":"#758CFF","title":"Drop-in","description":"The fastest way to accept payments. A ready-made UI.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"drop-in-for-web","__idx":6},"children":["Drop-in for Web"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Drop-in if you need a complete embedded checkout without the overhead of building it yourself. Drop-in brings all PXP payment methods into a single pre-built UI that can be live in days. You get meaningful branding control via Unity (colours, fonts, button styling, component sizing), dynamic or manual payment method ordering, and full support for MIT-based recurring payments — all with a single SDK integration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features-1","__idx":7},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ready-made payment UI"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quick implementation (minutes, not days)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Automatic updates and maintenance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Built-in best practices"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases-1","__idx":8},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quick market entry"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard checkout flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Minimal development resources"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prototype and MVP development"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods-1","__idx":9},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands google-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands apple-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-links.0d6ab0273a0a6c6fb47d4970084ca4bcd13df063db4ed282a7d8f14ebaadbe9d.1a7bc35e.svg","bgColor":"#25288A","title":"Links","description":"Shareable links for payment collection — no coding required.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"links-for-web","__idx":10},"children":["Links for Web"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Links if you don't need a checkout embedded in your site — you need a fast, flexible way to collect payments wherever your customers are. PXP Links generates secure, branded payment pages you can share via email, SMS, WhatsApp or QR code, with no development required. All major payment methods are supported, and you get a full link management dashboard, and enterprise-grade security with 3DS and Kount out of the box."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features-2","__idx":11},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Single-use or open-use link types"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Customisable branding and appearance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Flexible customer data collection"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Built-in fraud protection with AVS"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases-2","__idx":12},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Invoice payments"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Subscription sign-ups"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Donation collection"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Order payments"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods-2","__idx":13},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands google-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands apple-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/links/"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]}]}]},{"$$mdtype":"Tag","name":"PlatformTab","attributes":{"icon":"android","iconType":"brands","label":"Android"},"children":[{"$$mdtype":"Tag","name":"HorizontalTabs","attributes":{},"children":[{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-checkout-components.3ba090253e01195cce997eeb3b34439d2e3df19708949b447442244e8711d39a.1a7bc35e.svg","bgColor":"#0600ff","title":"Components","description":"Pre-built, flexible inputs for custom payment UIs.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"components-for-android","__idx":14},"children":["Components for Android"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Checkout Components if you need complete control over your payment experience — from how individual fields are laid out to how each payment method is presented. Components gives you modular, individually mountable inputs for your payment methods that you can arrange and style with no constraints. It supports MIT-based recurring payments, Kount fraud prevention, 3DS, and a unified SDK across Web, Android and iOS",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/components-galaxy.bdf257d17f85fc75ab87e060300b8d40c7731b3aaa3993e4689a51d1affb0e5c.1a7bc35e.png","withLightbox":true,"width":"200px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features-3","__idx":15},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full UI customisation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Granular control over payment flow"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Seamless integration with existing design systems"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PCI DSS compliant components"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases-3","__idx":16},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom checkout experiences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Multi-step payment flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Branded payment pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Complex form requirements"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods-3","__idx":17},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands google-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/icon-brand-paze-alt2.02558944e5afff0813250b16ffb5c2cdd7d90beb9b447c95165d00ff613b6c2d.18a770b0.svg","style":{"display":"inline-block","verticalAlign":"middle"}},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-checkout-drop-in.cf4fee7966c995498c87378c312856cdb16eb394c711bead9a630cbdb5908ed1.1a7bc35e.svg","bgColor":"#758CFF","title":"Drop-in","description":"The fastest way to accept payments. A ready-made UI.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"drop-in-for-android","__idx":18},"children":["Drop-in for Android"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Drop-in if you need a complete embedded checkout without the overhead of building it yourself. Drop-in brings all PXP payment methods into a single pre-built UI that can be live in days. You get meaningful branding control via Unity (colours, fonts, button styling, component sizing), dynamic or manual payment method ordering, and full support for card vaulting and recurring payments — all with a single SDK integration built for Jetpack Compose."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features-4","__idx":19},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ready-made payment UI for Jetpack Compose"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quick implementation (days, not weeks)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Automatic updates and maintenance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Built-in best practices and accessibility"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases-4","__idx":20},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quick market entry"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard checkout flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Minimal development resources"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prototype and MVP development"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods-4","__idx":21},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands google-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/drop-in/android/quickstart/"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-links.0d6ab0273a0a6c6fb47d4970084ca4bcd13df063db4ed282a7d8f14ebaadbe9d.1a7bc35e.svg","bgColor":"#25288A","title":"Links","description":"Shareable links for payment collection — no coding required.","hidden":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Links is only available for Web. Take a look at Components or Drop-in instead."]}]}]}]},{"$$mdtype":"Tag","name":"PlatformTab","attributes":{"icon":"apple","iconType":"brands","label":"iOS"},"children":[{"$$mdtype":"Tag","name":"HorizontalTabs","attributes":{},"children":[{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-checkout-components.3ba090253e01195cce997eeb3b34439d2e3df19708949b447442244e8711d39a.1a7bc35e.svg","bgColor":"#0600ff","title":"Components","description":"Pre-built, flexible inputs for custom payment UIs.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"components-for-ios","__idx":22},"children":["Components for iOS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Checkout Components if you need complete control over your payment experience — from how individual fields are laid out to how each payment method is presented. Components gives you modular, individually mountable inputs for your payment methods that you can arrange and style with no constraints. It supports MIT-based recurring payments, Kount fraud prevention, 3DS, and a unified SDK across Web, Android and iOS.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/components-iphone.704cf28326dc20f69f0f46041c28dd4cb8aecfa1f6af1e80163e7566c600f1de.1a7bc35e.png","withLightbox":true,"width":"240px","height":"","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features-5","__idx":23},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full UI customisation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Granular control over payment flow"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Seamless integration with existing design systems"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PCI DSS compliant components"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases-5","__idx":24},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom checkout experiences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Multi-step payment flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Branded payment pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Complex form requirements"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods-5","__idx":25},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands apple-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/icon-brand-paze-alt2.02558944e5afff0813250b16ffb5c2cdd7d90beb9b447c95165d00ff613b6c2d.18a770b0.svg","style":{"display":"inline-block","verticalAlign":"middle"}},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-checkout-drop-in.cf4fee7966c995498c87378c312856cdb16eb394c711bead9a630cbdb5908ed1.1a7bc35e.svg","bgColor":"#758CFF","title":"Drop-in","description":"The fastest way to accept payments. A ready-made UI.","hidden":false},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"drop-in-for-ios","__idx":26},"children":["Drop-in for iOS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend PXP Drop-in if you need a complete embedded checkout without the overhead of building it yourself. Drop-in brings all PXP payment methods into a single pre-built UI that can be live in days. You get meaningful branding control via Unity (colours, fonts, button styling, component sizing), dynamic or manual payment method ordering, and full support for MIT-based recurring payments — all with a single SDK integration. Get up and running quickly with our pre-built payment UI. Ideal for merchants who want a fast, turnkey payment solution."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"key-features-6","__idx":27},"children":["Key features"]},{"$$mdtype":"Tag","name":"FeatureList","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ready-made payment UI"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quick implementation (minutes, not days)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Automatic updates and maintenance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Built-in best practices"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-cases-6","__idx":28},"children":["Use cases"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Quick market entry"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard checkout flows"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Minimal development resources"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Prototype and MVP development"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"supported-payment-methods-6","__idx":29},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"credit-card","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands paypal","size":"48px","color":"var(--bright-blue-08)"},"children":[]},"  ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"brands apple-pay","size":"48px","color":"var(--bright-blue-08)"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Learn more ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout"},"children":["Try it ",{"$$mdtype":"Tag","name":"Icon","attributes":{"name":"arrow-right","size":"1em","color":"currentColor"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"HorizontalTab","attributes":{"imgUrl":"/assets/icon-links.0d6ab0273a0a6c6fb47d4970084ca4bcd13df063db4ed282a7d8f14ebaadbe9d.1a7bc35e.svg","bgColor":"#25288A","title":"Links","description":"Shareable links for payment collection — no coding required.","hidden":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Links is only available for Web. Take a look at Components or Drop-in instead."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"feature-comparison","__idx":30},"children":["Feature comparison"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"50%","data-label":"Feature"},"children":["Feature "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"Components"},"children":["Components "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"15%","data-label":"Drop-in"},"children":["Drop-in "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"15%","data-label":"Links"},"children":["Links "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Requires development capacity"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Embedded in your website or app"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hosted shareable payment page"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Fast integration (hours not weeks)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Full custom design control"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Standard branding (colours, fonts, buttons)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Control placement of each individual element"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Per-method custom layout"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dynamic payment method ordering"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Manual payment method ordering"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]}]}]}]}]}]}]},"headings":[{"value":"Checkout","id":"checkout","depth":1},{"value":"Find your solution","id":"find-your-solution","depth":2},{"value":"Components for Web","id":"components-for-web","depth":3},{"value":"Key features","id":"key-features","depth":4},{"value":"Use cases","id":"use-cases","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods","depth":4},{"value":"Drop-in for Web","id":"drop-in-for-web","depth":3},{"value":"Key features","id":"key-features-1","depth":4},{"value":"Use cases","id":"use-cases-1","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods-1","depth":4},{"value":"Links for Web","id":"links-for-web","depth":3},{"value":"Key features","id":"key-features-2","depth":4},{"value":"Use cases","id":"use-cases-2","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods-2","depth":4},{"value":"Components for Android","id":"components-for-android","depth":3},{"value":"Key features","id":"key-features-3","depth":4},{"value":"Use cases","id":"use-cases-3","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods-3","depth":4},{"value":"Drop-in for Android","id":"drop-in-for-android","depth":3},{"value":"Key features","id":"key-features-4","depth":4},{"value":"Use cases","id":"use-cases-4","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods-4","depth":4},{"value":"Components for iOS","id":"components-for-ios","depth":3},{"value":"Key features","id":"key-features-5","depth":4},{"value":"Use cases","id":"use-cases-5","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods-5","depth":4},{"value":"Drop-in for iOS","id":"drop-in-for-ios","depth":3},{"value":"Key features","id":"key-features-6","depth":4},{"value":"Use cases","id":"use-cases-6","depth":4},{"value":"Supported payment methods","id":"supported-payment-methods-6","depth":4},{"value":"Feature comparison","id":"feature-comparison","depth":2}],"frontmatter":{"markdown":{"toc":{"depth":2}},"seo":{"title":"Checkout"}},"lastModified":"2026-07-02T11:35:02.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}