Integration
Similarly to Checkout Widget and other Ingrid widgets, Receipt Widget should be embedded in a site controlled by Merchant.
Authentication and authorization
In order to load the widget with customer's order you will need an auth token. This token authenticates widget and authorizes it to access the resources.
To get your token send following GET request:
https://api.ingrid.com/v1/receipt_widget/token?site_id=SITE_ID&session_id=SESSION_ID
with following headers:
Authorization: Bearer PRIVATE_KEY_BASE64
x-site-id: SITE_ID
where:
- SITE_ID - your site ID,
- SESSION_ID - identifier of completed session that will be presented in Receipt widget
- PRIVATE_KEY_BASE64 - base64-encoded site private key
Private key must not be exposed to Customer's browser. Call the above API on the backend side and pass only the obtained token to the browser client.
Rendering widget
In order to embed receipt widget on your page you need to add following script
tag to your HTML head
:
<script src="https://cdn.ingrid.com/receipt-widget/bootstrap.js"></script>
This will fetch receipt widget bootstrap code and make it available as window.IngridReceiptWidgetApi
. To render widget, run config
with following arguments:
window.IngridReceiptWidgetApi.config({
containerId: "CONTAINER_ID",
token: "AUTH_TOKEN",
siteId: "SITE_ID",
sessionId: "SESSION_ID",
locale: "en-US",
});
where:
- AUTH_TOKEN - token obtained in previous step,
- CONTAINER_ID - HTML element to host receipt widget,
- SITE_ID, SESSION_ID - same as in preveious step.
Supported Languages
The following languages are supported:
- English (Great Britain) - en-GB
- English (United States) - en-US
- Swedish - sv-SE
Stage env
On stage environment, replace https://api.ingrid.com/
with https://api-stage.ingrid.com/
and https://cdn.ingrid.com/
with https://cdn-stage.ingrid.com/