Price of lineItem changes once in cart: displays faulty presentment price at checkout

[darwinshameran]

Bug details

Describe the bug
Using the SDK on a multi-currency store, the price of the item seems to get distorted once you add a lineItem. To clarify, the price of the product itself is correct, however adding it to the checkout cart will either add or subtract X amount of monies from the cart. For example, adding an item that has the price of $32 set on it, will appear as $37 in the cart. The product price remains unchanged, only cart presentment price is changed. This only happens to non-default currencies.

To Reproduce
Steps to reproduce the behaviour:

1. Have a store with multiple currencies enabled.
2. Add item to cart
3. Check presentment price displayed in cart

Expected behavior
The price of the cart should be consistent with one of lineItem.

Environment (please complete the following information):

• OS: MacOS Big Sur
• Browser: Chrome
• SDK Version: 2.11.0

Additional context
Other reported bug instances: https://community.shopify.com/c/storefront-api-and-sdks/presentment-prices-don-t-match/td-p/1077596

Bug Report Checklist

• I have read and agree to the CODE_OF_CONDUCT.md
• I have read the CONTRIBUTING.md guidelines.
• I have provided a detailed description of the bug, including code samples, and/or network data.
• I have provided information about my development environment, including SDK version.

[pwamenear]

+1

We're also experiencing this issue on a custom storefront with multiple currencies implemented via JS Buy SDK. Storefront currency = USD, presentment currencies = HKD, INR, IDR, JPY, MYR, PHP, SGD, KRW, TWD, THB, VND, AUD, NZD.

The problem is not browser-specific, we've reproduced the errant behaviour on Chrome 80+ / Firefox 80+ / Safari 13+ / Edge. In our case, the line item price shown in checkout also does not respect the currency-specific line item price that we've set via CSV upload in the admin (we're using fixed prices by currency, not forex + rounding).

Shopify Plus installation.

[moreguppy]

+1

I'm also encountering this issue using presentment prices.

I did discover the price is correct once the shipping address country is updated to match the selected currency...

[pwamenear]

+1

I'm also encountering this issue using presentment prices.

I did discover the price is correct once the shipping address country is updated to match the selected currency...

This is a workaround we found which works, and is in production on our eight storefronts. We grab the country code from the response headers (Google Cloud) to prepopulate country :

_It's not documented on the JS Buy SDK, but it's possible to pass arguments supported by the Storefront API to the JS Buy SDK as well. Here, the important one is passing buyerIdentity.countryCode to the input argument of CheckoutResource.create. That'll set the customer's initial currency during checkout according to the country specified. This currency might change later based on how the customer fills our their address or other information. Also, it's worth mentioning that you should omit presentmentCurrencyCode when using buyerIdentity.countryCode with input despite the JS Buy SDK documentation. Presentment currencies were deprecated as of July 2021, and it seems like the JS Buy SDK documentation is outdated.

This tutorial's helpful: https://shopify.dev/custom-storefronts/products/international-pricing#create-a-checkout._

[moreguppy]

@pwamenear thank you so much 🙏

[birksy89]

@pwamenear / @moreguppy

We're also struggling with something similar - Is it possible for you to provide some code examples?

We've got a site which switches between currencies in a headless/Gatsby setup - We currently use this methodology:

const newCheckout = await client.checkout.create({
        presentmentCurrencyCode: currency.code, // "USD" / "GBP"
      })

This created a webURL which shows the correct currency on the shopify hosted checkout page.

But when querying the checkout to populate our own "cart", we don't have the prices in the correct currency.

[moreguppy]

@birksy89 sure thing:

const newCheckout = await client.checkout.create({
  buyerIdentity: {
    countryCode: "US"
  }
})

It doesn't use the currency code, but the country code — so in this case you would need "US" or "GB"

[jamesrice96]

Hey @moreguppy

Thanks for the reply, I'm working with @birksy89 on this 🙂

This seems like a better way of doing it, because I know they are deprecating presentment prices/currency.

However, this doesn't solve the original problem we are encountering.

I appreciate it's not clear from what @birksy89 was saying before, but we are attempting to retrieve the line items stored in the checkout.

The prices in the checkout are correct based on the currency/buyer identity, but they don't seem to update on the line items we are pulling to our cart.

const newCheckout = await client.checkout.create({ buyerIdentity: { countryCode: "GB" } })

Was this something you were experiencing?

[moreguppy]

@jamesrice96 I believe the checkout.lineItems object only includes the presentment price that is assigned to the cart when it is initialised...

So basically when the user changes currency you have to reinitialise the checkout

[jamesrice96]

Thanks for taking the time to reply, really appreciate it.

We do currently destroy and reinitialise the checkout when the user switches their currency.

It's strange because this does update the totalPriceV2 to reflect the customers currency code / buyer identity.

However, when we look at the line items, they retain the default currency info.

Found this on the shopify docs and looks promising but when you view the response nothing is returned for the line items in their example.

https://shopify.dev/custom-storefronts/products/international-pricing#create-a-checkout

[moreguppy]

@jamesrice96 no worries!

Does that presentmentPrices object above not include the prices?

In any case I ended up mapping products to the line items — by literally fetching all the products/variants and matching the variant ids — not the most elegant solution but I wanted to get other product content which wasn't available on the line items.

[birksy89]

@moreguppy sadly not - It shows the first 20 of all the possible prices (100s). We did something similar before, but it feels too hacky.

I think there's some bug in play, as the documentation clearly shows what should be happening on this link
https://shopify.dev/custom-storefronts/products/international-pricing#create-a-checkout

Yet it's counter to at least what we're getting :(

Thanks so much for taking the time, if you think of anything else we'd love to hear it!

Our next steps are going to be to write our own query, probably for a "cart" rather than a "checkout" and try and see if we can get to the data outside of using "shopify-buy" SDK.

We'll see what we get when querying raw GraphQL... Wish us luck!

[birksy89]

So I managed to work out what is causing this issue, and it's down the the js-buy-sdk not using the @inContext GraphQL directive

Shopify Buy "Create Checkout" Mutation

Direct Mutation without @inContext

Direct Mutation with @inContext

Solution

At the moment we're not going to show the line items in the customers currency - Just the total.

If we move away from Shopify-buy, and write the queries ourselves, we'll include this directive.

Hopefully shopify will update the query to include the same value as the buyerIdentity - countryCode and then everything we've already set up will just work