Hiding payment method based on selected shipping method

[josephraphael]

Hello,

I would like to use Shopify script API in order to hide a certain payment method based on the user's selection of the shipping method.

I would apperciaite any help.

[BradKrane]

From the API doc it doesn't appear possible as there is no indication in the Cart object of the selected shipping method and the Payment scripts only doesn't add any reference to shipping.

[josephraphael]

@BradKrane I was able to do it through liquid and some javascript, it's pretty stable and working fine.

[fullyfilmy]

how to if they select paid order redirect directly to razor payment gateway or they select COD comeplete the order 

or maybe how o hide the payment gateway according to shippment selection

Ps i have shopify plus

[PaulNewton]

@fullyfilmy a customers chosen shipping_rates ,or cart attributes are accessible in payment scripts so you would need to use javascript in checkout.liquid to hide/show payment methods

https://shopify.dev/docs/themes/liquid/reference/objects/checkout#checkout-shipping_method

https://shopify.dev/tutorials/develop-theme-layouts-best-practices

[Nestasia]

@PA I am trying to input the below in my checkout.liquid template - would you be able to help point out where I am getting this wrong ?

Input.shipping_method.each do |shipping_method|

            next unless shipping_method.title == "Prepaid Payment"

                     Output.payment_gateways = Input.payment_gateways.delete_if do |payment_gateway|

                     payment_gateway.name == "COD - Cash on Delivery"

             end

end

[greysiweb]

hi @PaulNewton can you help me pls?

[PaulNewton]

My previous response had a typo and I cannot edit it now:

a customers chosen shipping_rates ,or cart attributes are accessible in payment

that should be "are NOT accessible" for that information

@greysiweb There's no direct method for message passing between the different types of checkout-scripts(line items, shipping, payments).

So payments doesn't know what shipping method is selected in an obvious way.

The primary route is by modifying checkout.liquid using javascript to hide payment methods.

Always make sure to roll out such a change in increments and with monitoring.

If this is a business complication you should let the MSM for that Plus store know some sort of state-mgmt or message passing between script types is needed so merchants can avoid having to modify checkout.liquid 

Otherwise alternatives gets into advanced work arounds using OTHER information as a message passing system such as customer tags , discount amounts(not sure if shipping discounts can be used for this), trying to use things like utility products but that would often mean modifying checkout.liquid anyway so it's moot for something like this I think.

[MCPL]

could you please share the steps as how did you do it? We are trying to the same for our store but no luck. Thanks in advance.

[greysiweb]

Hello can you pls help me on how you did it? @josephraphael 

[josephraphael]

You require to have ShopifyPlus so that you can access the "checkout.liquid" file.

[greysiweb]

Hello! I am in Shopify plus and have Script editor app. Please help!

[Onlydream]

Can you say how?

[Ahmed313131]

you can do it in javascript by targeting the index of class 

(function() {

var sourceEl = document.getElementsByClassName('review-block__content')[1];;

if (sourceEl.textContent.includes('Pick up'))
{
document.getElementsByClassName('radio-wrapper content-box__row')[2].style.display = "none";
}

})();

[AlexHeard]

You really shouldn't use Script API to hide payment methods. There are more modern Function API is offered by Shopify now. If custom coding is expensive for you, you can utilize PayRules: Hide Payment Methods app to hide payment methods at Shopify checkout page.

Here is a screenshot where Cash on Delivery payment method will be hidden at checkout if Standard shipping method is selected.