POS webview plugin
Prerequisites​
To start integrating with the POS webview, you should have a certified DoorDash Marketplace integration.
Overview​
DoorDash has built a low code solution through which merchants can directly interact with Doordash systems to view, update, and manage their DoorDash orders from their POS devices. This feature is best for platforms who are looking to move fast and not adopt (maintain) multiple solutions such as order adjustment API and order cancellation signals. This document describes the step-by-step guidance on how to integrate with this tool.
Get Started​
Step 1: Confirm receiving Live Order Management URL in the Doordash order payload.​
- Ask DoorDash to add your provider name to our allowlist to start sending the URL. Note: If you selectively want to enable the URL for specific stores, please share the store-id. DoorDash can send the URL only for those stores before rolling the change to all stores linked to your provider.
- A new
live_order_management_urlfield will be added on top of the original order payload (sampleorder). Note that the URL will initially be valid for 1-hour from the time it is sent.
{
"categories": [],
// other fields ...
"tip_amount": 0,
"live_order_management_url": "https://www.doordash.com/merchant/live-order-management/ddd52465-1f9f-4746-8529-xxxxxxxxxxx#token=abcdc65e-dbsd-4234-455a-xxxxxxxxxxx"
}
Verify receiving the url through webhook in the Developer Portal.
Navigate to the ‘Event log’ tab and search for your order. The order payload will have the field live_order_management_url.
Step 2: Get the authentication secret key from DoorDash and store it securely.​
- For each provider DoorDash will provide a unique secret key which is needed to access the URL. Please store this securely.
- Set the secret key as a Bearer token in the Authentication header when initializing the webview.
Authorization: Bearer [secret key]
Step 3: Build the webview on your POS device.​
Android webview solution code example​
- Initialize the clicking button
posOrderButton = findViewById(R.id.pos_order_bn_1)
posOrderButton.clicksThrottleFirstTwoSecs().subscribe {
openPOSOrderManagementPage()
}
- Optional: complete clicksThrottleFirstTwoSecs method
fun View.clicksThrottleFirstTwoSecs(): Observable<Unit> {
return this.clicks().throttleFirst(
Constants.TWO_SECONDS,
TimeUnit.SECONDS
)
}
- Open POS Order Management Webview Page by URL method
private fun openPOSOrderManagementPage() {
orderModel?.let { order ->
val url = order.live_order_management_url // url from order payload
val intent = Intent(context, WebViewActivity::class.java).apply {
putExtra("url", url)
putExtra("Authorization",
"Bearer [Secret key provided by Doordash]") // set the secret
}
context.startActivity(intent)
}
}
- Create webViewActivity
class WebViewActivity : BaseActivity(R.layout.web_view) {
// … other implementation
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.web_view)
val url = intent.getStringExtra("url")
val authHeader = intent.getStringExtra("Authorization")
// set cookie, we strongly recommend you set the Secret key provided by Doordash in the cookie for our WebView
val cookieManager = CookieManager.getInstance()
cookieManager.setAcceptCookie(true)
if (url != null && !authHeader.isNullOrEmpty()) {
cookieManager.setCookie(url, "Authorization=$authHeader")
cookieManager.flush()
}
Timber.i("Url: $url")
// Log.d("cookie", "cookie: ${cookieManager.getCookie(url)}")
val headers = hashMapOf<String, String>()
val closeWebViewButton = findViewById<ImageButton>(R.id.closeWebViewButton)
closeWebViewButton.setOnClickListener {
finish()
}
authHeader?.let {
headers["Authorization"] = it
}
when {
url.isNullOrEmpty() -> throw NullPointerException("Url can not be null or empty")
else -> {
binding.webView.apply {
settings.javaScriptEnabled = true
applyWindowInsetsToMargin(top = true, bottom = true)
webViewClient = webClient
settings.apply {
// make sure you enabled JS for webview
javaScriptEnabled = true
domStorageEnabled = true
}
}
binding.webView.loadUrl(url, headers)
}
}
}
// …
}
- web_view.xml example
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">
<FrameLayout
android:id="@+id/webViewContainer"
android:layout_width="800dp"
android:layout_height="500dp"
android:layout_margin="2dp"
android:background="@android:color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
// Webview content
<com.doordash.android.core.network.view.DDWebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
// Close Button
<ImageButton
android:id="@+id/closeWebViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|top"
android:layout_margin="8dp"
android:src="@drawable/icon_close" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Recommendations​
- It is better to preload behavior when you do binding order modal:
fun bindOrderModel(order: OrderPresentationModel) {
this.orderModel = order
preloadWebView(order)
}
- For the preload implementation, make sure that you enabled domStorageEnabled = true for the webview caching
private fun preloadWebView(order: OrderPresentationModel) {
if (preloadedWebView == null) {
preloadedWebView = WebView(context).apply {
settings.apply {
javaScriptEnabled = true
domStorageEnabled = true
cacheMode = WebSettings.LOAD_DEFAULT
}
}
}
val preloadUrl = buildPreloadUrl(order)
CookieManager.getInstance().apply {
setAcceptCookie(true)
setCookie(preloadUrl, "Authorization=Bearer $AUTHORIZATION_TOKEN")
flush()
}
preloadedWebView?.loadUrl(preloadUrl)
}
- Based on Google's Android Help doc some specific webview versions will face a webview loading slowly issue, make sure that you update to the latest webview version
Web Application - iframe (HTML/Javascript)​
Below is the example to set the secret key as cookie using ‘postMessage’ and embed the plugin (url) in an iframe:
NOTE: We only allow certain domains to embed the plugin as an iFrame, ask DoorDash to allowlist if your domain is not already enabled.
<script>
function sendPostMessage() {
var iframe = document.getElementById("iframeId");
var iframeWindow = iframe.contentWindow;
var cookieData = {
type: "setCookie",
value: "Bearer <your secret key>",
};
iframeWindow.postMessage(cookieData, "https://www.doordash.com");
}
</script>
<iframe
id="iframeId"
width="560"
height="315"
src="https://doordash.com/merchant/live-order-management?id=26405c3d-4819-3001-83bc-12345d94b991#token=abc"
title="Test"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
onload="sendPostMessage()"
>
</iframe>
Step 4: Test and verify​
- Click the button that will open the POS Webview app
- A webView window will pop up after clicking
Step 5: Done and ready for merchants to manage DoorDash orders on your device!​
Communication and Support​
- If you have any questions, then you can submit a ticket via the Developer Portal Support with a category type of 'API Functionality'