> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paypal.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Paypal's Developer Documentation

export const MultiLinkCard = ({title, description, links = []}) => {
  return <div className="flex flex-col gap-4 rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-600 shadow-sm p-8">
      <h2 className="text-xl font-bold text-gray-900 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
        {title}
      </h2>
      <p className="text-gray-600 font-medium dark:text-gray-300 mb-2">
        {description}
      </p>
      <div className="grow flex gap-2 flex-col justify-evenly">
        {links.map(link => {
    return <a href={link.url}>
              <div className="multilink-link bg-white dark:bg-black border border-gray-200 hover:border-gray-300 transition hover:dark:border-gray-500 dark:border-gray-600 dark:text-white px-6 py-4 rounded-xl flex justify-between items-center">
                <p>{link.text}</p>
                <p className="multilink-arrow px-2 transition-all">→</p>
              </div>
            </a>;
  })}
      </div>
    </div>;
};

export const Card = ({title, icon, horizontal, href}) => {
  const cardContent = <div style={{
    padding: '1rem',
    display: 'flex',
    flexDirection: horizontal ? 'row' : 'column',
    alignItems: horizontal ? 'center' : 'flex-start',
    gap: horizontal ? '12px' : '16px',
    height: '100%',
    minHeight: '80px'
  }} className="intro-card hover:shadow-lg bg-white dark:bg-[#1a1b23] transition-shadow duration-200 border border-gray-200 dark:border-gray-700 rounded-[12px]">
      <div style={{
    width: horizontal ? '32px' : '40px',
    height: horizontal ? '32px' : '40px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0
  }}>
        <Icon icon={icon} color="#3545d3" className="text-primary" size={horizontal ? 20 : 24} />
      </div>
      <div style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flex: 1
  }}>
        <h3 style={{
    fontSize: horizontal ? '1rem' : '1.25rem',
    margin: 0,
    lineHeight: '1.4'
  }} className="text-gray-900 dark:text-white">
          {title}
        </h3>
        {href && <Icon icon="arrow-up-right" size={horizontal ? 16 : 18} className="text-gray-400 dark:text-gray-500 flex-shrink-0" />}
      </div>
    </div>;
  if (href) {
    return <a href={href} style={{
      textDecoration: 'none',
      color: 'inherit',
      display: 'block'
    }}>
        {cardContent}
      </a>;
  }
  return cardContent;
};

export const SolutionCard = ({icon, title, description, features = [], primaryButton = {}, secondaryButton = {}}) => {
  return <div style={{
    padding: '1rem',
    borderRadius: '16px',
    border: '1px solid rgba(255, 255, 255, 0.1)',
    position: 'relative',
    overflow: 'hidden'
  }} className="solution-card bg-[#F7F7F8] dark:bg-[#14151b]">
      <div style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: 'none'
  }} />
      
     
      <div style={{
    position: 'relative',
    zIndex: 1
  }}>
      
        <div style={{
    width: '40px',
    height: '40px',
    borderRadius: '12px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '1.5rem'
  }} className="bg-primary dark:bg-primary-light">
          <Icon icon={icon} color="white" />
        </div>

      
        <h3 style={{
    fontSize: '1.5rem',
    marginBottom: '1rem',
    lineHeight: '1.3'
  }} className="text-gray-900 dark:text-white">
          {title}
        </h3>

        <p className="text-gray-500 dark:text-gray-400 font-regular text-sm">
          {description}
        </p>

     
        <div style={{
    marginBottom: '2rem',
    marginTop: '1rem'
  }}>
          {features.map((feature, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    marginBottom: '1rem'
  }}>
              <div className="solutions-icon">
              <Icon icon={feature.icon} /></div>
              <span className="text-gray-500 dark:text-gray-400 font-regular text-sm">
                {feature.text}
              </span>
            </div>)}
        </div>

       
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  }}>
         
          {secondaryButton.text && <button onClick={() => secondaryButton.onClick && secondaryButton.onClick()} style={{
    padding: '12px 20px',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '8px',
    transition: 'all 0.2s ease'
  }} className="hover:bg-white hover:bg-opacity-10 transition-color text-gray-900 dark:text-white bg-white dark:bg-transparent border border-gray-200 dark:border-gray-700 rounded-[12px]">
              {secondaryButton.icon && <Icon icon={secondaryButton.icon} className="w-4 h-4" />}
              {secondaryButton.text}
            </button>}

          {primaryButton.text && <button onClick={() => primaryButton.onClick && primaryButton.onClick()} style={{
    padding: '12px 20px',
    border: 'none',
    borderRadius: '12px',
    fontSize: '1rem',
    fontWeight: '600',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '8px',
    transition: 'all 0.2s ease'
  }} className="hover:bg-primary-light transition-colors dark:text-gray-900 text-white bg-primary dark:bg-primary-light">
              {primaryButton.icon && <div className="icon-color">
                <Icon icon={primaryButton.icon} />
                </div>}
              {primaryButton.text}
              {primaryButton.hasDropdown && <div className="icon-color">
                <Icon icon="chevron-down" className="w-4 h-4 ml-1" />
                </div>}
            </button>}
        </div>
      </div>
    </div>;
};

export const IntroCard = ({icon, title, description, href, buttonText}) => {
  return <div style={{
    padding: '1rem',
    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
    width: '100%',
    minHeight: 'auto',
    display: 'flex',
    flexDirection: 'column'
  }} className="intro-card hover:shadow-lg bg-[#F7F7F8] dark:bg-[#14151b] transition-shadow duration-200 dark:border-gray-700 border border-gray-200 dark:border-gray-700 rounded-[12px]">
    <div style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: 'none'
  }} />
      <div style={{
    width: '40px',
    height: '40px',
    borderRadius: '12px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '1rem'
  }} className="bg-primary dark:bg-primary-light">
        <Icon icon={icon} color="white" />
      </div>
      <h3 style={{
    fontSize: '1.25rem',
    marginBottom: '0.75rem',
    lineHeight: '1.4'
  }} className="text-gray-900 dark:text-white">
        {title}
      </h3>
              <p style={{
    fontSize: '0.95rem',
    lineHeight: '1.5',
    marginBottom: '2rem'
  }} className="text-gray-600 dark:text-gray-300">
          {description}
        </p>

 
        <a href={href} style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    padding: '12px 20px',
    borderRadius: '12px',
    textDecoration: 'none',
    fontSize: '0.95rem',
    fontWeight: '500',
    transition: 'all 0.2s ease',
    width: '100%',
    justifyContent: 'center'
  }} className="intro-card-button text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-700 border border-gray-200 dark:border-gray-700 rounded-[12px]  dark:bg-[#000] bg-white">   
        {buttonText} 
        <svg style={{
    width: '16px',
    height: '16px'
  }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>;
};

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="mt-4 px-4">
  <div className="flex justify-center items-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4">
    <div className="relative w-full flex items-center justify-center" style={{ minHeight: '32rem', overflow: 'hidden', borderRadius: '1rem', marginLeft: 'auto', marginRight: 'auto' }}>
      <div className="max-w-2xl" style={{ textAlign: 'center', padding: '0 1rem' }}>
        <h1
          className="text-gray-900 dark:text-gray-200 text-5xl md:text-6xl"
          style={{
      fontWeight: '600',
      margin: '0 auto',
      marginBottom: '1.5rem',
      lineHeight: '1.05',
      letterSpacing: '-0.03em',
      maxWidth: '30rem'
      }}
        >
          <span className="bg-[#0061d6] dark:bg-[#60CDFF] bg-clip-text text-transparent">Build payments</span>{' '}
          <span className="">that just work ✨</span>
        </h1>

        <p className="mt-6 text-gray-500 dark:text-gray-300 text-xl leading-relaxed max-w-xl mx-auto font-medium">
          Ship faster with PayPal's developer-first APIs. <br />
          <span className="text-[#0061d6] dark:text-[#60CDFF] font-semibold">Simple integration</span>, maximum impact.
        </p>

        <div style={{ maxWidth: '1500px', margin: '0 auto', marginTop: '2rem' }}>
          <div className="flex flex-wrap items-center justify-center gap-4">
            <a href="/payments/methods/paypal/sdk/js/v6/paypal-checkout" className="group">
              <button className="bg-primary-light hover:bg-[#0061d6] text-gray-200 font-semibold px-8 py-4 rounded-[12px] transition-colors duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl min-w-[140px]">
                See the Docs

                <svg className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </button>
            </a>

            <a href="https://developer.paypal.com" target="_blank" rel="noopener noreferrer" className="group">
              <button className="bg-[#26272c] hover:bg-gray-700 text-gray-200 font-semibold px-8 py-4 rounded-[12px] border border-gray-600 hover:border-gray-500 transition-colors duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl min-w-[140px]">
                Developer Site

                <svg className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                </svg>
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="w-full pb-4 px-4">
  <h2 className="text-gray-900 dark:text-gray-200 justify-center text-center mt-16 mb-4" style={{fontSize: '24px'}}>Get building with PayPal</h2>
  <p className="dark:text-[#a1a1a3] text-[#6d6e79] justify-center text-center max-w-xl mx-auto" style={{marginTop: '16px' ,fontSize: '16px', marginBottom: '16px',fontWeight:'500'}}>Choose a track to jump into vetted guides, samples, and rollout checklists tailored to your launch milestone.</p>

  <div className="flex flex-wrap items-center justify-center gap-4 mt-10 mx-auto pr-1 max-w-5xl" style={{marginBottom: '2rem'}}>
    <div className="card-grid grid grid-cols-1 lg:grid-cols-3 gap-6 w-full">
      <MultiLinkCard title="Accept payments" description="Launch conversion-ready checkouts and keep revenue flowing across channels." links={[{text: "Payment Links and Buttons", url: "/payments/methods/pay-links-buttons"}, {text: "PayPal", url: "/payments/methods/paypal/sdk/js/v6/paypal-checkout"}, {text: "Pay Later", url: "/payments/methods/pay-later/overview"}]} />

      <MultiLinkCard title="Grow and run your business" description="Automate back-office workflows so your teams stay focused on customer impact." links={[{text: "Invoicing", url: "/growth/grow-business/invoicing/overview"}, {text: "Payouts", url: "/growth/payouts/paypal-enterprise-payouts"}, {text: "Reporting", url: "/growth/reports/overview"}]} />

      <MultiLinkCard title="Get ready for agentic commerce" description="Ship AI-native experiences with shared guardrails and trusted PayPal rails." links={[{text: "Agent Toolkit", url: "/developer/tools/ai/agent-toolkit-quickstart"}, {text: "MCP Server", url: "/developer/tools/ai/mcp-quickstart"}, {text: "LLM Integration Quickstart", url: "/developer/tools/ai/llm-integration"}]} />
    </div>
  </div>
</div>

<div className="w-full py-8">
  <div className="flex justify-center">
    <p className="text-gray-500 dark:text-gray-400 text-sm">
      Copyright © {new Date().getFullYear()} PayPal, Inc. All rights reserved.
    </p>
  </div>
</div>