# 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

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/

Last Updated: 11/23/2021, 9:15:27 AM