# How to build a native product detail page
source: https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/tutorials-and-guides/build-native-product-detail-page/index.md

## Overview {#overview}

Use this tutorial to build a native product detail page (PDP) for Priceless Platform products. Your PDP displays product information from the API and guides cardholders to the correct redemption path.

Use this tutorial with [Native API: Checkout Integrated](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases/use-cases-7/index.md) or [Hybrid API Integration: Advanced](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases/use-cases-9/index.md).

## Prerequisites {#prerequisites}

* An active Priceless Platform API project and credentials.
* A native PDP for checkout products.
* A redirect flow for tile punchout and punchout products.
* A user interface that supports product options, quantity selection, and clear availability messages.

## What You Will Learn {#what-you-will-learn}

* How to identify products that require a redirect.
* How to display checkout product details and child-product options.
* How to select `peoplePerItem` and quantity values.
* How to prevent checkout for unavailable products.

## Retrieve Product Details {#retrieve-product-details}

1. When a cardholder selects a product tile, check `isTilePunchout` in the product response.
2. If `isTilePunchout` is `true`, open the destination URL provided by the API. Do not build a native PDP for this product.
3. If `isTilePunchout` is `false`, call `GET /products/{product_id}` to retrieve the latest product details.


API Reference: `GET /products`


API Reference: `GET /products/{product_id}`

## Select the Redemption Path {#select-the-redemption-path}

Use `isPunchout` in the product-details response to select the redemption path.

* If `isPunchout` is `true`, display the redemption instructions from `punchoutInfo`. Direct the cardholder to the external destination or provide the displayed redemption instructions. Do not add the product to a native checkout flow.
* If `isPunchout` is `false`, display the product details and continue to checkout.

## Display Child Products {#display-child-products}

Some checkout products contain child products, such as dates, ticket types, or options.

1. Check `childProducts` in the products or product-details response.
2. If child products are available, display the available choices using their `displayName` values.
3. When the cardholder makes a selection, retrieve the details for the selected child product.
4. Use the selected child product ID in the estimate or cart request.

If `childProducts` is empty, use the master product for the checkout request.

## Select People Per Item {#select-people-per-item}

Use `peoplePerItem` to represent the number of people included in one item. Do not display or send `peoplePerItem` for punchout products.

For a checkout product, use these rules:

1. If the selected child product has `variants`, offer the `peoplePerItem` values from the variants. Use the selected variant's product ID and price in the checkout request.
2. If the selected child product has no variants, use its `sharedPeoplePerItem` value.
3. If the product has no child products but has variants, offer the `peoplePerItem` values from the master-product variants.
4. If the master product has no variants, use its `sharedPeoplePerItem` value.

## Validate Availability and Quantity {#validate-availability-and-quantity}

Before you enable an add-to-cart or checkout action, validate the current product or selected child product.

* If `startBookTime` is in the future, display a coming-soon message and do not allow checkout.
* If `inventoryCount` is `0`, display a sold-out message and do not allow checkout.
* Validate the selected quantity against `inventoryCount` and `maxQuantityPerOrder`. If `maxQuantityPerOrder` is `0`, allow the cardholder to select up to the available inventory.

## Prepare for Checkout {#prepare-for-checkout}

Use the selected product ID, `peoplePerItem`, and quantity values to create an estimate or cart. Use the same values when you place the order.

Add products with the same `locale` value to one cart. Create a separate cart or estimate for products with different locales.

## Next Steps {#next-steps}

For the complete checkout flow, see [Native API: Checkout Integrated](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases/use-cases-7/index.md) or [Hybrid API Integration: Advanced](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases/use-cases-9/index.md).