How can we display different payment icons in the checkout page depending on the customer's country?

How can we display different payment icons in the checkout page depending on the customer's country?

Skrill
Shopify Partner
16 1 4

Hi,

 

We have developed an app with an offsite payment provider, meaning the customers will be taken to an "offsite" payment page and make payments there. This payment page will display available payment methods according to the customer's country. For example, German customers will only see credit cards and Sofort, while Indonesian customers will only see Dana and LinkAja, and so on and so forth.

 

Skrill_0-1694102651312.png

 

Our payment page supports many payment methods for various countries, that's why we select all payment icons that are usable on the app extension configuration.

Skrill_1-1694102816285.png

With this setup, on the admin page, merchants who have installed our app are able to select the payment icons to show on the checkout page.

Skrill_2-1694102910960.png

Now the problem is that this makes the checkout page show these selected payment icons even though some of them are NOT supported by our payment page for German customers.

Skrill_3-1694103099958.png

This could give the wrong impression that Skrill supports those payment methods in Germany, but actually, Skrill doesn't. This is inconsistent with the payment methods displayed on the payment page.

The question we want to ask is, is there a way for us to dynamically the payment icons depending on the customer's country? Example:

Skrill_4-1694103466182.png

(This is just a sample, not an actual implementation)

 

You can see in our dummy design since the customer is from Germany, we want to only show 8 icons even though we have selected more than 8 icons in the app extension configuration above.

Can someone give us an idea of whether this is possible to do? If yes, can you point us in the right direction? (docs, sample code, etc)

 

 

 

Replies 3 (3)

SBD_
Shopify Staff
1831 273 419

Hey @Skrill 

 

Dynamically modifying the icons isn't possible but perhaps you could use Checkout UI extensions to display accepted methods (based on country) instead?

Scott | Developer Advocate @ Shopify 

Skrill
Shopify Partner
16 1 4

Hi @SBD_ 

Just checking if "Dynamically modifying the icons" is still not possible or is it supported now?

patric1
Shopify Partner
1 0 0

Hi, I have the exact same Issue, and are also interested if "Dynamically modifying the icons" is supported now, or if there is any recommend workaround we can do until that is supported?