Checkout Extension - Identify if customer is using express checkout or Paypal payment method

[Vieweg]

I have an extension that should show a warning to the customer if they are using express checkout, so that they can check if the delivery address that was automatically filled in is correct. (Using the express buttons at the top of the checkout)


However I do not want to display this message if the customer has filled in the address and selected PayPal as the payment method (option just below the credit card)

However, I'm having difficulty detecting the difference as both options are considered Wallet.
I'm using `useSelectedPaymentOptions`, it returns type = `wallet` for both.

Follow a example of my code

import {
  MORE_IMPORTS...,
	reactExtension,
	useSelectedPaymentOptions,
} from "@shopify/ui-extensions-react/checkout";

reactExtension("purchase.checkout.actions.render-before", async () => <Extension />);

export default function Extension() {
	const [expressPayment, setExpressPayment] = useState(false);
  const paymentOptions = useSelectedPaymentOptions();

  //check for express payments
	useEffect(() => {
		if (paymentOptions.some((option) => option.type === "wallet")) {
			setExpressPayment(true);
		} else {
			setExpressPayment(false);
		}
	}, [paymentOptions]);

  return expressPayment && <>RENDER SOMETHING</>
}

Note: we are on Shopify Plus 

Thank you in advance!

Vieweg

[Liam]

Hi Vieweg,

Could you try querying the checkout to get the payment methods used in a checkout session? It should look something like this:

query GetCheckoutPaymentMethods($checkoutId: ID!) {
  checkout(id: $checkoutId) {
    paymentMethods {
      name
      id
    }
  }
}

[Vieweg]

Hi Liam, really appreciate that.

I couldn't find this query in the docs, but I'm wondering that would it only be available after the customers finished their checkout ? in that case it's not exactly what I'm looking, I'm trying to detect the use of express payment before finished checkout.

anyway will give it a try 🙂

thank you!

[Vieweg]

Running it with useApi query (extensions UI), doesn't work as expected 

import {
...
reactExtension,
useApi,
...
} from "@shopify/ui-extensions-react/checkout";

reactExtension("purchase.checkout.actions.render-before", async () => <Extension />);

export default function Extension() {
const { query, checkoutToken } = useApi();

useEffect(() => {
const ql = `query GetCheckoutPaymentMethods($checkoutId: ID!) {
checkout(id: $checkoutId) {
paymentMethods {
name
id
}
}
}`;

query(ql,{variables: {checkoutId: checkoutToken}})
.then((data ) => console.log(data))
.catch(console.error);
...
}, []);
}

returns error

"errors": [
{
"message": "Field 'checkout' doesn't exist on type 'QueryRoot'",
"locations": [{"line": 2,"column": 4}],
"path": ["query GetCheckoutPaymentMethods","checkout"],
"extensions": {
"code": "undefinedField",
"typeName": "QueryRoot",
"fieldName": "checkout"
}
...
}