Checkout Extensibility | Populate Customer Fields

[jchops]

Is it possible to populate the customers email, first name and last name fields during checkout based on the line item properties? Wondering if we can do this via a custom app but as far as I can tell we cannot manipulate the DOM.

[Liam]

Hi Jchops,

I'm not sure how the line item properties would give you data to pre-fill the checkout fields - can you explain the use case further here?

[jchops]

Hi Liam,

Customers fill out this information when adding certain items to their cart.

Best,

Jared

[Liam]

Hi again Jared,

Would the Cart Transform API help with achieving this effect?

[jchops]

Hm, not sure how that would allow us to populate the email, first name and last name of the customers information in checkout?

[Liam · Accepted solution]

Sorry - yes you're right this only allows you to edit the line items. It looks like the only way to prefill is to pass parameters via a checkout link, but you won't know the parameters until customers perform an action on the storefront. 

[jchops]

Oh! Actually this may work (well a slight variation of it), thank you!

[oContis_Studio]

Hi @Liam as of now, is this still the best way of prefilling checkout inputs? 
I find it strange that this is nowhere documented, officially. 

Also when i do it on my side, it seems to work on the first checkout load, however, if customer goes back to storefront and then back to checkout, the prefills are gone. 

Mind in my case, i am appending the url params by hijacking the submit event on the cart page. So basically i look for a local storage item and if it is there, i listen for the submit event from cart to hijack the redirect and add the url params. This seems to work but only on the first try. 

My assumption is that shopify's checkout session details preceed the url params, could that be right?

Is there anything planned to support this in the future? 

We have a very simple scenario where customers go through a quiz which saves some data to localStorage and we would like to pass that info to the checkout inputs so they don't have to do it again on checkout. 

Let me know what you think. 

Kind regards

[jamalali81]

Did you manage to solve this?

I am trying to dynamically update the shipping address zip code. I have tried this but nothing seems to be happening:

await api.applyShippingAddressChange({
  type: 'updateShippingAddress',
  address: {
    zip: state.deliveryArea[1]
  }
});

Any help would be much appreciated!

[Liam]

Hi Jamalali81,

Currently the method where you pass parameters via a checkout link is the only way to pre-fill fields.