Trying to get POS UI Extension to work with Custom Payment Types

Extensions
1

Hello, I’ve created two custom payments and I’m trying to write a POS UI extension that forces the cashier to input the card numbers of those payment types before allowing the transaction to be completed. I just keep getting the “app failed to load” message where there’s supposed to be a text field. That text would then be added to the Notes field. Here’s the code from the index.js file if anyone might be able to help. I’m NOT a developer by trade, but this is what my company has tasked me with today. Thanks.

import {
extend,
TextField,
Button,
Banner,
Stack,
} from ‘@shopify/ui-extensions/point-of-sale’;

extend(‘pos.purchase.post.block.render’, (root, {order, applyNoteChange, buyerJourney}) => {
let inputValue = ‘’;
let saved = false;

const needsPrompt = order?.payments?.some(
(p) => [‘Husky Card’, ‘Merchandise Voucher’].includes(p.paymentMethod?.name)
);

if (!needsPrompt) return;

buyerJourney.intercept(({canBlockProgress}) => {
if (!saved && canBlockProgress) {
return {
behavior: ‘block’,
reason: ‘You must enter the Husky Card / Voucher number before continuing.’,
};
}
return {behavior: ‘allow’};
});

const container = root.createComponent(Stack, {
spacing: ‘base’,
// POS Stack supports arrangement; default is vertical if not specified
});

const textField = root.createComponent(TextField, {
label: ‘Enter Husky Card / Voucher Number’,
value: inputValue,
onChange: (val) => {
inputValue = val;
saved = false;
updateBanners();
},
});

const button = root.createComponent(
Button,
{
kind: ‘primary’,
onPress: () => {
if (!inputValue.trim()) {
saved = false;
updateBanners();
return;
}

    const label = order.payments.find((p) =>
      ['Husky Card', 'Merchandise Voucher'].includes(p.paymentMethod?.name)
    )?.paymentMethod?.name;

    const existingNote = order.note || '';
    const newEntry = `${label} #: ${inputValue}`;

    const updatedNote = existingNote.includes(newEntry)
      ? existingNote
      : existingNote
      ? `${existingNote}\n${newEntry}`
      : newEntry;

    applyNoteChange(updatedNote);
    saved = true;
    updateBanners();
  },
},
'Save to Order Note'

);

let banner = null;
function updateBanners() {
if (banner) container.removeChild(banner);
banner = root.createComponent(
Banner,
{status: saved ? ‘success’ : ‘critical’},
saved
? ‘Number saved to order note.’
: ‘You must enter the card/voucher number before continuing.’
);
container.appendChild(banner);
}

container.appendChild(textField);
container.appendChild(button);
updateBanners();

root.appendChild(container);
});

2

Hey,
This extension will only render after the purchase has been completed, which I don’t think is what you want?
As you aren’t able to add an extension to the checkout screen in POS, this is the closest extendable location however.

Also I don’t believe capturing card numbers and saving them to notes is very PCI compliant, depending on the type of card.

It’s likely an syntax error or import error in your code is causing your error, you should be able to find it by following the debug steps here Debugging