Choose a version:

pos.receipt-footer.block.render
Target

Renders a custom section within the POS receipt footer

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

TransactionCompleteWithReprintData

connectivity
```
ConnectivityState
```
device
```
Device
```
locale
```
string
```
session
```
Session
```
storage
```
Storage
```

transaction

| SaleTransactionData
    | ReturnTransactionData
    | ExchangeTransactionData
    | ReprintReceiptData

export interface TransactionCompleteWithReprintData extends BaseData, BaseApi {
  transaction:
    | SaleTransactionData
    | ReturnTransactionData
    | ExchangeTransactionData
    | ReprintReceiptData;
}

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
```
discounts
```
Discount[]
```
isGiftCard
```
boolean
```
price
```
number
```
productId
```
number
```
properties
```
{ [key: string]: string; }
```
quantity
```
number
```
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[];
  taxable: boolean;
  taxLines: TaxLine[];
  sku?: string;
  vendor?: string;
  properties: {[key: string]: string};
  isGiftCard: boolean;
  attributedUserId?: 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[]
```
returnId
```
number
```
shippingLines
```
ShippingLine[]
```
subtotal
```
Money
```
taxLines
```
TaxLine[]
```
taxTotal
```
Money
```
transactionType
```
"Return"
```

export interface ReturnTransactionData extends BaseTransactionComplete {
  transactionType: 'Return';
  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[]
```
shippingLines
```
ShippingLine[]
```
subtotal
```
Money
```
taxLines
```
TaxLine[]
```
taxTotal
```
Money
```
transactionType
```
"Exchange"
```

export interface ExchangeTransactionData extends BaseTransactionComplete {
  transactionType: 'Exchange';
  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
```
discounts
```
Discount[]
```
isGiftCard
```
boolean
```
price
```
number
```
productId
```
number
```
properties
```
{ [key: string]: string; }
```
quantity
```
number
```
refunds
```
LineItemRefund[]
```
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?

Block

import React from 'react';

import {

reactExtension,

useApi,

POSReceiptBlock,

QRCode,

Text,

} from '@shopify/ui-extensions-react/point-of-sale';

const Block = () => {

const {transaction} = useApi<'pos.receipt-footer.block.render'>();

const qrCodeValue =

transaction.transactionType === 'Exchange'

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

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

return (

<Text>{`Transaction type: ${transaction.transactionType}`}</Text>

<Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>

</POSReceiptBlock>

);

};

export default reactExtension('pos.receipt-footer.block.render', () => (

));

examples

Block

React

import React from 'react';

import {
  reactExtension,
  useApi,
  POSReceiptBlock,
  QRCode,
  Text,
} from '@shopify/ui-extensions-react/point-of-sale';

const Block = () => {
  const {transaction} = useApi<'pos.receipt-footer.block.render'>();
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  return (
    <POSReceiptBlock>
      <Text>{`Transaction type: ${transaction.transactionType}`}</Text>
      <Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>
      <QRCode value={`https://www.shopify.com?${qrCodeValue}`} />
    </POSReceiptBlock>
  );
};

export default reactExtension('pos.receipt-footer.block.render', () => (
  <Block />
));

TS

import {
  extension,
  POSReceiptBlock,
  QRCode,
  Text,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.receipt-footer.block.render', (root, api) => {
  const block = root.createComponent(POSReceiptBlock);
  const transaction = api.transaction;
  const textTransactionType = root.createComponent(
    Text,
    {},
    `Transaction type: ${transaction.transactionType}`,
  );
  const textTaxTotal = root.createComponent(
    Text,
    {},
    `Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`,
  );
  const qrCodeValue =
    transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;

  const qrCode = root.createComponent(QRCode, {
    value: `https://www.shopify.com?${qrCodeValue}`,
  });

  block.append(textTransactionType);
  block.append(textTaxTotal);
  block.append(qrCode);
  root.append(block);
});

Anchor to relatedRelated

ComponentPOSReceiptBlock

pos.receipt-footer.block.renderTarget

Anchor to transactioncompletewithreprintdataTransactionCompleteWithReprintData

TransactionCompleteWithReprintData

ConnectivityState

ConnectivityStateSeverity

Device

Session

CurrencyCode

Storage

SaleTransactionData

Money

Customer

Discount

LineItem

TaxLine

Payment

PaymentMethod

ShippingLine

ReturnTransactionData

ExchangeTransactionData

ReprintReceiptData

OrderLineItem

LineItemRefund

examples

Block

React

TS

Anchor to relatedRelated

pos.receipt-footer.block.render
Target