Checkout

The checkout endpoints provide ways of performing a checkout process against an Order. The Storefront API supports two ways of checking out an order, one using hosted checkout pages, and a more advanced option for inline payment processing.

Hosted

With the hosted checkout flow it is required that before redirecting to the payment gateway a checkout token should be generated. This token is passed to the pay endpoint to ensure that only the given order can be processed in response to the checkout request. The pay endpoint should be launched in a WebView/iframe with this token which will redirect to the given Orders payment gateway for payment capture. To determine the outcome of the payment developers should monitor the WebView/iframes URL. They will be redirected to the same pay endpoint URL with either a /completed, /canceled or /errored suffix.

Initialize a hosted checkout flow

Initialization prepares the order for checkout and produces a token to be passed to the /pay endpoint.

GET/umbraco/commerce/storefront/api/v1/checkout/{orderId}/token
Path parameters
orderId*string (uuid)

The ID of the order being checked out

Example: "1ca12483-eec6-414f-bfcc-2dd2430cac4c"
Header parameters
Response

Success

Body
tokenstring
orderNumberstring
payUrlnullable string
Request
const response = await fetch('/umbraco/commerce/storefront/api/v1/checkout/{orderId}/token', {
    method: 'GET',
    headers: {
      "Store": "text"
    },
});
const data = await response.json();
Response
{
  "token": "text",
  "orderNumber": "text",
  "payUrl": "text"
}

Starts the hosted payment process

Redirects to the given Orders selected payment gateway for payment processing.If in Framed mode should be redirected to as normal, or if in Framed mode, the endpoint URL should be launched in a WebView/iframe and developers should watch for changes in the URL to detect the outcome of the transaction. Final endpoint URLs will be one of {endpointUrl}/completed, {endpointUrl}/canceled or {endpointUrl}/errored. If launched in an iframe from a web context, you can also register a message event handler to get notified of the final status. Messages will be in the format UC:{orderId}:{token}:{status}

GET/umbraco/commerce/storefront/api/v1/checkout/{orderId}/pay/{token}
Path parameters
orderId*string (uuid)

The ID of the order being checked out

Example: "a3140924-7f3a-4625-a378-81f05b6b9166"
token*string

The checkout token for the checkout session

Example: "ca6f5d62-32de-4849-bbf4-643d6f945a8d"
Response

Success

Request
const response = await fetch('/umbraco/commerce/storefront/api/v1/checkout/{orderId}/pay/{token}', {
    method: 'GET',
    headers: {},
});
const data = await response.json();
Response
{
  "type": "text",
  "title": "text",
  "status": 0,
  "detail": "text",
  "instance": "text"
}

Inline

With the inline checkout flow, it is left to the implementing developer to perform payment capture. Before a capture can begin, the order should be initialized using the initialize endpoint which prepares the Order for capture. The initialize endpoint will return the settings of the Orders selected payment method, along with details of expected metadata needed by the payment provider. Developers can use this data to perform an inline capture and call the confirm endpoint when the capture is successful, passing back any metadata captured.

Initialize an inline checkout flow

With inline checkout flow it's the developers responsibility to capture the transaction and confirm the payment via the /confirm endpoint. The selected payment methods setting are returned to ease payment gateway configuation, along with details of any meta data the payment method expects to be captured.

GET/umbraco/commerce/storefront/api/v1/checkout/{orderId}/initialize
Path parameters
orderId*string (uuid)

The ID of the order being checked out

Example: "b69092b3-4609-4640-b283-b76f44dd8dd2"
Header parameters
Response

Success

Body
orderNumberstring
paymentMethodCheckoutPaymentMethodResponseDto (object)
Request
const response = await fetch('/umbraco/commerce/storefront/api/v1/checkout/{orderId}/initialize', {
    method: 'GET',
    headers: {
      "Api-Key": "text",
      "Store": "text"
    },
});
const data = await response.json();
Response
{
  "orderNumber": "text",
  "paymentMethod": {
    "urls": {
      "continue": "text",
      "cancel": "text",
      "error": "text",
      "callback": "text"
    }
  }
}

Confirms an inline checkout flow

Updates the given Orders transaction info with the supplied details and transitions the order from a open to a finalized state

POST/umbraco/commerce/storefront/api/v1/checkout/{orderId}/confirm
Path parameters
orderId*string (uuid)

The ID of the order being checked out

Example: "087492f4-4ff2-41fd-aebd-df1dcd198c3c"
Query parameters
Header parameters
Body
amountnumber (double)
feenullable number (double)
transactionIdstring
paymentStatusPaymentStatus (enum)
InitializedAuthorizedCapturedCancelledRefundedPendingExternalSystemError
metaDatanullable object
Response

Success

Body
orderNumberstring
transactionInfoOrderTransactionInfoResponseDto (object)
Request
const response = await fetch('/umbraco/commerce/storefront/api/v1/checkout/{orderId}/confirm', {
    method: 'POST',
    headers: {
      "Api-Key": "text",
      "Store": "text",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({}),
});
const data = await response.json();
Response
{
  "orderNumber": "text",
  "transactionInfo": {
    "transactionId": "text",
    "authorizedAmount": {
      "currency": {
        "id": "123e4567-e89b-12d3-a456-426614174000",
        "code": "text"
      },
      "value": 0,
      "formatted": {
        "value": "text"
      }
    },
    "feeAmount": {
      "currency": {
        "id": "123e4567-e89b-12d3-a456-426614174000",
        "code": "text"
      },
      "value": 0,
      "formatted": {
        "value": "text"
      }
    },
    "baseCurrencyExchangeRate": 0,
    "paymentStatus": "Initialized"
  }
}

Last updated