How to Process Payments with the WooCommerce REST API and Stripe

An interesting thing I found out while working with the WooCommerce REST API is that you can’t process payments.

You can create orders, but you can’t actually send credit card details and make a payment. If you are making a WooCommerce mobile app this makes things a bit more complicated.

I didn’t find many tutorials on this process, so I thought I’d document it here.

The Checkout Flow

I’ll assume that you have cart items and a checkout process already, and you are just looking to process payments. (If you want to see how to do everything else, let me know in the comments)

The checkout flow ends up looking like this:

  1. Customer goes to checkout with products in the cart.
  2. They add all their details and press the purchase button.
  3. We create an order through the WooCommerce API, and it’s set to pending.
  4. We send the customer’s card to Stripe and get a token back.
  5. We send the token to the server, charge the card, and mark the order as paid and attach any payment details.

Each payment gateway is going to require different handling, which can be a pain. If you’d like to take the easy way out you could send customers to the website to checkout. That would require redirecting them to the site using an iframe or in app browser, loading the cart contents, checking out, then sending order details back to the app. That’s a totally valid way of handling this, but it’s not what I’m going to cover.

I don’t want to go that route because it’s gonna be slower, and a worse user experience. If we load up WordPress to check out, what’s the point of using the API? We might as well just use WordPress for the whole thing.

If we want to go full API, it’s going to require handling each gateway separately. I’ll cover Stripe here, you can use these as an example for other gateways.

Stripe

Stripe has a great API, you can use Stripe.js or Stripe Checkout which do most of the heavy lifting.

The payment flow with stripe looks like this:

  1. The customer enters their payment info into your form or Stripe Checkout and presses the buy button.
  2. We create the order in WooCommerce as pending, and send the card to Stripe.
  3. We get a one-time payment token back from Stripe, and the pending order ID from WooCommerce.
  4. We send the token along with order ID to our server to create the payment and update the order as completed.

To do this we are going to need 2 things: the Stripe library in our app, and a new API endpoint on our site to handle the payment processing.

A completed version of this is available in my WP Ionic app, which uses Angular 2 and Typescript. Here’s what that looks like:

The WP Ionic app has everything, including getting products from the API, adding them to the cart, and the full checkout. You can see that on Github.

I’ll use a simple example of just the Stripe payment part using normal Javascript for this post.

Add the Stripe Javascript library, and Create the Form

To add Stripe to your app, you need to add a script tag and create a form, or use Stripe Checkout. Here is an example:

Next we need to configure our WordPress site to accept payment from our app.

The Payment Endpoint

Since the WooCommerce API does not provide us with a payment endpoint, we have to add it ourselves. When it’s done, we will be able to send a POST request to your-site.com/wp-json/wc/v2/stripe-payment with the parameters token, order_id, and payment_method.

I’ve already created a plugin that has this done for you, you can download it here. Upload it to wp-content/plugins and activate.

If you just want to see what the payment endpoint looks like to use in your own code, you can find that here.

Putting It All Together

To test out this example, download the HTML example form and add your test publishable key and website url.

Install the plugin on your WordPress site that adds the payment endpoint.

Create a pending order in WooCommerce before sending the payment, because you need the order ID. I did not cover that in this example, but you can see how to do that here. You can change the hardcoded order_id to one that is pending manually to run a quick test.

Load up the HTML file in a browser window and use a test card to run the payment: 4242 4242 4242 4242, any future date, any CVC, any zip.

If your payment was successful, you should see the order status change to completed in WooCommerce and see the transaction ID. You can also see the payment in Stripe by switching to “view test data.”

That’s it!

Now that you see how the payment is made, you can integrate this into your app. To take it a step further, you can check out input validation.

Checkout my full Ionic WooCommerce REST API app here.


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

  1. Great stuff, using this example to set up payments in a Vue application. Many thanks for the write-up!

    Reply

  2. Oliver Russell April 11, 2018 at 2:28 am

    Interesting, with WooCommerce rest api connecting Stripe looks less of a hassle. The API is really great for customizing stores built on WooCommerce. You can create custom dashboard for your store using WooCommerce rest api (https://www.cloudways.com/blog/custom-dashboard-using-woocommerce-php-rest-api/ ) as well.

    Reply

  3. I’m working on something similar with React and this has helped me understand the flow of everything so much!! Thank you for posting this – it would have taken me so much longer – massive time saver. I’m surprisingly impressed with woo-commerce and their features / dashboard considering its basically free to get started. The only down-side I’ve experienced so far is the WP-rest api is a little slow compared to when I have a Node/Express api setup – but overall fairly happy. Keep up the good work!

    Reply

Leave a Reply

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

Want to learn more about mobile apps and business? Enter your email below.
Holler Box

Ionic + WordPress

Enter your email below and I'll send you more details on my Ionic + WordPress toolkit.
Holler Box