The navigator.clipboard.writeText() doesn't work in POS UI Extension

Extensions
1

Hi, I want to use navigator.clipboard.writeText() but POS UI extension doesn’t allow it, I want my users can copy information faster.

This is my code

import React from 'react';
import {
  reactExtension,
  Navigator,
  Screen,
  Button,
} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText('Text copy test');
      console.log('Copied to clipboard!');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  };

  return (
    <Navigator>
      <Screen name="ScreenOne" title="Screen One Title">
        <Button
          title="Navigate to Cart"
          onPress={() => {
            handleCopy()
          }}
        />
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.home.modal.render', () => (
  <Modal />
));
2

Hey again @Fernando_Gutierrez :waving_hand: - I know we offer clipboard functionality for other UI extensions like Checkout UI Extensions for example:

Taking a look at our docs it doesn’t appear that we support this functionality, but I’ll do some more digging on my end to confirm things and loop back with you here :slight_smile:

3

@Fernando_Gutierrez :waving_hand: - just confirming this is a limitation, but we are looking at ways we can implement clipboard functionality into POS UI extensions. I can’t confirm when this would be rolled out, but we do have this on our radar.

Hope this helps and thanks for flagging this - let me know if I can help out further as always!

4

@Alan_G if not this, at least ASAP the ability to pass a gift card to checkout please!! :slight_smile:

Not being able to easily copy + not being able to pass a gift card to checkout make life super hard for a lot of common app use cases (loyalty being the most common example, but also integrating third party gift card networks like GiveX, etc.)

5

Thanks for the feedback as well here @mdriess - still can’t guarantee what an implementation would look like or when it would be rolled out, but I’ve passed your thoughts/ideas on to our team as well, appreciate you reaching out on this too!

1 Like