#417goose_api

1 messages · Page 1 of 1 (latest)

ionic grottoBOT
#

👋 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/1242927078635081728

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

fringe rapids
#

That's not working?

golden smelt
#

Correct, that is not working already doing that

#

I am outputting into the console the new amount before I run the elements.update(amount: xxx); but it doesn't change it

#

Just a visual to show what I am talking about

#

been working on this for days it seems

#

code to update: elements.update({amount:parseInt(amount)});

fringe rapids
#

Hm so you called elements.update prior to clicking the link button?

golden smelt
#

I clear all cookies/cache, add items to cart, click "Pay with Link" it opens window, fill out the email/phone and shipping address when I enter the shipping address it fires off the change to to get the tax amounts and then i call elements.update({amount:parseInt(amount)});

#

it stays the same value (you'll notice the background it changes on the right part of the screen).

#

when I clicked the Pay with Link" button the amount was $18.98, after shipping address changed it adds the tax to 19.64

fringe rapids
#

Interesting. Hmm let me check with a colleague on this

golden smelt
#

Ok thank you

fringe rapids
#

Someone who's a little more familiar with that link flow

#

Will let you know when I hear back

#

Can you share your front end code for this?

golden smelt
#

Front end like the <div id="elements"> code? or the js

fringe rapids
#

Yeah the js for listening to shipping changes and updating amounts

golden smelt
#

ok give me a second

#

const expressCheckoutElement = elements.create(
'expressCheckout', exoptions
)
expressCheckoutElement.mount('#express-checkout-element')
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
}

expressCheckoutElement.on('click', (event) => {
const options = {
shippingAddressRequired: true,
allowedShippingCountries: ['US'],
shippingRates: [
{
id: '<cfoutput>#session.shipping#</cfoutput>',
displayName: 'Shipping',
amount: <cfoutput>#Replace(session.shipamt,".","")#</cfoutput>,
},
]
};
event.resolve(options);
});

#

expressCheckoutElement.on('shippingaddresschange', function(event) {
let resolve = event.resolve;
let address = event.address;
console.log('shipping address');
console.log(address);
console.log(address.postal_code);

let url = "/checkoutajax.cfm?process=getAmounts";
$.post(url, {
  state: address.state,
  country: address.country,
  postalcode: address.postal_code,
  memberid: <cfoutput>#val(session.memberloggedin.memberid)#</cfoutput>,
  taxexempt: <cfoutput>#val(session.taxExempt)#</cfoutput>            
 }).done(function (response) {
    
    $('.ordersummary').load('checkout_ordersummary.cfm');
    data = response;
    console.log('---')
    console.log(data);
    console.log('---')
    console.log('tax ---> ' + response.tax);
    console.log('amt ---> ' + response.amttocharge);
    
    console.log('wt --->' + response.wallettotal);
  let amount = parseInt(response.wallettotal);
  updatePaymentIntent(response.wallettotal,'usd');
  
 });

resolve();

})

#

// Update Payment Intent
function updatePaymentIntent(amount,currency) {

  let mydata = {
      amount: amount,
      currency: currency
  }
  let url = "/checkoutajax.cfm?process=paymentIntentUpdate";
  elements.update({amount:parseInt(amount)});
  $.ajax({
    cache: false,
    type: "POST",
    url: url,
    data: mydata,
    success: function(response){
      console.log(response);
  }
})

}

ionic grottoBOT
fringe rapids
#

Are you creating a Payment Intent up-front and that's why you update a Payment Intent here?

golden smelt
#

Yes sorry

fringe rapids
#

Gotcha thanks

golden smelt
#

let me look at it for a second

#

doesn't elements.update() actually passes the update? So wouldn't this be in addition to elements.update() (basically make the update then fetch the updates).

restive current
#

No. fetchUpdates() is used to get updates from the Payment/Setup Intent that you used when you initialized the Payment Element. The update() method just updates the configuration of the Payment Element itself (e.g. if you wanted to change the Appearance or stop a specific Payment Method type from being shown after render)

golden smelt
#

I am getting an error that it needs the client secrete, but it doesn't show how to pass that in within the documentation. Oddly elements.update() doesn't error but elements.fetchUpdate() does

restive current
#

Are you instantiating the Payment Element with a client secret? In other words, are you creating the Payment/Setup Intent upfront, then passing its' client secret into the Payment Element when you create it?

golden smelt
#

Ok let me backup and read this, maybe I am confusing everything.

restive current
#

Ah, apologies. I sent you the wrong doc. Just a second

#

Technically either of those would work to explain the concept, but the most recent one is catered to the embedded form and is a little simpler to understand

golden smelt
#

What is the "embeded form" ?

restive current
#

Ugh. All these names autocorrect. Just a minute 🤦‍♂️

golden smelt
#

I am probably the the brightest bulb, but this whole process has been difficult

restive current
#

If you look through that you'll see in step 5 how they interact with the client secret from the Payment Intent

golden smelt
#

I have the clientSecret value, just not sure how to put it into the fetchUpdates()

scenic basalt
golden smelt
#

Can you scroll up in the message? I have all the code up there

#

I am creating the PaymentIntent before everything.

#

But I don't have the code posted for that

scenic basalt
#

The first part of the code shared calls your instance of elements, I'm not seeing where that's declared/initialized though.

      'expressCheckout', exoptions
      )```
golden smelt
#

const elements = stripe.elements({
mode: 'payment',
amount: orderAmount,
currency: 'usd',
exappearance,
})

scenic basalt
#

Okay, so this is a deferred intent flow then, and elements.update() should be the right path. Sorry for the confusion, but it caught us off guard to see you manipulating an intent before you got to the submission part of your flow.

golden smelt
#

The "whole" checkout process is two parts, not logged in people are presented with the express checkout, but if they continue on without the express checkout, we get into the whole web elements ui payment intent world.

#

Also, my code may be getting out of whack because I am trying to what I would think is a simple thing, getting information back from the payment link, Google Pay or Amazon Pay

scenic basalt
#

Trying to get information back in real time and make updates accordingly is a bit trickier, but should still be feasible. Do you have a publicly accessible test site where we could take a closer look at your process?

golden smelt
#

This is all local. would doing a Google screen share be an option?

#

I think I need to clean up some of my code as trying a number of different things has caused things to get a little jumbled.

restive current
#

A screenshare isn't going to be super helpful here, since we would need to poke through network requests (of which there are going to be many) and do some internal searching for object IDs, which require copy/paste.

I think next best steps here are to hone in one specific integration path at a time, clean it up so it's as simple as it can be, then try breaking it with one possible solution at a time from there. If you're still blocked after doing that, then spin up a quick publicly accessible test site or a JSFiddle with all the relevant code and we can come through and hopefully be a bit more helpful.

golden smelt
#

Ok, I will reach back out I am going to walk back through

#

thanks

restive current
#

Sure thing. Best of luck!