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

# Browse sample projects

> Explore the library of sample projects using Stripe.

export const SampleProjectsList = ({children}) => {
  return <div style={{
    marginTop: '0'
  }}>
      {children}
    </div>;
};

export const SampleProjectCard = ({title, description, product, platforms = ["web"], languages = [], vscodeUrl, githubUrl, href}) => {
  const WebIcon = () => <svg style={{
    width: '14px',
    height: '14px',
    display: 'inline-block',
    verticalAlign: 'middle'
  }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <rect x="3" y="3" width="18" height="18" rx="2" />
      <path d="M3 9h18" />
      <path d="M9 21V9" />
    </svg>;
  const MobileIcon = () => <svg style={{
    width: '14px',
    height: '14px',
    display: 'inline-block',
    verticalAlign: 'middle'
  }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <rect x="5" y="2" width="14" height="20" rx="2" />
      <path d="M12 18h.01" />
    </svg>;
  const ExternalLinkIcon = () => <svg style={{
    width: '12px',
    height: '12px',
    marginLeft: '3px',
    display: 'inline-block',
    verticalAlign: 'middle'
  }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
      <polyline points="15 3 21 3 21 9" />
      <line x1="10" y1="14" x2="21" y2="3" />
    </svg>;
  const platformIcons = {
    web: WebIcon,
    mobile: MobileIcon
  };
  const cardStyle = {
    padding: '16px 20px',
    border: '1px solid #e4e4e7',
    borderRadius: '8px',
    backgroundColor: 'white',
    marginBottom: '12px',
    height: '150px',
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden'
  };
  const headerStyle = {
    display: 'flex',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    gap: '16px',
    marginBottom: '6px',
    flexShrink: 0,
    minHeight: '40px'
  };
  const titleStyle = {
    fontSize: '14px',
    fontWeight: '600',
    color: '#18181b',
    margin: '0',
    lineHeight: '1.4',
    flex: '1',
    minWidth: '0',
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
    overflow: 'hidden'
  };
  const actionsStyle = {
    display: 'flex',
    alignItems: 'center',
    flexShrink: 0,
    gap: '8px',
    paddingTop: '2px'
  };
  const linkStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    fontSize: '11px',
    color: '#0ea5e9',
    textDecoration: 'none',
    whiteSpace: 'nowrap'
  };
  const descriptionStyle = {
    fontSize: '12px',
    color: '#52525b',
    margin: '0',
    lineHeight: '1.4',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
    flex: '1'
  };
  const metaRowStyle = {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '24px',
    fontSize: '11px',
    flexShrink: 0,
    marginTop: 'auto',
    paddingTop: '10px'
  };
  const metaItemStyle = {
    display: 'flex',
    flexDirection: 'column',
    gap: '2px'
  };
  const metaLabelStyle = {
    color: '#a1a1aa',
    fontSize: '10px'
  };
  const metaValueStyle = {
    fontWeight: '500',
    color: '#3f3f46',
    fontSize: '11px',
    display: 'flex',
    alignItems: 'center',
    gap: '4px'
  };
  return <div style={cardStyle}>
      {}
      <div style={headerStyle}>
        <h4 style={titleStyle}>
          {href ? <a href={href} style={{
    color: 'inherit',
    textDecoration: 'none'
  }}>{title}</a> : title}
        </h4>
        <div style={actionsStyle}>
          {vscodeUrl && <a href={vscodeUrl} target="_blank" rel="noopener noreferrer" style={linkStyle}>
              Open in VS Code<ExternalLinkIcon />
            </a>}
          {githubUrl && <a href={githubUrl} target="_blank" rel="noopener noreferrer" style={linkStyle}>
              View in GitHub<ExternalLinkIcon />
            </a>}
        </div>
      </div>

      {}
      <p style={descriptionStyle}>{description}</p>

      {}
      <div style={metaRowStyle}>
        <div style={metaItemStyle}>
          <span style={metaLabelStyle}>Product</span>
          <span style={metaValueStyle}>{product}</span>
        </div>

        <div style={metaItemStyle}>
          <span style={metaLabelStyle}>Platform</span>
          <span style={metaValueStyle}>
            {platforms.map((platform, idx) => {
    const IconComponent = platformIcons[platform] || WebIcon;
    return <IconComponent key={idx} />;
  })}
          </span>
        </div>

        <div style={{
    ...metaItemStyle,
    flex: 1,
    minWidth: 0
  }}>
          <span style={metaLabelStyle}>Languages</span>
          <span style={{
    ...metaValueStyle,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }}>
            {languages.join(", ")}
          </span>
        </div>
      </div>
    </div>;
};

<SampleProjectsList>
  <SampleProjectCard
    title="Accept payments with Stripe Checkout"
    description="Use Checkout to quickly collect one-time payments."
    product="Checkout"
    platforms={["web"]}
    languages={[
".NET",
"Go",
"Java",
"Node.js",
"PHP",
"Python",
"Ruby",
"HTML",
"React",
]}
    vscodeUrl="vscode://stripe.vscode-stripe/createStripeSample?sample=checkout-one-time-payments"
    githubUrl="https://github.com/stripe-samples/checkout-one-time-payments"
    href="/samples/accept-payments-with-stripe-checkout"
  />
</SampleProjectsList>