How to Use Payment Selection Screens in FMX

Updated Today · 9 min readIntermediate

A Payment Selection Screen lets a guest choose a product or package and pay without visiting a separate price menu. Every clickable area has its own Price and Continue to Step, so a single screen can sell several options and send each approved purchase to the correct experience.

This workflow feature is supported by current FMX for Windows and FMX for iPadOS builds. Payment still depends on the provider and credentials configured for that booth, so complete the provider setup before testing the workflow.

How the guest experience works

The guest sees the packages on the Selection Screen.
The guest taps a price area.
FMX marks that area with the configured Selection Effect and starts payment for its amount.
If the guest taps a different price before approval, FMX replaces the active attempt with the new amount.
After approval, FMX automatically opens the Continue to Step assigned to the option that was charged.

There is no separate Next-to-pay button. The selected price is the payment gate.

When to use Payment or Mixed

Goal	Selection Type
Every option is a paid package	Payment
Free and paid choices must share one menu	Mixed
Different paid choices should open different paths	Payment or Mixed, with a separate Continue to Step on each Payment area
One fixed charge with no package choice	A regular payment-triggered workflow step may be simpler

On a Payment screen, all areas are Payment areas. On a Mixed screen, only the areas whose Area Type is Payment start a transaction; Step, Prompt, Photo Layout, Video Fusion, and Workflow areas perform their normal actions.

Before you build the screen

Prepare the following:

The event's payment provider, credentials, and currency configured in FMX.
An internet connection if the selected provider requires online checkout.
The workflow steps that should open after each approved purchase.
Background artwork or Area Media showing the package name, price, and what is included.
A supported, updated FMX build on the event's Windows PC or iPad.

For QR checkout setup, see Stripe QR Checkout Payments in FMX or Shopify QR Checkout Payments in FMX.

Configure a Payment Selection Screen

Add or select a Selection Screen feature step in the Cloud Workflow Builder.
Set Selection Type to Payment.
Select Open Selection Screen Editor.
Match Expected Aspect Ratio to the booth. Use 3:4 for a portrait iPad; match the connected display on Windows.
Select the pricing background image or video.
Add one clickable area for every package.
Select an area and set:
- Price — the numeric amount to charge.
- Continue to Step — the step to open after that exact option is approved.
Rename the area clearly, such as Basic $10, Premium $20, or Three Sessions $25.
Repeat for every price.
Configure Initial Selection, the Selection Effect, and optional Payment QR.
Select Done, save the workflow, sync the event, and test the complete transaction.

The currency is determined by the booth's payment configuration. Make sure the artwork, provider, and configured currency agree.

Do not use the eye icon to disable a package. It hides the area in the builder only. FMX still treats it as a live, tappable Payment area. Delete the area when a package should not be offered.

Initial Selection

Initial Selection controls how the screen enters.

Nothing selected

This is the default. No price is marked, no payment attempt starts, and no transaction QR is shown until the guest taps an area.

Use it when guests should actively confirm the package they want.

First area selected

The first complete Payment area in the saved area order starts marked and payment is armed when the screen opens. Use it when one package is the recommended default or when you want checkout ready immediately.

A preselected $0.00 area does not automatically leave the menu. The guest must tap it to continue, preventing a free first option from skipping the screen.

On re-entry, FMX applies Initial Selection again from a fresh state.

Prices, free options, and per-choice routing

Prices can include decimals, such as 10.50.
A $0.00 area completes without contacting the payment provider.
Every paid area should have its own Continue to Step.
FMX follows the destination of the option that was actually approved, even if the guest changed prices shortly before approval.
If the guest uses Back while an attempt is active, FMX cancels or expires that attempt before leaving the screen.

Example:

Package	Price	Continue to Step
Digital Photo	$5	`Photo Capture`
Photo + Print	$10	`Photo and Print Capture`
Three Sessions	$20	`Session 1`

If Three Sessions should create three separately finalized photos before the next payment gate, use End Session steps between the three session flows. See How to Use the End Session Node in Workflow Builder.

Show the active price with Selection Effects

The screen-level Selection Effect is the default for every Payment area.

Effect	Appearance
None (invisible)	Payment works, but the active price is not visually marked
Border	Static outline
Glow	Pulsing outer glow
Spinning Border	Light traveling around the outline
Scan Line	Bright line moving from top to bottom
Marching Ants	Animated dashed outline
Shimmer	Diagonal sheen across the area
Breathe	Outline gently grows and fades
Corner Brackets	Camera-style focus brackets

Set the Color and Intensity. Animated effects also offer Slow, Normal, and Fast speeds.

To emphasize one package, select its area, turn on Selection Effect → Override, and give it a different effect. For example, standard packages can use a cyan Glow while the premium package uses gold Marching Ants.

The effect does not change the clickable area or payment behavior. It only communicates which option is active.

Place a Payment QR

The Payment QR control reserves a position where FMX can display the current transaction's QR code.

Turn on Payment QR in the Selection Screen Editor.
Select the purple placeholder.
Drag and resize it or edit its X, Y, W, and H values.
Keep enough clear space around it in the background artwork.

FMX draws the QR as the largest square that fits inside the placeholder.

Payment QR placement applies to Stripe and Shopify. Other providers ignore it and continue with their supported payment experience.

With Nothing selected, the QR appears only after a paid area is tapped.
With First area selected, it can appear immediately on entry.
Changing prices creates a new checkout and QR for the new amount.
A free $0.00 option does not show a QR.
The QR disappears after approval or cancellation.

The purple graphic in the builder is only a placement preview. The real QR is created by FMX for the current transaction.

Add a paid option to a Mixed screen

Mixed is useful for a menu such as Free Digital, Paid Print Package, and AI Experience.

Set Selection Type to Mixed.
Add the areas.
Select the paid area and set Area Type to Payment.
Enter its Price and Continue to Step.
Configure the other areas with their own action types.
Turn on Payment QR if the provider is Stripe or Shopify and at least one Payment area exists.
Connect a normal continuation for Prompt, Photo Layout, or Video Fusion areas.

Mixed screens always wait for the Payment area to be tapped; First area selected does not pre-arm payment on Mixed. If a payment attempt is active and the guest chooses a non-payment Mixed area, FMX cancels the attempt before running that action.

Mixed supports Auto-Select Random Area, and a random result can be a Payment area. Leave random selection off unless a randomly chosen charge is an intentional part of the experience.

Recommended workflow patterns

Welcome → Payment Selection Screen → Package-specific Capture Path → Save Final Photo → Delivery

Assign each price directly to the first step of its package-specific path.

Paid upgrade after preview

Preview → Mixed Selection Screen → Free Digital path OR Paid Print path

Use Mixed so the free area can continue without payment while the print area starts the paid gate.

Several sessions for one charge

$10 Payment Area → Session 1 → End Session → Session 2 → End Session → Session 3 → Return to Payment

This creates three final-photo session boundaries before the next charge. Do not place another Payment screen between those sessions unless the guest should pay again.

Pre-event payment test

Test with the exact device, provider, account, network, and event workflow:

Open the screen with Nothing selected and confirm no attempt starts.
Tap every package and verify the displayed amount.
Change from one package to another before approval and confirm the active indicator and QR update.
Complete an approval and verify the correct Continue to Step opens.
Test Back or cancellation during an active attempt.
Test any $0.00 area.
Re-enter the screen and confirm Initial Selection resets correctly.
Confirm transactions appear in the provider dashboard.
Test recovery from a temporary network interruption.

Troubleshooting

Problem	What to check
No payment starts when the screen opens	Nothing selected waits for a tap; use First area selected if immediate arming is intended
Wrong amount is requested	Check Price on the tapped area and verify the provider currency
Correct payment opens the wrong path	Check Continue to Step on that exact Payment area
Hidden package is still active	Delete it; the eye icon is editor-only
Active package is not visibly marked	Change Selection Effect from None, or check the area's Override
QR does not appear	Use Stripe or Shopify, enable Payment QR, and make sure a paid attempt is armed
QR shows the previous amount	Cancel and restart the screen; then verify the device is on the current FMX build and test repricing again
Mixed free choice does nothing	Add the screen's normal continuation for non-Step, non-Payment actions
Guest can choose another option while paying	This is expected; FMX safely reprices or cancels before changing actions
Payment approved but the screen does not advance	Verify network access, provider configuration, and the area's Continue to Step; then check the provider dashboard before retrying the charge

For the surrounding editor controls, Mixed actions, and multi-area layouts, see Selection Screen: Types, Mixed Menus, Payments, and Multi-Area Layouts.

Was this helpful?