Hiding payment method based on selected shipping method

josephraphael
Shopify Partner
12 0 11

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 14 (14)

BradKrane
Shopify Partner
44 4 10

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
Shopify Partner
12 0 11

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

fullyfilmy
Visitor
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
6275 574 1326

@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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Nestasia
Excursionist
15 0 4

@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
Tourist
6 0 1

hi @PaulNewton can you help me pls?

PaulNewton
Shopify Partner
6275 574 1326

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.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


MCPL
Visitor
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
Tourist
6 0 1

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

josephraphael
Shopify Partner
12 0 11

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

greysiweb
Tourist
6 0 1

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

Onlydream
New Member
6 0 0

Can you say how?

 

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

})();

ArrayArtisan
Tourist
51 0 2

For your requirement to hide a certain payment method based on the user's selection of a shipping method, using Shopify's newer Functions API is a more modern and effective approach in 2024. This API allows for more granular control over the checkout process, including dynamically changing payment methods based on shipping choices.

 

Additionally, the KlinKode PayRules app can be a great solution for achieving this without delving deep into custom coding. It allows you to set up conditions that hide or show specific payment methods based on various criteria, including the chosen shipping method.

 

Get the KlinKode PayRules app here: https://apps.shopify.com/klinkode-payrules

 

A quick guide:

 

- Control payment methods visibility at checkout by KlinKode PayRules app.
- You can join in our Facebook group for Shopify help.