New Dynamic Checkout feature.

Ryan
Shopify Staff
Shopify Staff
497 42 117

Update 18/04/2018: Thanks for all the questions and comments, I will pass them along to the Checkout team!

Hey All,

On April 3rd 2018, we are releasing a new Dynamic Checkout feature.  This feature will be available to all merchants when they upgrade to the latest version of their theme.

Dynamic Checkout adds a liquid filter to the product form tag to render a payment button on the storefront. Once the page loads, a JavaScript library hooks onto the button to show an appropriate branded (ApplePay, PayPal, etc.) or unbranded button to the buyer.

What this means for you:

Dynamic Checkout can conflict with apps that modify the cart.  Here are some app use-cases that may be affected:

  • Any app that uses a third party checkout, such as subscription apps, will not be compatible.

  • Apps that modify the user flow during the checkout, such as currency converters, may not be active on the Dynamic Checkout and can therefore provide an inconsistent shopping experience.

  • Any other non-standard buying flow.

We recommend adding documentation for your apps to inform merchants about this feature, or code defensively around it.

Here is some additional (merchant facing) documentation on Dynamic Checkout:

How to add dynamic checkout buttons to your online store

Updating the product form to support dynamic checkout buttons

Feel free to post comments and concerns in the thread below.

 

Best Regards,

Shopify Checkout Team

Ryan | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 24 (24)
ThomasBorowski
Shopify Expert
795 70 210

If I understand this feature correctly, this enables customers to skip the cart page and go directly to the first checkout page, meaning they would skip any terms and conditions checkbox that might be present on the cart page.

Some themes come with this (optional) feature and EU stores are typically required to get consent or at least clearly inform customers of terms and conditions before the purchase. Since regular, non-Plus stores can't put the terms and conditions info or checkbox in the checkout, it's typically placed on the cart page. If this feature is enabled, the terms and conditions checkbox could be circumvented.

Fortunately, this is an optional feature that needs to be explicitly enabled by the merchant. I would nevertheless suggest adding some info to the help page, preferrably by ammending the section "Compatibility with apps" and maybe calling it "Compatibility with apps and theme settings".

★ Smart Upgrades, Tips and Tutorials for Shopify themes: themepunk.io
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
Lily_Jiang
Shopify Staff (Retired)
Shopify Staff (Retired)
3 0 1

Hey Thomas, thanks for your feedback! Yes, this feature will essentially allow customers to skip the cart to checkout directly via Shopify or an accelerated checkout method. We currently have a "Compatability with apps" section in the help doc and will update it to address other cart functions like the T&C checkbox. 

HunkyBill
Shopify Expert
4738 54 544

How can I render this button and have it work for a specific variant? 

In a theme wanting to use this new feature, when rendering a form of product variants, each variant comes with a special Add to Cart button. 

 

So out of 12 variants, only one is eligible for this new Dynamic Checkout button. Can I render it AND pin it to a variant?

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
HunkyBill
Shopify Expert
4738 54 544

I rendered two forms on a product page with this new feature.. one for the specific variant and one for the rest. The specific variant gets the fancy Buy with Paypal button now.

The new problems are:

  • how can one customize the words on the button? Possible?
  • When going to Paypal, the Dynamic Checkout button fails to tell Paypal what the product is. That sucks! What is the technique to ensure the actual product is described to Paypal for example?

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
phillypro
Shopify Partner
7 0 1

is there any easy way to initialize the shopify dynamic checkout via javascript call?

 

my shopify sites all load pages using ajax

it sucks having to refresh the page to see the dynamic checkout buttons 

i saw the script was coming from 

https://cdn.shopify.com/s/assets/storefront/express_buttons-1b182ec25e6d5098820106a1c2ce58b14672748f...

i looked in there and found 

Shopify.StorefrontExpressButtons.ExpressCheckout.initialize();

tried adding the script into the header of my theme to preload it...and using the initialize call above for after i load the product page...but to no avail.....maybe theres something i overlooked?

Anbu
Shopify Partner
4 0 1

I have implemeted the dynamic checkout option in my shopify portal. 

I am facing below issues:

1. For a product page shows with branded payment buttons and in some browsers and mobile devices the same product page displays unbranded buttons (Buy now) only. You previously informed it depends on the devices & browsers, can we resolve this?

2. Below add to cart button PayPal button & Mor payment options showing. when I click on the other payment options it opens a popup where shows paypal,ApplePay buttons. Is it possible to list other branded payment buttons under the Add to cart button & I don't want the popup in the page?

Thanks.

Matthew_Skala
Excursionist
68 0 14

Some themes come with this (optional) feature and EU stores are typically required to get consent or at least clearly inform customers of terms and conditions before the purchase. Since regular, non-Plus stores can't put the terms and conditions info or checkbox in the checkout, it's typically placed on the cart page. If this feature is enabled, the terms and conditions checkbox could be circumvented.

I'd amplify this.  I think it's really unfortunate that explicit consent to terms and conditions - which is a regulatory requirement for many stores, and will be all the more important post-GDPR - conflicts with the new feature.  Since this checkbox is currently an "unsupported customization," I think it's time for it to become supported.  Introducing a new feature that breaks regulatory compliance for many stores, and only does so because of Shopify's policy decision not to allow editing the checkout page, creates a responsibility for Shopify to resolve the conflict.  And that goes further than just putting a note in the documentation that the new feature "may conflict with apps."

Jordan_L
Trailblazer
218 1 112

Since April 3rd, a large amount of my sales (25%) are now being attributed to  /checkout/contact_information?refresh_count=1

This has completed ruined my ability to track important marketing campaigns for the month of April and Shopify support has not been helpful in finding out why this is happening.

Could this be caused by the result of this change?

 

See screenshot:

Lily_Jiang
Shopify Staff (Retired)
Shopify Staff (Retired)
3 0 1

Hey Anbu, 

1. The button that is shown is highly dependent on the browser + device combination. An unbranded button will be shown if the customer has not previously used an accelerated payment method on that combination.

2. Dynamic Checkout is a personalized experience so it will only show one button on the product page. The "More payment options" popup will currently be a part of the feature to support alternative methods, in a way that adds minimal noise to the product page. 

Hope this helps!

Anbu
Shopify Partner
4 0 1

Hi Lily,

Thanks.

Lily_Jiang
Shopify Staff (Retired)
Shopify Staff (Retired)
3 0 1

Hey Jordan,

This is not caused by Dynamic Checkout. Our team looked into the issue and it's likely caused by an error where you require customers to enter a phone number at checkout, but it's not required in PayPal. If you match the settings it should do the trick: https://help.shopify.com/manual/payments/paypal/require-phone-numbers. 

Hope that solves your issue!

binhnguyen88
New Member
3 0 0

Hi Lily,

My site is loading product page in popup as quick view by ajax. But dynamic checkout buttons are not displayed like i view product page. I think i have to call a re-initialized script like dynamic button on checkout page to display dynamic button in popup. Do you know the script to call after display product in quick view popup ? Thanks!

Justin_W
New Member
8 0 0

This is really exciting! We enabled dynamic checkout buttons on product pages and It looks okay when an accelerated button (PayPal, Apple Pay) displays. But, I was hoping someone would have insight as to how to customize the unbranded "buy now" button. Change the size/color. See screenshot.

NtSpoke
Shopify Partner
5 0 0

Hi Justin, 

I was able to style the button with CSS. My buttons also have <span> inside them so I had to use javascript to add those extra element on page load. 

NtSpoke
Shopify Partner
5 0 0

Hey Lily,

1. The button that is shown is highly dependent on the browser + device combination. An unbranded button will be shown if the customer has not previously used an accelerated payment method on that combination.

So based on this answer, if I release the dynamic checkout buttons then customers will only see the "Buy Now" button at first? The, once they've made the first purchase they will be able to see the 3rd party payment provider buttons such as Paypal? Cheers!

 

Parcel_Intellig
Shopify Partner
83 1 37

Hi all,

this doesn't seem to honor any line item properties set on the form, can this be corrected or is there another way to pass the line item property on the product?

CajunDragon
New Member
8 0 0

Could you post code example? Ty ty!

Juan_Mingo
Tourist
5 0 0

This button doesn't pass the properties inputs I got on my site

Example:
https://www.hashtagbracelets.com/products/pulsera-hashtag-rain-forest

I'm a theme developer, is there any way to fix this?

gnjunior
New Member
5 0 0

I added the code, but I get a transaction error:

"An error occurred while processing your checkout. Please try again." Is this related to Paypal?