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

# Configuration

> Configure your Grid integration

export const FeatureCardGrid = ({cols = 3, children}) => <div className={`not-prose feature-cards-grid feature-cards-cols-${cols}`}>
    {children}
  </div>;

export const FeatureCard = ({icon, title, children, href, linkHref, linkText, color, tag, tagPosition, layout, variant, iconSize}) => {
  const isHorizontal = layout === 'horizontal';
  const isFlat = variant === 'flat';
  const isLargeIcon = iconSize === 'lg';
  const isInlineTag = tagPosition === 'inline';
  const card = <div className={`feature-card ${href ? 'feature-card-link' : ''} ${!icon ? 'feature-card-no-icon' : ''} ${isHorizontal ? 'feature-card-horizontal' : ''} ${isFlat ? 'feature-card-flat' : ''} ${isLargeIcon ? 'feature-card-icon-lg' : ''}`}>
      {icon && <div className="feature-card-icon-wrapper">
          {color ? <div className="feature-card-icon" style={{
    WebkitMaskImage: `url(${icon})`,
    maskImage: `url(${icon})`,
    backgroundColor: color,
    width: '24px',
    height: '24px',
    WebkitMaskSize: 'contain',
    maskSize: 'contain',
    WebkitMaskRepeat: 'no-repeat',
    maskRepeat: 'no-repeat'
  }} /> : <img src={icon} alt="" className="feature-card-icon" />}
        </div>}
      <div className="feature-card-content">
        {isInlineTag ? <div className="feature-card-title-row">
            <span className="feature-card-title">{title}</span>
            {tag && <span className="feature-card-tag">{tag}</span>}
          </div> : <div className="feature-card-title">{title}</div>}
        <div className="feature-card-desc">{children}</div>
        {tag && !isInlineTag && <div className="feature-card-tag-row"><span className="feature-card-tag">{tag}</span></div>}
        {linkText && <div className="feature-card-link-row">
            {linkHref ? <a href={linkHref} className="feature-card-text-link" style={{
    color: color
  }}>
                {linkText}
              </a> : <span className="feature-card-text-link feature-card-coming-soon" style={{
    color: color,
    opacity: 0.6
  }}>
                {linkText}
              </span>}
          </div>}
      </div>
    </div>;
  return href ? <a href={href} className="feature-card-anchor">{card}</a> : card;
};

Learn how to configure Grid for your specific use case.

## Platform Configuration

Before you can start using Grid, you'll need to configure your platform settings. This includes:

* Setting up your API credentials
* Configuring webhooks for real-time updates
* Defining your supported currencies and payment rails
* Setting up compliance and KYC requirements

## Environment Setup

Grid provides two environments:

<FeatureCardGrid cols={2}>
  <FeatureCard icon="/images/icons/sandbox.svg" title="Sandbox" href="/api-reference/environments">
    Test your integration with simulated payments
  </FeatureCard>

  <FeatureCard icon="/images/icons/lightning.svg" title="Production" href="/api-reference/environments">
    Process real payments with live credentials
  </FeatureCard>
</FeatureCardGrid>

## Next Steps

<FeatureCardGrid cols={2}>
  <FeatureCard icon="/images/icons/key2.svg" title="Authentication" href="/api-reference/authentication">
    Learn how to authenticate API requests
  </FeatureCard>

  <FeatureCard icon="/images/icons/bell.svg" title="Webhooks" href="/payouts-and-b2b/platform-tools/webhooks">
    Set up real-time event notifications
  </FeatureCard>
</FeatureCardGrid>