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

# Guides and recipes

> Step-by-step guides for common Primer Checkout tasks and customizations.

Primer Checkout recipes are short, focused how-to guides that walk you through completing a specific task. Recipes are a great way to add new features or customize behavior in your checkout by following step-by-step instructions.

Each guide includes platform-specific code examples for **Web**, **Android**, and **iOS**.

## Guides

In-depth tutorials that cover larger topics from start to finish.

<CardGroup cols={1}>
  <Card title="Build a custom card form" icon="credit-card" href="/checkout/primer-checkout/guides-and-recipes/build-custom-card-form">
    Create and customize your own card payment form with full control over layout, styling, and behavior
  </Card>
</CardGroup>

## Recipes

Quick solutions for common tasks. Each recipe shows you how to accomplish one specific thing.

### Payment flow

<CardGroup cols={2}>
  <Card title="Redirect after payment" href="/checkout/primer-checkout/guides-and-recipes/redirect-after-payment">
    Navigate users to a confirmation page after completing payment
  </Card>

  <Card title="Show success message" href="/checkout/primer-checkout/guides-and-recipes/show-success-message">
    Display a custom success message or modal after payment
  </Card>

  <Card title="Track in analytics" href="/checkout/primer-checkout/guides-and-recipes/track-payment-analytics">
    Send payment events to your analytics platform
  </Card>

  <Card title="Log errors" href="/checkout/primer-checkout/guides-and-recipes/log-errors-debugging">
    Capture and log payment errors for debugging
  </Card>

  <Card title="Idempotency keys" href="/checkout/primer-checkout/guides-and-recipes/use-idempotency-keys">
    Prevent duplicate payments by attaching an idempotency key
  </Card>

  <Card title="Use BIN data" href="/checkout/primer-checkout/guides-and-recipes/use-bin-data-to-control-click-to-pay">
    Use BIN Data to Control Click to Pay
  </Card>
</CardGroup>

### User experience

<CardGroup cols={2}>
  <Card title="Pre-fill cardholder name" href="/checkout/primer-checkout/guides-and-recipes/prefill-cardholder-name">
    Automatically fill in the cardholder name from user profile
  </Card>

  <Card title="Show loading indicator" href="/checkout/primer-checkout/guides-and-recipes/show-loading-indicator">
    Display a loading state while payment is processing
  </Card>

  <Card title="Disable buttons" href="/checkout/primer-checkout/guides-and-recipes/disable-buttons-during-payment">
    Disable external buttons while payment is processing
  </Card>
</CardGroup>

### Custom controls

<CardGroup cols={2}>
  <Card title="External submit button" href="/checkout/primer-checkout/guides-and-recipes/external-submit-button">
    Trigger card form submission from a button outside the checkout
  </Card>

  <Card title="Display card network" href="/checkout/primer-checkout/guides-and-recipes/display-card-network">
    Show the card brand logo as users type their card number
  </Card>
</CardGroup>

### Vault

<CardGroup cols={2}>
  <Card title="Display saved methods" href="/checkout/primer-checkout/guides-and-recipes/display-saved-payment-methods">
    Show saved payment methods count and list saved cards
  </Card>
</CardGroup>