![]() ![]() 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. ![]() You can change the hardcoded order_id to one that is pending manually to run a quick test. I did not cover that in this example, but you can see how to do that here. Install the plugin on your WordPress site that adds the payment endpoint.Ĭreate a pending order in WooCommerce before sending the payment, because you need the order ID. To test out this example, download the HTML example form and add your test publishable key and website url. If you just want to see what the payment endpoint looks like to use in your own code, you can find that here. Upload it to wp-content/plugins and activate. I’ve already created a plugin that has this done for you, you can download it here. When it’s done, we will be able to send a POST request to /wp-json/wc/v2/stripe-payment with the parameters token, order_id, and payment_method. Since the WooCommerce API does not provide us with a payment endpoint, we have to add it ourselves. Next we need to configure our WordPress site to accept payment from our app. To add Stripe to your app, you need to add a script tag and create a form, or use Stripe Checkout. Add the Stripe Javascript library, and Create the Form I’ll use a simple example of just the Stripe payment part using normal Javascript for this post. The WP Ionic app has everything, including getting products from the API, adding them to the cart, and the full checkout. 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.Ī completed version of this is available in my WP Ionic app, which uses Angular 2 and Typescript. We send the token along with order ID to our server to create the payment and update the order as completed.We get a one-time payment token back from Stripe, and the pending order ID from WooCommerce.We create the order in WooCommerce as pending, and send the card to Stripe. ![]() The customer enters their payment info into your form or Stripe Checkout and presses the buy button.The payment flow with stripe looks like this: Stripe has a great API, you can use Stripe.js or Stripe Checkout which do most of the heavy lifting. I’ll cover Stripe here, you can use these as an example for other gateways. If we want to go full API, it’s going to require handling each gateway separately. 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. I don’t want to go that route because it’s gonna be slower, and a worse user experience. That’s a totally valid way of handling this, but it’s not what I’m going to cover. 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. If you’d like to take the easy way out you could send customers to the website to checkout. We send the token to the server, charge the card, and mark the order as paid and attach any payment details.Įach payment gateway is going to require different handling, which can be a pain.We send the customer’s card to Stripe and get a token back.We create an order through the WooCommerce API, and it’s set to pending.They add all their details and press the purchase button.Customer goes to checkout with products in the cart.The checkout flow ends up looking like this: (If you want to see how to do everything else, let me know in the comments) I’ll assume that you have cart items and a checkout process already, and you are just looking to process payments. I didn’t find many tutorials on this process, so I thought I’d document it here. If you are making a WooCommerce mobile app this makes things a bit more complicated. You can create orders, but you can’t actually send credit card details and make a payment. An interesting thing I found out while working with the WooCommerce REST API is that you can’t process payments. ![]()
0 Comments
Leave a Reply. |