SumUp POS provides the ability to embed your SumUp POS store pages within your website or
mobile app.
Embed URLs
You can embed your Goodeats store page within your website or mobile app using an iframe. To embed the page for a single outlet use the following iframe tag and source:
https://goodeats.io/YOUR_OUTLET_IDENTIFIER?embed_outlet=YOUR_OUTLET_IDENTIFIER
The embed parameter will prevent the user from navigating to other store outlets within the iframe.
You can also use the following page URL to display a list of all the outlets within your account. The outlets within this list can be shown/hidden and reordered within the back office. Please note that unlike embedding a single outlet, this will allow users to navigate to other stores.
https://goodeats.io/YOUR_SUBDOMAIN/all
If you find that the outlet list in the above link is not displayed suitably, we suggest implementing your own outlet list with buttons pointing to each outlet using the https://goodeats.io/YOUR_OUTLET_IDENTIFIER?embed_outlet=YOUR_OUTLET_IDENTIFIER link as above.
Embedding as an iframe
The following HTML and CSS can be used to embed the Sumup POS page fullscreen within your website.
Payment request
You must add allowpaymentrequest="true" to the iframe to allow Apple Pay and Google Pay payments via Stripe.
<!DOCTYPE html>
<html>
<head>
<title>Order online</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
html, body, iframe {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
border: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<iframe src="https://goodeats.io/YOUR_OUTLET_IDENTIFIER?embed_outlet=YOUR_OUTLET_IDENTIFIER" allowpaymentrequest="true"></iframe>
</body>
</html>
Support
While SumUp supports embedding your SumUp POS store within an iframe, we cannot provide assistance with embedding the page into your website as all platforms are different. Please contact your website developer for assistance.
Embedding in an app
When embedding in a mobile application, please add an app_embed=true parameter to the embed URL. This will disable the social login buttons (Google and Facebook) as these are blocked by Google and Facebook when running in an embedded browser.
Example URL:
https://goodeats.io/YOUR_OUTLET_IDENTIFIER?embed_outlet=YOUR_OUTLET_IDENTIFIER&app_embed=true
https://goodeats.io/YOUR_SUBDOMAIN/all?app_embed=true
Apple Pay and Google Pay unavailable
Apple Pay and Google Pay will not be available when embedding your SumUp POS store page in an app. This is a restriction imposed by the payment processors which we cannot overcome.
Social login unavailable
Facebook and Google login will be unavailable when embedding the your SumUp POS store page in an app. This is a restriction imposed by the social login providers.
Listing outlets on your website
The API can be used to fetch a list of outlets which can then be displayed in your website. This can be used to provide the user with a choice of outlets to order from which can be linked or directly or embedded as an iframe.
API documentation for the endpoint can be found here
The slug field in the response is the outlet identifier.
The following code shows how the outlet list can be fetched from a JavaScript application.
fetch('https://weborderapi.thegoodtill.com/api/outlets?client_subdomain=YOUR_SUBDOMAIN')
.then(response => response.json())
.then(data => {
// Get outlet list
const outlets = data.outlets;
// Use outlet list...
})
.catch(error => console.error(error));