Uber offers a set of web pages that can be readily embedded into a mobile app as webviews to ease technical integration. They can be customized to reflect the merchant’s brand and user experience.

¶ Webview Concepts

¶ Partner Identifier

The partner identifier is a string that uniquely identifies the merchant or brand embedding the webview. It helps the webview determine the customizations it should apply to the page.

¶ Country/Language in URLs

The customer’s country and language may be specified in webview URLs.

• Customer in the US using English
  • For these customers, nothing additional needs to be added to the URL.
  • Example: https://www.ubereats.com/delivery-details?ptr={partner-identifier}
• Customer not in the US, using the default language for their country
  • For these customers, just the country code needs to be added to the URL.
  • Example: https://www.ubereats.com/gb/delivery-details?ptr={partner-identifier}
• Customer using a language other than the default for their country
  • For these customers, both the country code and language need to be added to the URL.
  • Example: https://www.ubereats.com/us-es/delivery-details?ptr={partner-identifier}

¶ Address Entry

The address entry page allows the customer to enter in their delivery details in a structured fashion, which the merchant can then use to help fulfill the order.

¶ URL

The address entry page can be accessed at https://www.ubereats.com/{country}-{language}/delivery-details?ptr={partner-identifier} (see the Partner Identifier and Country/Language in URLs sections above). If the customer needs to edit their address or delivery details, the URL https://www.ubereats.com/{country}-{language}/delivery-details/instructions?ptr={partner-identifier} can instead be used to open the second screen of the flow prefilled.

¶ Capturing Results

The address entry page expects a JavaScript function to be injected into the global namespace by the merchant. When the customer submits the form, that function will be executed. JavaScript bridge functions cannot accept objects as parameters, so the address object is serialized using the following steps:

• JSON.stringify()
• Convert to binary using toBinary to handle Unicode characters
• btoa()

To unserialize the address object, the opposite should be done:

• atob()
• Convert from binary using fromBinary
• JSON.parse()

¶ Function Call Format (iOS)

window.webkit.messageHandlers.userDidFinishEnteringAddress.postMessage(
  address
);

¶ Function Call Format (Android)

window.hostAppBridge.userDidFinishEnteringAddress(address);

¶ Address Schema

{
  "address1": String,
  "address2": String,
  "latitude": Number,
  "longitude": Number,
  "locationId": String,
  "locationProvider": String,
  "addressComponents": {
  "city": String,
     "countryCode": String,
     "firstLevelSubdivisionCode": String,
     "postalCode": String,
  },
  "instructions": {
    "interactionType": String ("door_to_door", "curbside" or "leave_at_door"),
    "aptOrSuite": String,
    "businessName": String,
    "notes": String
  }
}

¶ Success Callback

The merchant app should notify the webview that it has successfully received the address by posting a message event to the window. The message should, at the minimum, consist of a field named “type” set to the value “addressReceived”. If the webview does not receive this callback message within a designated time frame after calling the app bridge, the webview will log an event to signify that the address entry has failed.

window.postMessage({type: 'addressReceived'});

¶ Items Needed

¶ Typography

A set of .woff and .woff2 files are required (both files must be provided for each font). Currently, two fonts can be customized:

• Medium weight
• Regular/paragraph weight

¶ Colors

A hex value (e.g. #276EF1) must be provided for each color. Currently, two colors can be customized:

• Primary
  • This is used for the button background and form accent. This must conform to the Web Content Accessibility Guidelines, level AA. A contrast tester may be helpful.
• Positive
  • This is used for UI controls such as checkboxes.

¶ Previous Locations

The webview will use localStorage to store the most recently selected delivery location. If there is a previously selected delivery location, the customer will be redirected to the second screen of the address entry flow with the form prefilled.

The merchant app must launch the webview with the ability for localStorage to be accessed, and it must also ensure that localStorage is cleared on logout and app deletion.

¶ Order Tracking

The order tracking page gives customers visibility into their order status and provide reassurance that their food is in progress with different order stages.

¶ URL

The order tracking page can be accessed at https://www.ubereats.com/{country}-{language}/orders/{order-id}?ptr={partner-identifier} (see the Partner Identifier and Country/Language in URLs sections above).

¶ Order Lifecycle

Orders will be displayed in the order tracking page for up to 30 minutes after the order has been completed. Attempting to retrieve the order after that will yield an error page, so partners should not reuse stale URLs.

¶ Items Needed

¶ Typography

A set of .woff and .woff2 files are required (both files must be provided for each font). Currently, two fonts can be customized:

• Medium weight
• Regular/paragraph weight

¶ Colors

A hex value (e.g. #276EF1) must be provided for each color. Currently, two colors can be customized:

• Positive
  • This is used for UI controls such as the tracking bar.
• backgroundSecondary
  • This is used as the background, and must be either white (#FFFFFF) or gray (#F6F6F6).

¶ Imagery

A custom animation may be provided for four steps in the order process:

• Confirming
• Preparing
• Success
• Cancelled

Animation files must be provided as Adobe After Effects JSON files, and should have transparent backgrounds. Optionally, a static image placeholder may be provided for each step which will render while the animation loads.