Choose a version:

pos.receipt-header.block.render
Target

Renders a custom section within the POS receipt header

Note

This is part of a POS UI Extensions developer preview. More information to come.

Anchor to transactioncompletewithreprintdataTransactionCompleteWithReprintData

The data object provided to this extension target.

Anchor to connectivity connectivity required
Anchor to device device required
Anchor to locale locale string required
Anchor to session session required
Anchor to storage storage required
Anchor to transaction transaction | | | | required

ConnectivityState

internetConnected
Whether the device is connected to the internet
```
ConnectivityStateSeverity
```

export interface ConnectivityState {
  /**
   * Whether the device is connected to the internet
   */
  internetConnected: ConnectivityStateSeverity;
}

ConnectivityStateSeverity

'Connected' | 'Disconnected'

Device

deviceId
The ID of the device
```
number
```
isTablet
Whether the device is a tablet
```
boolean
```
name
The name of the device
```
string
```

export interface Device {
  /**
   * The name of the device
   */
  name: string;
  /**
   * The ID of the device
   */
  deviceId: number;
  /**
   * Whether the device is a tablet
   */
  isTablet: boolean;
}

Session

currency
The currency code associated with the location currently in on POS.
```
CurrencyCode
```
locationId
The location ID associated with the POS' current location.
```
number
```
posVersion
The POS version.
```
string
```
shopDomain
The shop domain associated with the shop currently logged into POS.
```
string
```
shopId
The shop ID associated with the shop currently logged into POS.
```
number
```
staffMemberId
The staff ID who is currently pinned into the POS. Note that this staff member ID may be different to the User ID, as the staff member who enters their PIN may be different to the User who logged onto POS.
```
number
```
userId
The user ID associated with the Shopify account currently authenticated on POS.
```
number
```

export interface Session {
  /**
   * The shop ID associated with the shop currently logged into POS.
   */
  shopId: number;

  /**
   * The user ID associated with the Shopify account currently authenticated on POS.
   */
  userId: number;

  /**
   * The shop domain associated with the shop currently logged into POS.
   */
  shopDomain: string;

  /**
   * The location ID associated with the POS' current location.
   */
  locationId: number;

  /**
   * The staff ID who is currently pinned into the POS.
   * Note that this staff member ID may be different to the User ID, as the staff member who enters their PIN may be different to the User who logged onto POS.
   */
  staffMemberId?: number;

  /**
   * The currency code associated with the location currently in on POS.
   */
  currency: CurrencyCode;

  /**
   * The POS version.
   */
  posVersion: string;
}

CurrencyCode

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'

Storage

clear
Clears the storage.
```
() => Promise<void>
```

delete

Deletes a key from the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<boolean>

entries

Gets all the keys and values in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>() => Promise<[Keys, StorageTypes[Keys]][]>

get

Gets the value of a key in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys) => Promise<StorageTypes[Keys]>

set

Sets the value of a key in the storage.

<StorageTypes extends BaseStorageTypes = BaseStorageTypes, Keys extends keyof StorageTypes = keyof StorageTypes>(key: Keys, value: StorageTypes[Keys]) => Promise<void>

export interface Storage<
  BaseStorageTypes extends Record<string, any> = Record<string, unknown>,
> {
  /**
   * Sets the value of a key in the storage.
   *
   * @param key - The key to set the value for.
   * @param value - The value to set for the key.
   * Can be any primitive type supported by `JSON.stringify`.
   * @throws StorageError when:
   *    the extension exceeds its allotted storage limit.
   *    the value exceeds its allotted storage limit.
   *    the key is not a string or exceeds its allotted size.
   */
  set<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    key: Keys,
    value: StorageTypes[Keys],
  ): Promise<void>;

  /**
   * Gets the value of a key in the storage.
   *
   * @param key - The key to get the value for.
   * @returns The value of the key.
   * If no value for the key exists, the resolved value is undefined.
   * @throws StorageError when the key is not a string or exceeds its allotted size.
   */
  get<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    key: Keys,
  ): Promise<StorageTypes[Keys] | undefined>;

  /**
   * Clears the storage.
   */
  clear: () => Promise<void>;

  /**
   * Deletes a key from the storage.
   *
   * @param key - The key to delete.
   */
  delete<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(
    key: Keys,
  ): Promise<boolean>;

  /**
   * Gets all the keys and values in the storage.
   *
   * @returns An array containing all the keys and values in the storage.
   */
  entries<
    StorageTypes extends BaseStorageTypes = BaseStorageTypes,
    Keys extends keyof StorageTypes = keyof StorageTypes,
  >(): Promise<[Keys, StorageTypes[Keys]][]>;
}

SaleTransactionData

balanceDue
```
Money
```
customer
```
Customer
```
discounts
```
Discount[]
```
draftCheckoutUuid
```
string
```
executedAt
```
string
```
grandTotal
```
Money
```
lineItems
```
LineItem[]
```
orderId
```
number
```
paymentMethods
```
Payment[]
```
shippingLines
```
ShippingLine[]
```
subtotal
```
Money
```
taxLines
```
TaxLine[]
```
taxTotal
```
Money
```
transactionType
```
'Sale'
```

export interface SaleTransactionData extends BaseTransactionComplete {
  transactionType: 'Sale';
  draftCheckoutUuid?: string;
  lineItems: LineItem[];
}

Money

amount
```
number
```
currency
```
string
```

export interface Money {
  amount: number;
  currency: string;
}

Customer

id
```
number
```

export interface Customer {
  id: number;
}

Discount

amount
```
number
```
currency
```
string
```
discountDescription
```
string
```
type
```
string
```

export interface Discount {
  amount: number;
  currency?: string;
  discountDescription?: string;
  type?: string;
}

LineItem

attributedUserId
```
number
```
discountAllocations
```
DiscountAllocation[]
```
discounts
```
Discount[]
```
hasSellingPlanGroups
```
boolean
```
isGiftCard
```
boolean
```
price
```
number
```
productId
```
number
```
properties
```
{ [key: string]: string; }
```
quantity
```
number
```
requiresSellingPlan
```
boolean
```
sellingPlan
The currently selected selling plan for this line item.
```
SellingPlan
```
sku
```
string
```
taxable
```
boolean
```
taxLines
```
TaxLine[]
```
title
```
string
```
uuid
```
string
```
variantId
```
number
```
vendor
```
string
```

export interface LineItem {
  uuid: string;
  price?: number;
  quantity: number;
  title?: string;
  variantId?: number;
  productId?: number;
  discounts: Discount[];
  discountAllocations?: DiscountAllocation[];
  taxable: boolean;
  taxLines: TaxLine[];
  sku?: string;
  vendor?: string;
  properties: {[key: string]: string};
  isGiftCard: boolean;
  attributedUserId?: number;
  requiresSellingPlan?: boolean;
  hasSellingPlanGroups?: boolean;
  /**
   * The currently selected selling plan for this line item.
   */
  sellingPlan?: SellingPlan;
}

DiscountAllocation

allocatedAmount
```
MoneyV2
```

export interface DiscountAllocation {
  allocatedAmount: MoneyV2;
}

MoneyV2

amount
```
string
```
currencyCode
```
string
```

export interface MoneyV2 {
  amount: string;
  currencyCode: string;
}

SellingPlan

Represents a selling plan associated with a line item.

deliveryInterval
The interval of the selling plan. (DAY, WEEK, MONTH, YEAR).
```
string
```
deliveryIntervalCount
The number of intervals between deliveries.
```
number
```
digest
The fingerprint of the applied selling plan within this cart session. Provided by POS. Not available during refund / exchanges.
```
string
```
id
The unique identifier of the selling plan.
```
number
```
name
The name of the selling plan.
```
string
```

export interface SellingPlan {
  /**
   * The unique identifier of the selling plan.
   */
  id: number;
  /**
   * The name of the selling plan.
   */
  name: string;
  /**
   * The fingerprint of the applied selling plan within this cart session.
   * Provided by POS. Not available during refund / exchanges.
   */
  digest?: string;
  /**
   * The interval of the selling plan. (DAY, WEEK, MONTH, YEAR).
   */
  deliveryInterval?: string;
  /**
   * The number of intervals between deliveries.
   */
  deliveryIntervalCount?: number;
}

TaxLine

enabled
```
boolean
```
price
```
Money
```
rate
```
number
```
rateRange
```
{ min: number; max: number; }
```
title
```
string
```
uuid
```
string
```

export interface TaxLine {
  title: string;
  price: Money;
  rate: number;
  uuid?: string;
  rateRange?: {min: number; max: number};
  enabled?: boolean;
}

Payment

amount
```
number
```
currency
```
string
```
type
```
PaymentMethod
```

export interface Payment {
  amount: number;
  currency: string;
  type: PaymentMethod;
}

PaymentMethod

'Cash' | 'Custom' | 'CreditCard' | 'CardPresentRefund' | 'StripeCardPresentRefund' | 'GiftCard' | 'StripeCreditCard' | 'ShopPay' | 'StoreCredit' | 'Unknown'

ShippingLine

handle
```
string
```
price
```
Money
```
taxLines
```
TaxLine[]
```
title
```
string
```

export interface ShippingLine {
  handle?: string;
  price: Money;
  title?: string;
  taxLines?: TaxLine[];
}

ReturnTransactionData

balanceDue
```
Money
```
customer
```
Customer
```
discounts
```
Discount[]
```
exchangeId
```
number
```
executedAt
```
string
```
grandTotal
```
Money
```
lineItems
```
LineItem[]
```
orderId
```
number
```
paymentMethods
```
Payment[]
```
refundId
```
number
```
returnId
```
number
```
shippingLines
```
ShippingLine[]
```
subtotal
```
Money
```
taxLines
```
TaxLine[]
```
taxTotal
```
Money
```
transactionType
```
'Return'
```

export interface ReturnTransactionData extends BaseTransactionComplete {
  transactionType: 'Return';
  refundId?: number;
  returnId?: number;
  exchangeId?: number;
  lineItems: LineItem[];
}

ExchangeTransactionData

balanceDue
```
Money
```
customer
```
Customer
```
discounts
```
Discount[]
```
exchangeId
```
number
```
executedAt
```
string
```
grandTotal
```
Money
```
lineItemsAdded
```
LineItem[]
```
lineItemsRemoved
```
LineItem[]
```
orderId
```
number
```
paymentMethods
```
Payment[]
```
returnId
```
number
```
shippingLines
```
ShippingLine[]
```
subtotal
```
Money
```
taxLines
```
TaxLine[]
```
taxTotal
```
Money
```
transactionType
```
'Exchange'
```

export interface ExchangeTransactionData extends BaseTransactionComplete {
  transactionType: 'Exchange';
  returnId?: number;
  exchangeId?: number;
  lineItemsAdded: LineItem[];
  lineItemsRemoved: LineItem[];
}

ReprintReceiptData

balanceDue
```
Money
```
customer
```
Customer
```
discounts
```
Discount[]
```
executedAt
```
string
```
grandTotal
```
Money
```
lineItems
```
OrderLineItem[]
```
orderId
```
number
```
paymentMethods
```
Payment[]
```
shippingLines
```
ShippingLine[]
```
subtotal
```
Money
```
taxLines
```
TaxLine[]
```
taxTotal
```
Money
```
transactionType
```
'Reprint'
```

export interface ReprintReceiptData extends BaseTransactionComplete {
  transactionType: 'Reprint';
  lineItems: OrderLineItem[];
}

OrderLineItem

attributedUserId
```
number
```
currentQuantity
```
number
```
discountAllocations
```
DiscountAllocation[]
```
discounts
```
Discount[]
```
hasSellingPlanGroups
```
boolean
```
isGiftCard
```
boolean
```
price
```
number
```
productId
```
number
```
properties
```
{ [key: string]: string; }
```
quantity
```
number
```
refunds
```
LineItemRefund[]
```
requiresSellingPlan
```
boolean
```
sellingPlan
The currently selected selling plan for this line item.
```
SellingPlan
```
sku
```
string
```
taxable
```
boolean
```
taxLines
```
TaxLine[]
```
title
```
string
```
uuid
```
string
```
variantId
```
number
```
vendor
```
string
```

export interface OrderLineItem extends LineItem {
  // Number of remaining goods
  currentQuantity: number;
  refunds?: LineItemRefund[];
}

LineItemRefund

createdAt
```
string
```
quantity
```
number
```

export interface LineItemRefund {
  createdAt: string;
  quantity: number;
}

Was this section helpful?

Receipt Header Block

jsx

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

const {transaction} = shopify;

const qrCodeValue =

transaction.transactionType === 'Exchange'

? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`

: `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

return (

<s-pos-receipt-block>

<s-text>Transaction type: {transaction.transactionType}</s-text>

<s-text>Total tax ({transaction.taxTotal.currency}): {transaction.taxTotal.amount}</s-text>

<s-qr-code value={`https://www.shopify.com?${qrCodeValue}`} />

</s-pos-receipt-block>

);

};

Examples

Receipt Header Block

jsx

import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const {transaction} = shopify;
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  return (
    <s-pos-receipt-block>
      <s-text>Transaction type: {transaction.transactionType}</s-text>
      <s-text>Total tax ({transaction.taxTotal.currency}): {transaction.taxTotal.amount}</s-text>
      <s-qr-code value={`https://www.shopify.com?${qrCodeValue}`} />
    </s-pos-receipt-block>
  );
};

pos.receipt-header.block.renderTarget

Anchor to transactioncompletewithreprintdataTransactionCompleteWithReprintData

ConnectivityState

ConnectivityStateSeverity

Device

Session

CurrencyCode

Storage

SaleTransactionData

Money

Customer

Discount

LineItem

DiscountAllocation

MoneyV2

SellingPlan

TaxLine

Payment

PaymentMethod

ShippingLine

ReturnTransactionData

ExchangeTransactionData

ReprintReceiptData

OrderLineItem

LineItemRefund

Examples

Receipt Header Block

jsx

pos.receipt-header.block.render
Target