Choose a version:

pos.exchange.post.block.render
Target

Renders a custom section within the native post exchange screen

Note

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

Was this section helpful?

Block

import React from 'react';

import {

POSBlock,

POSBlockRow,

Text,

reactExtension,

useApi,

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

const ExchangeBlock = () => {

const api = useApi<'pos.exchange.post.block.render'>();

return (

<POSBlock

action={{

title: 'View exchange details',

onPress: api.action.presentModal,

}}

>

<Text>{'Exchange block extension'}</Text>

<Text>{`Order ID: ${api.order.id}`}</Text>

</POSBlockRow>

</POSBlock>

);

};

export default reactExtension('pos.exchange.post.block.render', () => (

));