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

# React Native payment app demo

> Explore a complete React Native USDC payment flow powered by Altude Gas Station.

The [Altude Pay demo](https://github.com/AltudePlatform/react-native-altude-pay-demo) shows how a stablecoin payment can feel like a traditional mobile payment: enter an amount, choose a recipient, approve on the device, and receive a confirmation. The user never needs to acquire or maintain a separate SOL balance for transaction fees.

<Frame>
  <img src="https://mintcdn.com/altude/2jwyK3IkZbLOI0Po/images/react-native-pay-demo/hero-product.png?fit=max&auto=format&n=2jwyK3IkZbLOI0Po&q=85&s=d36da150a7725e1042c9d13dadd28fe3" alt="Altude Pay reference app showing a familiar consumer payment interface with an available balance, pay, scan, and activity actions" width="1600" height="900" data-path="images/react-native-pay-demo/hero-product.png" />
</Frame>

## What the demo covers

<CardGroup cols={2}>
  <Card title="Payment-first experience" icon="money-bill-transfer">
    Send USDC by amount and recipient without exposing gas management in the user flow.
  </Card>

  <Card title="Local approval" icon="mobile-screen-button">
    Build and sign the transaction on the device before sending it to Altude.
  </Card>

  <Card title="Clear payment states" icon="list-check">
    Present approving, sending, confirming, receipt, and activity states in familiar payment language.
  </Card>

  <Card title="QR payment building blocks" icon="qrcode">
    Review the Solana Pay QR generation and scanning implementations for address-based payment flows.
  </Card>
</CardGroup>

The app also reads SOL and Devnet USDC balances, keeps recent recipients and transaction history on the device, and demonstrates the React Native and Hermes-compatible entrypoints published by `@altude/core` and `@altude/gasstation`.

## How a payment moves

<Frame>
  <img src="https://mintcdn.com/altude/2jwyK3IkZbLOI0Po/images/react-native-pay-demo/payment-flow.svg?fit=max&auto=format&n=2jwyK3IkZbLOI0Po&q=85&s=8acf3dd866a8e75acdbe7186b300ef1e" alt="Payment flow from the Altude Pay app to local device signing, Altude Gas Station fee sponsorship and relay, and Solana Devnet confirmation" width="1600" height="1000" data-path="images/react-native-pay-demo/payment-flow.svg" />
</Frame>

<Steps>
  <Step title="Collect the payment details">
    The app collects a USDC amount and recipient address through a mobile payment interface.
  </Step>

  <Step title="Build and sign locally">
    The app builds the transaction and the device signs it. Private key material does not cross the device boundary.
  </Step>

  <Step title="Sponsor and relay">
    Gas Station validates the signed transaction, adds the sponsored fee-payer signature, and relays it to Solana.
  </Step>

  <Step title="Confirm and present the result">
    The app tracks confirmation and presents a receipt and activity record instead of exposing blockchain infrastructure details.
  </Step>
</Steps>

This separation is the useful production pattern: your application owns the payment experience and local signing, while Gas Station owns fee sponsorship and relay.

## Use the implementation as a reference

The repository provides complete examples for:

* [React Native application structure and navigation](https://github.com/AltudePlatform/react-native-altude-pay-demo/tree/main/src)
* [Payment and confirmation screens](https://github.com/AltudePlatform/react-native-altude-pay-demo/tree/main/src/screens)
* [Solana transaction construction and local signing](https://github.com/AltudePlatform/react-native-altude-pay-demo/blob/main/src/services/solana.ts)
* [Gas Station integration](https://github.com/AltudePlatform/react-native-altude-pay-demo/blob/main/src/services/gasstationAdapter.ts)
* [React Native and Hermes configuration](https://github.com/AltudePlatform/react-native-altude-pay-demo/blob/main/metro.config.js)

<Card title="Explore Altude Pay on GitHub" icon="github" href="https://github.com/AltudePlatform/react-native-altude-pay-demo">
  Review the source, setup instructions, architecture notes, and validation commands.
</Card>

## Before using these patterns in production

<Warning>
  Altude Pay is a Devnet reference app, not a production wallet. Its demonstration wallet stores private key material as plaintext JSON in AsyncStorage. Replace it with secure, production-appropriate key management, and never ship a private key or Altude API key in a distributable client.
</Warning>

Use the demo to understand the payment journey and SDK boundary. Before shipping, add your application's authentication and authorization, secure key storage or wallet provider, production monitoring, recovery behavior, and compliance controls.