WooCommerce is very popular platform for e-commerce, while it's in PHP and usually self-hosted on self-managed servers or shared host, I got some question from my friend to extend WooCommerce functionality. It's possible to write plugin but for my use cases, using WC Webhook and AWS Lambda is more convenient. In this example, I will handle Webhook call when order is updated (order.updated).
More information about WC Webhook
Pre-requisites
- Pre installed Wordpress & WooCommerce (And your host IP)
- Basic knowledge of creating lambda function with NodeJS runtime
- Basic knowledge about to create REST API on API Gateway
Architecture
Workflow
When receiving Webhook event, it's important to check for integrity of Webhook content to prevent malicious request. In order to do so we can calculate HMAC using Webhook content and secret which store in both side. After validated event integrity, we can proceed to process event.
Setup AWS Lambda
First, let create Lambda function that will process our webhook event.
Set up Configuration > Environment Variables > Add WC_SECRET (this same value should be used when configure WooCommerce Webhook later)
-
Add The following Code to Lambda
index.js
file
-
For Testing, if you set WC_SECRET to "woocommerce", you can use the following test event in Lambda
Deploy and testing Lambda function will give you the success screen with event log (
OnOrderCompleted
in screenshot below)
Setup API Gateway
Next step is to create API Gateway to receive webhook. For some unknown reason, WooCommerce Webhook don't fire pre-flight request (OPTION) and always skip CORS, so I will skip detail about enabling CORS here.
Create POST method point to the Lambda function created earlier. Note that we need to enable Lambda Proxy Integration in order to forward header to Lambda Function.
-
In order to only allow API call which initiate from our WooCommerce server. Create Resource Policy with explicit Deny on call from IP outside our own servers.
Using Resource Policy below, replaceREGION
,ACCOUNT_ID
,API_ID
andSOURCE_CIDR
with your own configuration.
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Principal": "*", "Action": "execute-api:Invoke", "Resource": "arn:aws:execute-api:{{REGION}}:{{ACCOUNT_ID}}:{{API_ID}}/*/*/*" }, { "Effect": "Deny", "Principal": "*", "Action": "execute-api:Invoke", "Resource": "arn:aws:execute-api:{{REGION}}:{{ACCOUNT_ID}}:{{API_ID}}/*/*/*" "Condition": { "NotIpAddress": { "aws:SourceIp": "{{SOURCE_CIDR}}" } } } ] }
Finally, Deploy API and get your Webhook target URL (don't forget to add your resource name when calling it)
Setup WooCommerce Webhook
Go to your WooCommerce (in my case i use ngrok to host it locally) and config Webhook
To config webhook go to
Setting > Advanced > Webhooks
and selectAdd Webhook
-
Config new webhook as we plan
-
Status
:Active
-
Topic
:Order Updated
-
Delivery URL
: API Gateway'sInvoke URL
following by/order
(or any resource name, created in API Gateway) -
Secret
: same value withWC_SECRET
configured in AWS Lambda's Environment Variable.
-
Hit Save, you may likely get error 400, like the picture below, because when we setup webhook, woocommerce try to send POST request to our API but we didn't handle it above. However, our webhook will work anyway, let's go to test our webhook.
Test it!
Let's test our webhook, create an order and update it to processing
or completed
and let's check the logs.
WooCommerce Log at
Status > Logs
and select log file starting withwebhook-delivery-
and clickview
. InResponse
value, check http responseCode
andBody
value to see success webhook.
Alternately, you can check CloudWatch Log groups for AWS Lambda log.
Conclusion
There're many things we can do with WooCommerce Webhook e.g. Save your information for further processing or trigger automation. I write this article aiming for those who want to start explore and expand your e-commerce business, so if you happen to come across this, I hope you found it useful and help you realize your idea in business!
Top comments (0)