Hiding payment method based on selected shipping method

josephraphael
Tourist
10 0 5

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.

Replies 12 (12)
BradKrane
Shopify Partner
44 4 11

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
Tourist
10 0 5

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

fullyfilmy
New Member
2 0 0

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 pluspayement gateway.png

 

PaulNewton
Shopify Partner
4205 303 898

@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

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Nestasia
Tourist
15 0 2

@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
MCPL
New Member
2 0 0

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
New Member
6 0 0

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

greysiweb
New Member
6 0 0

hi @PaulNewton can you help me pls?

josephraphael
Tourist
10 0 5

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

PaulNewton
Shopify Partner
4205 303 898

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.

 

 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
greysiweb
New Member
6 0 0

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

Ahmed313131
Shopify Partner
1 0 0

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";
}

})();