# pos.receipt-footer.block.render

Renders a custom section within the POS receipt footer
  > Note:
  > This is part of a POS UI Extensions developer preview. More information to come.

```tsx
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}`}</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 textTransactionType = root.createComponent(
    Text,
    {},
    `Transaction type: ${api.transaction.transactionType}`,
  );
  const textTaxTotal = root.createComponent(
    Text,
    {},
    `Total tax: ${api.transaction.taxTotal}`,
  );
  const qrCodeValue =
    api.transaction.transactionType === 'Exchange'
      ? `exampleExchange=${encodeURIComponent(
          api.transaction.exchangeId ?? '',
        )}`
      : `exampleOrder=${encodeURIComponent(api.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);
});

```

## TransactionCompleteData

The data object provided to this extension target.

### TransactionCompleteData

### connectivity

value: `ConnectivityState`


### device

value: `Device`


### locale

value: `string`


### session

value: `Session`


### transaction

value: `| SaleTransactionData
    | ReturnTransactionData
    | ExchangeTransactionData`


### ConnectivityState

### internetConnected

value: `ConnectivityStateSeverity`

Whether the device is connected to the internet

### Device

### deviceId

value: `number`

The ID of the device

### isTablet

value: `boolean`

Whether the device is a tablet

### name

value: `string`

The name of the device

### Session

### currency

value: `CurrencyCode`

The currency code associated with the location currently in on POS.

### locationId

value: `number`

The location ID associated with the POS' current location.

### shopDomain

value: `string`

The shop domain associated with the shop currently logged into POS.

### shopId

value: `number`

The shop ID associated with the shop currently logged into POS.

### staffMemberId

value: `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.

### userId

value: `number`

The user ID associated with the Shopify account currently authenticated on POS.

### SaleTransactionData

### balanceDue

value: `Money`


### customer

value: `Customer`


### discounts

value: `Discount[]`


### draftCheckoutUuid

value: `string`


### grandTotal

value: `Money`


### lineItems

value: `LineItem[]`


### orderId

value: `number`


### paymentMethods

value: `Payment[]`


### shippingLines

value: `ShippingLine[]`


### subtotal

value: `Money`


### taxLines

value: `TaxLine[]`


### taxTotal

value: `Money`


### transactionType

value: `"Sale"`


### Money

### amount

value: `number`


### currency

value: `string`


### Customer

### id

value: `number`


### Discount

### amount

value: `number`


### discountDescription

value: `string`


### type

value: `string`


### LineItem

### attributedUserId

value: `number`


### discounts

value: `Discount[]`


### isGiftCard

value: `boolean`


### price

value: `number`


### productId

value: `number`


### properties

value: `{ [key: string]: string; }`


### quantity

value: `number`


### sku

value: `string`


### taxable

value: `boolean`


### taxLines

value: `TaxLine[]`


### title

value: `string`


### uuid

value: `string`


### variantId

value: `number`


### vendor

value: `string`


### TaxLine

### enabled

value: `boolean`


### price

value: `Money`


### rate

value: `number`


### rateRange

value: `{ min: number; max: number; }`


### title

value: `string`


### uuid

value: `string`


### Payment

### amount

value: `number`


### currency

value: `string`


### type

value: `PaymentMethod`


### ShippingLine

### handle

value: `string`


### price

value: `Money`


### title

value: `string`


### ReturnTransactionData

### balanceDue

value: `Money`


### customer

value: `Customer`


### discounts

value: `Discount[]`


### grandTotal

value: `Money`


### lineItems

value: `LineItem[]`


### orderId

value: `number`


### paymentMethods

value: `Payment[]`


### shippingLines

value: `ShippingLine[]`


### subtotal

value: `Money`


### taxLines

value: `TaxLine[]`


### taxTotal

value: `Money`


### transactionType

value: `"Return"`


### ExchangeTransactionData

### balanceDue

value: `Money`


### customer

value: `Customer`


### discounts

value: `Discount[]`


### exchangeId

value: `number`


### grandTotal

value: `Money`


### lineItemsAdded

value: `LineItem[]`


### lineItemsRemoved

value: `LineItem[]`


### orderId

value: `number`


### paymentMethods

value: `Payment[]`


### shippingLines

value: `ShippingLine[]`


### subtotal

value: `Money`


### taxLines

value: `TaxLine[]`


### taxTotal

value: `Money`


### transactionType

value: `"Exchange"`


## Related

- [POSReceiptBlock](https://shopify.dev/docs/api/pos-ui-extensions/components/posreceiptblock)