Checkout cancelled Hook Tutorial

Last Modified Avatar

Last updated by Matthew Miao a year ago

In the previou article, we talked about how to generate dynamic checkout links(Manychattutorials) 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

Can't find what you're looking for?

Contact Us
Refreshed On: Jul 04, 2022 07:55:25 UTC+00:00