# Catalog and payments in webshops

> Learn how webshops reuse your project's In-App Purchasing catalog and forward purchases to your existing payment providers.

A webshop reads the [In-App Purchasing (IAP)](/iap.md) catalog from your Unity Cloud project and routes each purchase to the same [IAP payment providers](/iap/payment-providers.md) you use in your game. Players see the same catalog on the web that you maintain for your mobile app.

## Catalog source

When a player visits your shop, the webshop requests your project's product catalog from IAP and renders it in the shop's themed layout.

Changes you make in your [catalog](/iap/create-catalog-in-editor.md) automatically flow through to the webshop when a player loads a new session.

Webshops display products in the order and grouping that IAP returns them. To change the product order or grouping, update the catalog in IAP.

## Product display fields

The webshop shows the following player-facing fields for each product:

| Field                 | Description                                                                                                                                                                                                                                                                                           |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Title and description | The product's display name and player-facing description, rendered as the product card's title and body text.                                                                                                                                                                                         |
| Price                 | The product's price in the player's currency, rendered as the primary price on the card.                                                                                                                                                                                                              |
| Sale price            | When a product is on sale, the webshop shows the sale price as the primary price and the original price struck through next to it.                                                                                                                                                                    |
| Badge                 | An optional chip on the card, such as **Best value** or **+20% bonus**. Badge text and icon are set in your IAP catalog and the webshop displays them automatically. Any product can have a badge, whether or not it's on sale. For more information, refer to [Sales and badges](#sales-and-badges). |
| Product image         | An optional image for the product. Cards without an image use the theme's default placeholder.                                                                                                                                                                                                        |

The webshop frames product fields with your theme, including colors, typography, and layout. It also frames product fields with your branding, including the hero banner and thumbnail. For more information about themes and branding, refer to [Themes and branding in webshops](./theming-and-branding.md). For the complete list of fields the webshop reads from each product, refer to [Webshop catalog schema reference](./catalog-schema.md).

Make sure your IAP catalog has at least one product available for web sale before you publish. If your IAP catalog is empty, the shop renders without product cards.

### Sales and badges

Webshops read sale pricing and badges from your IAP catalog. You don't configure them in the Webshop Dashboard.

* Sales: Set the product’s web price and mark the product as on sale in the catalog. The webshop automatically displays the product's regular price as the struck-through value. You only need to set the sale price and mark the product as on sale in the catalog.
* Badges: Add badge text and an optional icon for each listing in the catalog, such as **Best value** or **+20% bonus**. When a listing has a sale, the badge is automatically set to the % discount of the webshop price and the standard price of the item, but this can be manually overwritten.  Badges are separate from sales, so any product can have a badge.
* Bonuses: When you mark an item as having a **Bonus** promotion, the webshop displays the **Subtitle** field of the listing as struck-through. Use this to display an item with the title `120 Gems` and a struck-through subtitle of `100 Gems` to indicate that the listing includes a bonus amount of gems.

Configure sales and badges where you define products in IAP.

## Product visibility in webshops

Webshops only display the products that you make available for web sale in your IAP catalog. To include or exclude a product from a webshop, update its visibility in the catalog. The change appears the next time the webshop fetches the catalog.

For more information, refer to [Catalogs and catalog listings](/iap/catalogs-and-catalog-listings.md).

## Player-specific catalog settings

You configure currency, locale, and player-specific product selection in your IAP setup. When the webshop requests products, it passes the player's session context to IAP, including any `locale` and `currency` parameters the game sends in the deep link. The webshop renders whatever the catalog returns. To change what a particular player sees, change the configuration in IAP.

## Payment flow

Webshops don’t process payments directly. Instead, they route each purchase to an [IAP payment provider](/iap/payment-providers.md) that’s already configured for your project. This is the same provider that handles purchases in your mobile app.

After the payment is authorized, the webshop flow is complete. Receipt validation, entitlement grants, and refunds use the same IAP flows as in-game purchases. You don’t need to reconcile a separate webshop ledger.

For the player-facing return flow after a purchase, refer to [Open a webshop from your game](./deep-links.md#post-purchase-return-to-the-game).

## Test purchases in a draft

The **Dev preview URL** appears in the **General** section of the **Edit** view. It opens the environment’s draft configuration in your browser.

> **Warning:**
>
> The Dev preview URL opens a live checkout flow. If your project has a real catalog and payment provider configured, completing a purchase creates a real charge and grants a real entitlement.

To test the full purchase flow without spending real money, use a sandbox account or test card from your payment provider’s documentation. Webshops don’t have a separate test mode. The IAP payment provider manages test modes.

To preview the theme without a real catalog or test transaction, enable **Mock catalog** in the **Catalog & payment provider** section of the **Edit** view. The **Preview** pane then shows a fixed set of sample products. Mock products exist only in the Dashboard preview. Players can’t buy them, and they never appear in the published shop.