michael_ece

[mint axle]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1219706226078650459

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[autumn forum]

Hello! Can you share what your code look like?

[feral turtle]

// When printful merch product is in the cart, this event gets triggered when the customer selects a new address
expressCheckoutElement.on('shippingaddresschange', async function(event) {
const { resolve, address } = event;
// handle shippingaddresschange event
console.log('shippingaddresschange: event', event)
console.log('shippingaddresschange: address', address)

    if (cartHasPrintfulMerchProducts()) {
      // Use production venue address for estimateMerch as we do not have the customer shipping address at this point in the flow
      const shippingAddress = {
        address1: 'Test',
        address2: '',
        city: address?.city,
        state_code: address?.state,
        zip: address?.postal_code,
      }
      try {
        await estimateMerch(rootState.organizationId, shippingAddress)

        console.log('shippingaddresschange: cartState.orderCalculations.credit.total', cartState.orderCalculations.credit.total)

        // Trigger the shipping rate update by calling the resolve function with the updated rates
        resolve({
          shippingRates: [{
            id: '1',
            amount: cartState.merch.rate * 100 + cartState.merch.sales_tax * 100,
            displayName: 'Shipping'
          }],
        });

        // if (this.elements) {
        //   this.elements.update({ amount: cartState.orderCalculations.credit.total })
        // }
      } catch (error) {
        console.log('shippingaddresschange: error', error)
      }
    } else {
      resolve();
    }
  });

[autumn forum]

Is there a reason you're calling elements.update after you're call to resolve? What happens if you move it earlier?

[feral turtle]

it doesnt work earlier

thats where i had it initially

i get elements is undefined

no matter where i put it

[autumn forum]

Ah, can you share the exact error message you're getting?

[feral turtle]

ok, 2mins

shippingaddresschange: error TypeError: Cannot read properties of undefined (reading 'elements')
at stripe-express-checkout-element.tsx:111:47

[autumn forum]

Where are you defining elements and expressCheckoutElement?

[feral turtle]

at the top of the initStripe function. it works in this 'click' function so i dont see why it wouldnt work from the shippingaddresschange function

// Configure options to require email, phone and billing
expressCheckoutElement.on('click', (event) => {
// Update amount e.g., if donation or promo code has been added
this.elements.update({ amount: cartState.orderCalculations.credit.total })

    const options = {
      emailRequired: true,
      phoneNumberRequired: true,
      billingAddressRequired: true,
      shippingAddressRequired: cartHasPrintfulMerchProducts() ? true : false,
      shippingRates: cartHasPrintfulMerchProducts() ? [{
        id: '1',
        amount: cartState.merch.rate * 100 + cartState.merch.sales_tax * 100,
        displayName: 'Estimated Shipping'
      }] : null
    };

    event.resolve(options);

    trackMixpanelEvent("Button Clicked", { 
      "Button Name": "Express Checkout",
      "Page Name": AppRouter.path
    });
  });

[mint axle]

michael_ece

[feral turtle]

nvm, figured it out.

the issue was related to the scope of this within the expressCheckoutElement.on('shippingaddresschange', async function(event) { ... }) event handler. Arrow functions (() => {}) maintain the context of this from the surrounding code, while regular functions (function(event) { ... }) have their own this context.

[autumn forum]

ah! Nice catch!

[feral turtle]

chatgpt to the rescue lol