Integrating your Payment Method with Cart and Checkout Blocks

Since we released the first iteration of the Cart and Checkout blocks to users of the WooCommerce blocks feature plugin last year, one of the most common requests we’ve received from stores that are trying out this new checkout flow is to support the payment method they are using. Over time, the WooCommerce team has added integrations for:

Currently there are also integrations being worked on for other WooCommerce owned payment method extensions.

Over the past year with the work we’ve done building integrations for our own extensions we’ve validated the payment method integration API for the blocks and are ready to more formally announce it to the WooCommerce developer community as production ready.

To help payment method developers integrate with the blocks, we’ve created some documentation that give details on both the client side (JS) and server side (PHP) components of the integration. In most cases, you should be able re-use some of your server side code that integrates with the existing shortcode based checkout flow, but it’s highly likely you’ll have additional work to do for your client side payment method code.

Why is integrating your payment method a good idea?

Alongside seeing increasing numbers of users try out the Cart and Checkout blocks and the requests we’ve seen for support, we’re also observing early indicators that the blocks have better conversion rates than the existing shortcode flows.

Although we’re not yet ready yet to put a date on when the blocks will become the default experience in WooCommerce core, we do encourage WooCommerce payment method developers to start integrating their payment methods now as this will help us continue to validate and improve the APIs as usage of the new checkout flow increases.

We’re also exploring some ways of surfacing payment methods that support the Cart and Checkout blocks more broadly in the marketplace beyond appearing in this list. We’d also love to be able to tell merchants enquiring of the new flows that, “Yes, your payment method is supported!”

Is there any help available?

If you are actively working to integrate a payment method and are experiencing some difficulty with your integration, please do reach out and create an issue in the WooCommerce Blocks repository. While our team won’t be able to build any integration for you, we are open to help resolve any issues or questions you may have with using the integration API and/or surfacing additional checkout/cart data that you may need for your payment method.

What about other extensions integrating with the blocks?

We’re still building out more interfaces so other WooCommerce extensions can integrate with the blocks but we’re not quite there yet. Similar to what we did and are doing with our own payment method integrations – we’re validating what we’re building with our own extensions (such as WooCommerce Subscriptions, and WooCommerce Product Add-ons among others) before inviting more extension developers to integrate.

We will announce in this blog once we’ve got something we’re confident is ready for extension developers to build on top of.

I’ve integrated my payment method extension, what next?

That’s fantastic! Let us know (leave a comment on this post) and we’ll add it to the integration status page that informs stores and merchants what extensions work with the cart and checkout blocks.


16 responses to “Integrating your Payment Method with Cart and Checkout Blocks”

  1. Hi, can you please check if Viva Wallet for Woocommerce is integrated with Cart and Checkout Block? We plan to use in the nearest future the new Cart and Checkout Block pared with Viva Wallet. Thanks.

    1. Thanks for your question! It reminded me that we should encourage extension developers to let us know when they’ve added support and we can add them to the status page (https://docs.woo.com/document/cart-checkout-blocks-support-status/). As far as I know Viva Wallet does not have support yet, it’d be good to contact them and ask if they plan on adding support.

  2. Good job in explaining this, but I am afraid that the refactoring of new gateways will be very slow, considering that, for example, in Latin America, Eastern Europe and Africa there are gateways that don’t have the update rate of the most known ones, and are not even listed in the wp directories. Please, since there is no LTS version of woo, it would be a good idea not to integrate the new checkout and cart in core without always allowing the option to continue using the classic versions in legacy mode. Thousands of sites may break if the option to use the old cart and checkout is not available. There are still payment gateways that work perfectly in wc 5.1 and were not even fully adapted to wc 3.x code! For merchants it is much more important than new features to be backward compatible. Thanks to the woo team!!

    1. We aren’t planning on removing the shortcode cart and checkout flow when we start rolling out the new flow to users in WooCommerce core. We definitely are aware that there are some stores that won’t be able to switch to the new flow even if there’s good support among most payment methods and extensions.

      1. Great, this is very important for a lot of merchants around the world using less common gateways(and a lot of times it’s the only option!). It will be great that those merchants could always update to the latest woo(for security reasons, features) and retain the capability to use the legacy cart and checkout…thanks to the woo team!!!

  3. […] Integrating your Payment Method with Cart and Checkout Blocks […]

  4. Aaron Bowie Avatar
    Aaron Bowie

    After seeing this post late Friday I was worried about how much work this was going to be… Today I am happy to report that we have just pushed out an update to one of our payment gateway plugins supporting this!

    Hopefully, we can get the rest of ours supporting this by the end of the week.

    1. Awesome! Thanks for sharing Aaron!

      1. Aaron Bowie Avatar
        Aaron Bowie

        Thanks Darren, would love to get on your list (https://docs.woo.com/document/cart-checkout-blocks-support-status/). Also happy to keep you in the loop as we roll this out to our other gateways. 😊

  5. […] last Friday (19th March 2021) I was reading over a blog post from the Woo team about integrating payment gateways into their new checkout blocks. I spent the […]

  6. Laila Apiary Avatar
    Laila Apiary

    Any ideas on when the Square integration will be included?

    1. If you’re referring to this extension, we’re currently working on it.

      1. Laila Apiary Avatar
        Laila Apiary

        Thank you Darren! Any estimates on timing?

  7. […] The team who maintains WooCommerce Blocks shared some guidance around integrating your payment method with the new Cart and Checkout blocks. […]

  8. […] new checkout experience has delivered increased conversion rates compared to the shortcode checkout in testing so […]

Leave a Reply

Your email address will not be published. Required fields are marked *