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.