Checkout cancelled Hook Tutorial 

Last updated by Matthew Miao 3 years ago
 
In the previou article, we talked about how to generate dynamic checkout links(Manychat  tutorials ) and also how to set up an abandoned cart follow up sequence . 
 
In this article, we will talk about how to “save your customer” when they  cancel their checkout  on the Stripe hosted checkout page.  
 
Let’s get started. 
 

Checklist 

Like our other tutorials, we need to make sure all the moving parts are connected before we move on. 
 
In order to to so, we need: 
 
Connect your platform with Pandacheckout(Chatrace tutorials here , Manychat tutorials here ) 
Create flows and assign keys  of that flow to the Chatbot platform 
Connect a Stripe account  with Panda checkout. 
 
Important notice: 
 
Here is the “Checkout created hook” tutorial.  
 
Please read checkout created tutorials before you continue 

Set up cancel url in external request 

We have talked about how to create dynamic checkouts previously , you should read that before you continue. 
 
In this section, we will add one more extra parameter that can let us redirect to a specific url when the user  clicks cancel during the checkout process . 
 
cancel_url: 
This will take the customer to the cancel url if they click cancel the payment in the Stripe checkout page. This is optional. 
 
Now, let us modify our external request as below, add this parameter as below: 
 
{ 
"payment_gateway": "stripe", 
"product_price": 434, 
"product_qty": 1, 
"product_name": "Manychat DEMO Product", 
"product_brief": "This is short description", 
"contact_email": "test123@gmail.com", 
"allow_shipping_countries": "AU", 
"product_image": "https://images.immediate.co.uk/production/volatile/sites/23/2018/09/kangaroo_DirkFreder_iStock_623-18af7bd.jpg?webp=true&quality=90&resize=620%2C413", 
"success_url": "https://www.google.com", 
"cancel_url": "https://www.pandacheckout.com" 
} 
 
As per the screenshot below: 
Image 1  
 
 
So after you set it up, now you can send test request to generate the checkout link, 
 

Test cancel URL in the Stripe checkout page 

First let’s generate the checkout link after we set up the cancel URL. 
 
Image 2  
 
If you go to the Stripe hosted checkout page, and if you  click the top left back button , you should be able to redirect to the URL you just set up. 
 
Image 3  
 
Now we have set up the cancel for your checkout, and you can redirect the url to your own page, and maybe a page with content to handle the potential customer FAQ questions. 
 
 

Set up checkout cancelled hook trigger 

Just like the way we set up the “checkout created” hook, we will do the same to set up the “checkout cancelled” hook. 
 
Not only can you redirect the user back to the specific cancel url, you can follow up with the messenger user with an  automation right inside of the chatbot , and also provide the checkout link again. 
 
If that’s something you want to do, keep reading. 
 
First, let’s create the “checkout cancelled” hook, and also 
 
Set up the “checkout URL” to your custom field in the chatbot. 
Add the “checkout cancelled” tag. 
Set up cancel checkout flow. 
 
 
This demo is built for Manychat platform. 
 
Create the “Checkout cancelled” hook as below:
 Image 4  
 
 

Set up custom field 

 
And now, let’s set the custom field of “Checkout URL” in your chatbot. You need to swap to your own custom field name. 
 
Image 5  
 
 
 
Now, you can pull the “checkout URL” from the order information section, and pull the “Chatbot set custom field” from the Integration section, and then connect these two fields, when this hook triggers, the value will set up for that specific user. 
 
Image 6  
 
Important Notice: 
 
Make sure the custom field name is EXACTLY the same with the name in the custom field 
 
 

Add new Tag 

 
Now we want to add the tag to the user, here is how to do it: 
 
 Image 7  
 
Drag the “Chatbot Add Tag” action into the canvas, and add any number of tags you want. 
 
 

Send the user to a flow 

 
Suppose you already have a flow specifically for the cancellation. And it looks like this in Manychat. 
Image 8  
 
Now, Let’s copy the flow ID from Manychat and set it up in Panda checkout as below: 
 
Image 9  
 
The Manychat Flow ID looks like this “content20210410132107_483171”, you can easily find this in the Flow website URL. 
 
Now, Let’s set up the send flow action in panda checkout as below: 
Image 10  
 
 
 

Checklist before testing 

 
Make sure you go through the checklist below when you are testing the “Checkout Cancelled” hook. 
 
Before we do any test, here is a final check list: 
 
Connect your platform with Pandacheckout(Chatrace tutorials here , Manychat tutorials here ) 
Connect a Stripe account  with Panda checkout. 
Create flows and assign keys  of that flow to the Chatbot platform 
Created dynamic checkout links in your chatbot(Chatrace tutorials here ), make sure you include  platform, platform_customer_id, flow  in the body of the request.  
Make sure the flow is using the same flow ID in our Panda checkout platform. 
Set up Chatbot actions(set custom field, add tag, send flow, send content) in the exact flow ID when you create a dynamic checkout link. 
 
If you have ticked all the above points, you should be able to receive a success message right inside of your chatbot when the customer cancels the checkout process. 
 
 
 
If you set up the cancel url properly, when you are in the Stripe hosted checkout page, when you click the cancel link at the top left corner, you should be able to redirect to the cancel url and also receive the “checkout cancelled hook” messages. 
 
Image 11  
 
 
 
 
 
 
 
 
 
 
Refreshed On: Mar 26, 2024 15:12:52 UTC+00:00