# Pix Payment QR Code Screen in React Native: The Build

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-04. 5 min read.
> Source: https://vp0.com/blogs/pix-payment-qr-code-screen-react-native

You display the QR and the copy-paste code. Your backend mints it via a PSP and confirms by webhook. You never touch bank data.

**TL;DR.** A Pix payment screen in React Native displays a QR code and a copy-and-paste code (Pix Copia e Cola) that your backend generates through a payment provider, plus the amount, an expiry countdown, and a live status. You render the QR from the string the backend returns; you never generate Pix data on the device and never touch banking credentials. Confirmation comes from your server via a provider webhook, not from the app guessing. Start the screen from a clean layout, like a free VP0 design at $0.

Pix is how Brazil pays, and the screen is simpler than a card form once you understand the flow. Your app does not create the payment; it displays a QR code and a copy-and-paste code that your backend generated through a payment provider, then waits for the server to confirm. The app never touches banking credentials. Here is the right structure and the one security line that matters. Start the screen from a free [VP0](https://vp0.com) design (the free iOS and React Native design library AI builders read from) at $0.

## The flow: show the code, wait for the server

[Pix](https://www.bcb.gov.br/en/financialstability/pix_en) is Brazil's instant payment system, run by the central bank. A charge is a QR code plus a copy-and-paste string (Pix Copia e Cola), and the payer approves it in their own bank app.

| Step | Where | What happens |
|---|---|---|
| 1 | Backend | Create a Pix charge via your provider; get the QR string and copy code |
| 2 | App | Render the string as a QR, show a copy button, amount, expiry |
| 3 | Bank | Payer scans or pastes the code and approves in their bank app |
| 4 | Backend | Provider webhook confirms payment; server signals the app |

Providers like [Stripe](https://docs.stripe.com/payments/pix) and [Adyen](https://docs.adyen.com/payment-methods/pix/) expose this as an API: you create the charge server-side and they return the code. The app's job is display and status, nothing more.

## The security line: device shows, server decides

Two rules keep this correct. First, **never generate the Pix code on the device.** The code is an EMV-style BR Code tied to a real charge and a registered Pix key, so it is minted server-side through your provider; the app only renders the returned string as a QR. Second, **never let the app decide success.** Confirmation arrives at your server via a provider webhook when the transfer settles, and the server tells the app (through a polled status endpoint or a push). The app waits for the server-confirmed status, because only the server has the truth. This is the same redirect-and-confirm shape as [the iDEAL payment bank selector UI](/blogs/ideal-payment-bank-selector-ui-ios/) and the QR pattern in [the WeChat Pay QR code scanner UI](/blogs/wechat-pay-qr-code-scanner-ui/).

## What the screen needs

Beyond the QR, include the amount, the copy-and-paste code with a copy button (many people paste rather than scan), an expiry countdown since Pix charges expire, a clear status (waiting, paid, expired), and a regenerate action for when it lapses. Keep the instruction to one line: scan or paste this in your bank app and approve. To store the pending charge so the screen survives a reload, read and write through your local models the way [WatermelonDB offline storage via Claude prompts](/blogs/watermelondb-offline-ios-app-claude-prompts/) sets up, and for the account security around payments, [the Face ID biometric login screen in SwiftUI](/blogs/face-id-biometric-login-screen-swiftui/) covers gating access. For a card-based alternative flow, [the Paystack React checkout generator](/blogs/paystack-react-checkout-ai-generator/) shows the hosted pattern.

## Key takeaways

- A Pix screen displays a backend-generated QR and copy-and-paste code, then waits.
- Never generate the Pix code on the device; it is minted server-side via your provider.
- Confirmation comes from a provider webhook to your server, never from the app guessing.
- Include amount, copy button, expiry countdown, status, and a regenerate action.
- Build the screen from a free VP0 design at $0, wired to your provider.

## Frequently asked questions

### How does a Pix payment QR code screen work?

Your backend creates a Pix charge through a payment provider and returns a QR code string and a copy-and-paste code (Pix Copia e Cola). The app renders that string as a QR image, shows a copy button, the amount, and an expiry countdown, then waits. The payer scans or pastes the code in their own bank app and approves it there. Your server learns it was paid through a provider webhook and tells the app to move on.

### Do I generate the Pix QR code on the device?

No. The Pix code (an EMV-style BR Code) is created server-side through your payment provider, because it has to be tied to a real charge and a registered Pix key. The app only renders the string the backend returns as a QR and offers a copy button. Generating payment data on the device would be both insecure and incorrect.

### How does the app know a Pix payment succeeded?

Through your backend, not the app. The payment provider notifies your server with a webhook when the Pix transfer settles, and your server updates the order and signals the app (by polling a status endpoint or a push). The app should never assume success on its own; it waits for the server-confirmed status, because only the server has the truth.

### What should a Pix screen include besides the QR code?

The amount, a copy-and-paste code with a copy button (many people paste rather than scan), an expiry countdown since Pix charges expire, a clear status (waiting, paid, expired), and a way to regenerate if it expires. Keep instructions short: scan or paste in your bank app and approve. Never ask for any banking credentials in your screen.

### What is the best way to build a Pix payment screen in React Native?

Render the QR and copy code from your backend's response, show amount, expiry, and a server-confirmed status, and start from a clean checkout layout. A free VP0 design, the free iOS and React Native design library for AI builders, gives you the Pix screen to generate in Cursor or Claude Code at $0, wired to your provider.

## Frequently asked questions

### How does a Pix payment QR code screen work?

Your backend creates a Pix charge through a payment provider and returns a QR code string and a copy-and-paste code (Pix Copia e Cola). The app renders that string as a QR image, shows a copy button, the amount, and an expiry countdown, then waits. The payer scans or pastes the code in their own bank app and approves it there. Your server learns it was paid through a provider webhook and tells the app to move on.

### Do I generate the Pix QR code on the device?

No. The Pix code (an EMV-style BR Code) is created server-side through your payment provider, because it has to be tied to a real charge and a registered Pix key. The app only renders the string the backend returns as a QR and offers a copy button. Generating payment data on the device would be both insecure and incorrect.

### How does the app know a Pix payment succeeded?

Through your backend, not the app. The payment provider notifies your server with a webhook when the Pix transfer settles, and your server updates the order and signals the app (by polling a status endpoint or a push). The app should never assume success on its own; it waits for the server-confirmed status, because only the server has the truth.

### What should a Pix screen include besides the QR code?

The amount, a copy-and-paste code with a copy button (many people paste rather than scan), an expiry countdown since Pix charges expire, a clear status (waiting, paid, expired), and a way to regenerate if it expires. Keep instructions short: scan or paste in your bank app and approve. Never ask for any banking credentials in your screen.

### What is the best way to build a Pix payment screen in React Native?

Render the QR and copy code from your backend's response, show amount, expiry, and a server-confirmed status, and start from a clean checkout layout. A free VP0 design, the free iOS and React Native design library for AI builders, gives you the Pix screen to generate in Cursor or Claude Code at $0, wired to your provider.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*