Extra card icons and HTML elements in description text for payment gateways.

[AaronBowie]

Hi all.

We have been adding “basic” support for the new checkout block for our gateway plugins, but there are a few things I can't work out, and I have spent a few days going through the GitHub repo and issues. Sadly, I have unable to find some solutions for these issues we are having.

I've attached a screenshot of how our plugins work in the normal checkout option.

First issue, showing multiple card icons, the merchant is able to select which card icons are shown in the settings page. Right now, we only seem to be able to add one image next to the gateway name.

Second issue, we are unable to enter in HTML in the gateway description. For us, we use this to display some information while in test mode, so the merchants can find a test card to use and also a quick link to the docs. We have seen, in the past, merchants also editing the description text using HTML tags.

For now, we have stripped HTML from the description, and have an icon with multiple cards, but I know that our customers will be asking for the above once we get more using the new checkout blocks.

[senadir]

Both the payment method title and content area react nodes, have you attempted to add your render logic there? when you call registerPaymentMethod?

[AaronBowie]

Hi @senadir,

Many thanks for the quick reply.

React is not something we are strong with, so we are trying to pick this up quickly.

[senadir]

Unfortunately, your use case is something to be served with React, this is how your code will probably look like:

const settings = getSetting( 'yourpaymentname_data', {} );

/**
 * Content component
 */
const Content = () => {
	const isTestMode = settings.testMode;
	return (
		<p>
			{ decodeEntities( settings.description ) }
			{ isTestMode &&
				"You're in test mode, you can add extra informations here" }
		</p>
	);
};

const Label = () => {
	const cardIcons = settings.cardIcons;
	return (
		<div className="my-payment-method-title-wrapper">
			<span className="my-payment-method-title">Plugin Name</span>
			{ cardIcons.map( ( icon ) => (
				<img src={ icon.src } alt={ decodeEntities( icon.title ) } />
			) ) }
		</div>
	);
};
const paypalPaymentMethod = {
	name: PAYMENT_METHOD_NAME,
	label: <Label />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: decodeEntities( settings.title ),
	supports: {
		features: settings.supports ?? [],
	},
};

registerPaymentMethod( paypalPaymentMethod );

In your get_payment_method_data function, you can register an array of icons and their titles, and a boolean for test mode.

If you don't have a JSX/React build process, you can use this directly (it's already transformed):

const settings = getSetting('yourpaymentname_data', {});

/**
 * Content component
 */
const Content = () => {
  const isTestMode = settings.testMode;
  return createElement("p", null, decodeEntities(settings.description), isTestMode && "You're in test mode, you can add extra informations here");
};
const Label = () => {
  const cardIcons = settings.cardIcons;
  return createElement("div", {
    className: "my-payment-method-title-wrapper"
  }, createElement("span", {
    className: "my-payment-method-title"
  }, "Plugin Name"), cardIcons.map(icon => createElement("img", {
    src: icon.src,
    alt: decodeEntities(icon.title)
  })));
};
const paypalPaymentMethod = {
  name: PAYMENT_METHOD_NAME,
  label: createElement(Label, null),
  content: createElement(Content, null),
  edit: createElement(Content, null),
  canMakePayment: () => true,
  ariaLabel: decodeEntities(settings.title),
};
registerPaymentMethod(paypalPaymentMethod);

You can transform code here directly if you want.

[AaronBowie]

Many thanks @senadir, that was super helpful!