Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Selected Payment Method name inside Checkout UI Extension

Selected Payment Method name inside Checkout UI Extension

garyrgilbert
Shopify Partner
432 41 190

Hi All,

 

Is it possible to access the selected payment method name from within a checkout ui extension?  I see the useSelectedPaymentOptions() hook but it only returns the payment method type and handle, and not the name of the payment method.

 

I need to know the name of the payment method that was selected in case there are more than one manual payment methods created, and take specific action based on the name and not the type.

 

Is there a way to accomplish this?

 

@Liam Could I get your input on this please?

 

Cheers,

Gary

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Replies 4 (4)

Liam
Community Manager
3108 344 905

Hi Gary - did you figure this out? If not I'll connect with the checkout team on this. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

garyrgilbert
Shopify Partner
432 41 190

Hi @Liam 

 

Apparently there is no way to get the payment method name (the value that is available in the script editor or functions), the unique handle is also only accessible, as far as I am aware, after you install the extension and I have not found any way that I can allow a merchant to specify which payment method specifically they wish to target since apparently only the payment method type is available, and the handle has no "real' means of associating to the specific payment method.

 

So while it may be possible to know that two manual payment methods are different there is no way to provide a specific message for a specific manual payment method since there is no way of determining which to target since the merchant would only ever know the name.

 

So yeah if you could ask the checkout team about this I would appreciate it.

 

Cheers,

Gary

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

danicanod
Shopify Partner
1 0 0

Hey Gary, I hope this is still relevant.

When you use useSelectedPaymentOptions().handle() you can make the handle visible on the front-end, something like this:

 

 

return (
  <View>
    {method.handle}
  </View>
)

 

 

 

After you've shown this somewhere in your Checkout, you can actually switch payment methods in the Checkout Payment Screen editor and it will show the updated handle, which allows you to copy-paste the individual handle you need.

If this is for multiple stores, it might not be your solution, but if it's for a specific client I did it this way for my own store and it works fine.

garyrgilbert
Shopify Partner
432 41 190

Hi Danicanod,

 

thanks for your comment. Yes I know I can get the handle AFTER I installed the extension, and then I can hard-code the handle into my code.

 

But that really isnt feasible for a public App, or even a custom app with an install link. The Merchant will not be able to specify in an onboarding or setting page which Payment method he wants to target because supplying the name (like for hiding a payment method or re-ordering) wont work because we don't have access to the name, and we can't very well ask the merchant to install the customization, click a setting to show the handle on the checkout, and then please note the handle and then enter it into a text box and then unclick the setting that shows the handle.. I can't see that any merchant Plus or otherwise will think thats anything but an unprofessional hack.

 

Cheers,

Gary

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution