# Show Priceless products natively; checkout via a webview on Priceless.com source: https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases/use-cases-4/index.md ## Webview Checkout Sequence {#webview-checkout-sequence} * Show exclusive experiences to your cardholders in your app or site. * Link them to a web-based *cobranded* secure checkout for ordering and fulfillment. * Order confirmations and fulfillment are facilitated by the Priceless platform and the experience provider. Note: The term "Experience" is presented to the end-user, but is called a "Product" in the API Diagram use-case-4 1. Cardholder or user navigates to the page in your app that lists Priceless Experiences 2. Your app requests data for all experiences available from your server (alternately, this can code can be within your application depending on your system architecture) 3. You request a list of products from the API * `/products?partner_id=484` 4. API return JSON with a list Product Ids (PIDs) a certain meta-data * See the [sample JSON](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/use-cases-4/index.md#sample-json-from-step-4-above) at the bottom of this list, or in the [API Reference](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/api-reference/index.md#apis) for `GET /products` 5. Request Product details, for each PID (Product Id) * `/products/82980?partner_id=484` 6. API returns Product Detail payload in JSON format * Sample JSON is too large to show here, but can been seen in the [API Reference](https://developer.mastercard.com/mastercard-benefits-and-experiences-portal/documentation/api-reference/index.md#apis) for `GET /products/{product_id}` 7. You may optionally cache JSON payloads in your environment. 8. Your server/code returns Product information for display to your app 9. Show a navigable list of each Product/Experience with a subset of the details 10. Allow your user to choose an Experience so they can discover the details 11. Show all the details of the offer/Experience to your customer 12. Allow user to Book or Buy the Experience 13. Fetch the `productUrl` parameter from the JSON payload for the PID 14. Link user in a web browser, or an in-app webview, to the product URL in the `url` property. Make sure to add your *source code* at the end of the URL. You will receive this code together with your partner ID. * Sample `productUrl`: * User lands on the Product Detail Page (PDP) on Priceless.com - Priceless Cities takes over: * User can further choose number of people to attend, or specific event date, etc. * User purchases/redeems the Experience product with a full checkout flow * Confirmation page is shown * Email confirmation with purchase details, attached invoice, etc. is sent to the customer * Fulfillment staff verify experience/event details and send an Itinerary to the customer * Emails are cobranded with your logo and Mastercard's logo ## Sample Request and Response {#sample-request-and-response} Use your own `partnerId` to make test calls to Sandbox API endpoints. ### 1. Get the list of Priceless products available to you based on your search criteria. {#1-get-the-list-of-priceless-products-available-to-you-based-on-your-search-criteria} Make a POST call with the cardholder's name, billing address, payment details and other user data. You can pass an optional `accessCodeExternalUniqueIdentifier` to notify the API of some additional identifier, such as an access code, that may affect the layout of a webview: `GET https://sandbox.api.mastercard.com/the-portal/products?partner_id=484&language_code=en-US&bin=543787&offset=50` Possible query parameters: | Parameter | Value | Description | |-----------------|--------|--------------------------------------------------------------------------------------------------------------------| | `partner_id` | 484 | Your partner ID | | `language_code` | en-US | The language of the content returned by Priceless. | | `bin` | 543787 | The first 6 (variable) digits of the credit card number that the consumer must have in order to view the products. | | `offset` | 50 | The number of products you want to skip from the beginning of the list (for pagination purposes). | ```json { "msg": "OK", "data": { "count": 1, "offset": 50, "total": 51, "limit": 50, "products": [ { "id": 126472, "type": { "id": 7, "name": "Event Physical" }, "price": 0, "currencyCode": "EUR", "url": "https:\/\/priceless.com\/p\/126472", "vendor": { "name": "lesvisitesdemaud", "imageURL": "https:\/\/d5xydlzdo08s0.cloudfront.net\/media\/celebrities\/12797\/france__L.jpg" }, "imageURL": "https:\/\/d5xydlzdo08s0.cloudfront.net\/media\/celebrities\/12797\/products\/f1__L.jpg", "name": "Go on a walking tour of Avenue Montaigne s famous fashion houses", "displayName": "Go on a walking tour of Avenue Montaigne's famous fashion houses", "locationId": 16766, "eventVenue": "", "latitude": 48.85874950, "longitude": 2.34899260, "startBookTime": "", "currencyCharacter": "€", "punchoutInfo": { "priceText": "80.00", "formattedPriceText": "€80 per person" }, "isPunchout": true, "categories": [ { "id": 506, "name": "Arts and Culture" }, { "id": 861, "name": "Digital Art" }, { "id": 524, "name": "Landmarks" }, { "id": 1721, "name": "Travel Experiences" } ], "eventCity": "Paris", "masterProductIds": [ 126472 ], "childProducts": [] } ] } } ``` ### 2. Pass a productId to obtain detailed information about the product {#2-pass-a-productid-to-obtain-detailed-information-about-the-product} `GET https://sandbox.api.mastercard.com/the-portal/products/126472?partner_id=484&language_code=en-US` ```json { "msg": "OK", "data": { "id": 126472, "price": 0, "currencyCode": "EUR", "type": { "id": 7, "name": "Event Physical" }, "name": "Go on a walking tour of Avenue Montaigne s famous fashion houses", "displayName": "Go on a walking tour of Avenue Montaigne's famous fashion houses", "vendor": { "id": 12797, "name": "lesvisitesdemaud", "url": "https:\/\/demo.priceless.com\/celebrity\/12797", "imageURL": "https:\/\/d5xydlzdo08s0.cloudfront.net\/media\/celebrities\/12797\/france__L.jpg", "html": "

Maud organizes and conceptualizes many courses relating the history of Paris in many unique and exclusive spaces located in the prestigious neighborhoods of the capital.

" }, "longDescription": "

Gather your fashion and History enthusiasts friends for a guided walking tour of Paris's iconic fashion houses along Avenue Montaigne in the Golden Triangle of the 8th arrondissement. In an intimate group of up to 6 people, your unique tour will take you past world-famous fashion houses, new and old, and you will learn about the history behind the Maison Dior and the Hôtel Plaza Athénée, you will admire the Theater the Champs-Elysées and see the Louis Vuitton headquarters; and much more. Plus, you'll get to visit a high-end boutique and shake hands with the manager or a salesman to cap off the tour. Exclusively for Mastercard cardholders.

 

What's priceless

Stroll along the world's most fashionable avenue accompanied by other fashion enthusiasts or curious novices

 

The highlights

", "description": "

Step into one of the top Parisian fashion district and visit a luxury boutique in the heart of the 8th arrondissement

", "videoURL": "", "specialOffer": false, "locale": "fr_FR", "charity": {}, "details": "", "terms": "", "isEvent": true, "maxQuantityPerOrder": 0, "isExperience": false, "eventTime": "2022-09-30 23:59:00", "startBookTime": "", "endDate": "2022-09-30 14:59:00", "eventCity": "Paris", "eventState": "Île-de-France", "latitude": 48.85874950, "longitude": 2.34899260, "eventAddress": { "addressLine1": "3 avenue Montaigne", "addressLine2": "", "city": "Paris", "stateName": "Île-de-France", "countryCode": "FR", "postalCode": 0 }, "sharedPeoplePerItem": 6, "locationId": 16766, "eventVenue": "", "primaryCategory": { "id": 506, "name": "Arts and Culture", "url": "https:\/\/demo.priceless.com\/categories/506" }, "categories": [ { "id": 506, "name": "Arts and Culture" }, { "id": 861, "name": "Digital Art" }, { "id": 524, "name": "Landmarks" }, { "id": 1721, "name": "Travel Experiences" } ], "eventDuration": 120, "imageURL": "https:\/\/d5xydlzdo08s0.cloudfront.net\/media\/celebrities\/12797\/products\/f1__L.jpg", "url": "https:\/\/demo.priceless.com\/p\/126472", "altImageURLs": [ "https:\/\/d5xydlzdo08s0.cloudfront.net\/media\/celebrities\/12797\/products\/f2__L.jpg" ], "cardExclusivity": [], "issuerExclusivity": [], "isPunchout": true, "punchoutInfo": { "styleName": "Phone Call", "instructions": "To book, please contact Maud at [phone number]

and mention the Priceless Paris program

", "phoneNumber": "+336 50 59 58 07", "additionalPhoneNumbers": [], "emailAddress": "", "url": "", "priceText": "80.00", "formattedPriceText": "€80 per person" }, "locationInclusions": [], "locationExclusions": [], "currencyCharacter": "€", "initiativeName": "EUR", "voiceSkillDescription": "", "variants": [], "programName": "Priceless Experiences", "socialPostFacebook": "", "socialPostInstagram": "", "socialPostTwitter": "", "hintText": "", "digital": false, "buyable": false, "isMastercardGlobal": false, "inventoryCount": 0, "shippable": false, "processingDays": 2, "processingMsg": "", "restrictions": "", "nextStep": {} } } ``` ### 3. Display the product in your app: {#3-display-the-product-in-your-app} ![Display a punchout product in your app](https://static.developer.mastercard.com/content/mastercard-benefits-and-experiences-portal/uploads/punchout_product.png)