# Native API: Checkout Integrated
source: https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases/use-cases-7/index.md

## Native API: Checkout Integrated {#native-api-checkout-integrated}

This use case shows how to build a partner-branded product discovery (catalogue tiles) and checkout journey with Native API Integration. Your app or site owns the user experience. Your backend calls Priceless Platform APIs to retrieve products, calculate pricing, place the order, and confirm fulfillment status.

**Context:** Partner enables cardholders to browse and purchase Priceless experiences within the partner app or website.

**Goal:** Enable cardholders to discover products, review details, confirm pricing, and complete checkout.

**Main actors:** Cardholder, Partner app or website, Partner backend, Priceless Platform API.

**Preconditions:**

* The partner is enabled for Native API Integration and is PCI-compliant.
* API credentials are active.
* The partner backend can securely call Priceless Platform APIs.

The following sequence diagram shows the sequence of API calls between the different entities in this scenario.

Diagram use-case-7

### Prerequisite: Fetch catalog metadata {#prerequisite-fetch-catalog-metadata}

These endpoints provide the categories, programs, and locations for your discovery page filters. Call them once during site setup, cache the responses, and refresh them when your catalog changes.


API Reference: `GET /categories`


API Reference: `GET /programs`


API Reference: `GET /locations`

<br />

### Step 1: Display products on your discovery page {#step-1-display-products-on-your-discovery-page}

Your discovery page displays products from the cached product catalog (fetched during the prerequisite). As cardholders interact with your filter controls, display the filtered results from your cached data according to your filtering logic.
For product tile design guidance, refer figma diagram [How to build product tiles](https://www.figma.com/design/nveD0DmZ4Z3p0rShgcBaAK/How-to-build-product-tiles?node-id=0-1&p=f&t=X7wyBcNF6F2H5SsG-0).


API Reference: `GET /products`

<br />

The `GET /products` response includes flags that determine how you handle each product in the following steps.
Note: Review these constraints before you build product detail pages and checkout:

* **Product detail pages:** You can build a native product detail page only when `isTilePunchout` is `false`. When `isTilePunchout` is `true`, you must redirect the cardholder to the external URL in the product response. The `GET /products` response returns `isTilePunchout` in the `punchoutInfo` object.
* **Native checkout:** Native checkout is available only when `isPunchout` is `false`. When `isPunchout` is `true`, redirect the cardholder externally to book or buy the experience. See the `GET /products` sample response for details.
* **Cart locale:** All products in a cart must share the same `locale` value. To check out products from different locales, submit a separate estimate for each locale. The `GET /products/{product_id}` response returns each product's `locale` value.

**For details and guidance, contact your API Implementation Manager.**

### Step 2: Show product details {#step-2-show-product-details}

When a cardholder selects a product, call `GET /products/{product_id}` to retrieve the latest product details.

For native PDP guidance, see [How to build a native product detail page](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/tutorials-and-guides/build-native-product-detail-page/index.md).


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

<br />

### Step 3: Select checkout options {#step-3-select-checkout-options}

On the native PDP, let the cardholder select a product or child-product option and choose any required `peoplePerItem` and `quantity` values. Use the selected product ID and values when requesting an estimate.

For selection rules, see [How to build a native product detail page](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/tutorials-and-guides/build-native-product-detail-page/index.md).

### Step 4: Show final price before confirmation {#step-4-show-final-price-before-confirmation}

Call the estimates endpoint to confirm the final price and availability. Display the final price before the cardholder confirms the purchase.

Use the estimate `orderId` in Step 5.

API Reference: `GET /estimates`

### Step 5: Confirm purchase and lock submit state {#step-5-confirm-purchase-and-lock-submit-state}

At purchase confirmation, call the orders endpoint and lock repeat submission during processing so the cardholder gets clear feedback and avoids duplicate orders.

Use the values from the estimate request when you create the order.

API Reference: `GET /orders`

### Step 6 (Optional): Display order confirmation and live status {#step-6-optional-display-order-confirmation-and-live-status}

When order creation succeeds, call the order status endpoint and display your confirmation page with order identifiers so the cardholder can track fulfillment progress in one place.

API Reference: `GET /orders/{order_id}/statuses`

### Step 7 (Optional): Enable post-purchase tracking from account area {#step-7-optional-enable-post-purchase-tracking-from-account-area}

In post-purchase flows, when the cardholder opens your account history page, call the order history endpoint and support reopening each order so the cardholder can review past purchases and latest status details.

API Reference: `GET /order-histories`

### Error handling {#error-handling}

Use [Code and Formats](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/code-and-formats/index.md) as the source of truth for shared error payloads and reason codes.
Note: Always treat order status as the source of truth for purchase confirmation, especially after any payment authentication step.