Set up checkout success hook

Last Modified Avatar

Last updated by Matthew Miao 8 months ago

This is one of the most important hooks we need to set up. If you set this up properly, you will have the smoothest checkout experience in your chatbot.
Traditionally, if you redirect the user out of the chatbot platform to Stripe or Paypal, your chatbot user doesn't receive any confirmation back from your payment gateway.
Because there are two different platforms, they don’t have the ways to communicate with each other.
With panda checkout, your chatbot user will receive instant notification right after the purchase is completed or checkout link created, cancelled, etc.
If you know how to make this “magic happen” keep reading.

Checklist

Before you follow the tutorials, you need to do the below first:
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, Manychat tutorial here)
In summary, you should already connect your chatbot with a panda checkout, and also be able to send external requests to generate a checkout link.
I want to do a quick recap about the important steps to set up external request to generate a dynamic checkout:
3 important parameters need to set up when you set up external request in your chatbot:
platform
platform_customer_id
flow
Image 1
Here is a sample of the body request for your reference:
{
"product_price": 434,
"product_qty": 1,
"product_name": "Manychat DEMO Product",
"payment_gateway": "stripe",
"success_url": "https://www.google.com",
"platform_customer_id": "2097645980315812",
"platform":"manychat",
"flow":"6071512f1fdcc720105670cb"
}
Replace the highlight to your own data.
Currently we support manychat and chatrace. So type manychat or chatrace on the platform field. We will bring more platforms in the future development.
Use the system custom field in your chatbot platform for the messenger user ID. Because that’s how our platform can “talk back” to the exact user who initiated the checkout.
Copy the flow Id you have set up in Panda checkout. We will map all the action, and message you want to execute for the checkout process.
Once you set up above 3 parameters, now make sure you connect your chatbot(manychat tutorials & chatrace tutorials) with panda checkout, and also assign keys to that specific flow.
So after all the above points are covered.
When you send external requests from our supported chatbot platform, panda checkout will be able to know which platform and which user is sending the checkout request, and also to which specific flow in the panda checkout.
Since you already connect your flow with the chatbot platform, then we will be able to set custom fields, add tags, and send content or flow to the user.
Now, Let’s get started.

Create checkout successed hook

Let’s create the checkout success hook, and then we will start setting up the custom field & add tag, and send the user to specific flow.
Image 2

Sample purchase data

Now, before we go ahead, take a look at the sample purchase data points(from Stripe).
customer_name:	matthew
customer_email:	iopoi@gmail.com
order_number:	QPOFM420
order_total:	49
success_url:	https://www.google.com
cancel_url:	https://www.pandacheckout.com
payment_gateway:	stripe
payment_gateway_id:	pi_1IeBwTK8NXoGf3baJNsVoVuu
payment_number:	SPWEAGXAXXCW23838
customer_platform:	chatrace
customer_platform_id:	3636079236501557
customer_payment_gateway:	stripe
customer_payment_gateway_id:	cus_JGjP1aeKZeFcWF
So all these values come back from the payment gateway, you can set these values right to your chatbot user.
Customer_name is the value that the user types on the Stripe hosted checkout page.
It should be the value of the Name on the card as screenshot below:
Image 3
or the name you type on the billing address.
Image 4
Customer_email: The value is the email address that the customer provided on the checkout page.
Image 5
Order_number: this is the unique identifier of the purchase in panda checkout. You will use this to identify the purchase if you want to refund or cancel the purchase in our platform.
Order_total: This is the total amount that has been captured from your customer.
Payment_gateway: This will be stripe or paypal depending on which payment gateway your customer is using.
Payment_gateway_id: This is the payment intent or payment id from the payment gateway, it’s mostly for developer use, you don’t need to understand or use it. Same for the payment_number variable.
Customer_payment_gateway_id: This is the unique identifier of the customer in the payment platform.
receipt_urls: This is the Stripe hosted receipt url.

Set custom field in Manychat

After you checked the payment information available for you to send to your customer, you can choose a few items you want, and then create the custom field in your chatbot platform first. I will use the Manychat platform for example here.
Input from Panda checkout
Custom field in Manychat
Remarks
order_number
order_number
order_total
order_total_amount
payment_gateway
payment_gateway
customer_name
customer_name
customer_email
customer_email
Here is how to create custom field in Manychat:
Image 6

Connect set custom field action in Panda checkout

After you set up the custom field in your chatbot, now it’s time for us to set these custom fields once the purchase is complete.
Make sure the custom field name is EXACTLY the same as in your chatbot.
Now, let’s set all these custom fields as in the image below:
Step 1: Drag all the input your want to set up from payment gateway, Drag the “set custom field action” from the integration
Image 7
Step 2: Copy the EXACTLY the same custom field name from your chatbot, and follow the setup process below
Image 8
Now, set the custom field all completed. So once the payment is completed, this “checkout success” hook will be triggered, and all the value from your payment gateway will be set up in the chatbot user who initiates the checkout.
Here is a final image already connected to the input with set custom field action.
Image 9

Add Tag to the Chatbot user

Purchase is the important action we want to tag the user, so in this section, we will show you how to easily add the “purchased completed” tag to the user.
Obviously you can add any tag name and any number of tags you want.
In the abandon cart and cancel checkout follow up automation, you can use conditions to check if the user has completed the purchase or not to determine if you want to send the follow up message or not.
Now, check below steps to add a tag to the user, it’s pretty straight-forward.
Image 10
Just drag the “Chatbot Add Tag” action to the canvas, and then type any tags you want to add.

Set up send content action

In this section, we will show you how to send confirmation content right after the purchase. We will show you the system variable that you can use, and how easy it is to set it up.
Let’s first drag the “Chatbot send content” onto the canvas:
Image 11
Now, if you click into the “Chatbot send content” and edit, you will see the “system variable” at the top right corner.
Image 12
Here is a list of system variable we can use in the content:

#{checkout_url}
#{order_number}
#{order_products}
Product[]
#{order_total}
#{contact_email}
#{order_status}
#{receipt_urls}
#{success_url}
#{cancel_url}
#{payment_gateway}
#{payment_gateway_id}
#{payment_number}
#{customer_name}
#{customer_email}
#{customer_platform}
#{customer_platform_id}
#{customer_payment_gateway}
#{customer_payment_gateway_id}
And you can write content using the above variables. So an example will be like content below:
“Thanks for your purchase, here is the order confirmation:
Order Number: #{order_number}
Purchase email: #{customer_email}
Total amount: #{order_total}
Let’s copy the above content and paste into the sent content to chatbot.
Image 13
So above content will be sent to the chatbot user right after the purchase is completed.

Send the user to flow

Not only can you send content directly to the chatbot user, you can also send the user to the flow right after the purchase.
In this section, we will show you how to send the user to a purchase confirmation flow, and using the custom field which should be set up after the purchase is completed.
I have set up a simple flow as below in Manychat.

Image 14
Now, Let’s copy the Flow ID in the Manychat, just go to the flow URL and copy the part that start with “content”:
Image 15
Now, Let’s go back to Panda checkout, and drag “ Chatbot send flow” into the canvas, make sure you are adding to the correct hook.
Image 16
Now paste the flow Id you copied from Manychat into it. Then it’s all set.

Checklist before test

Up until now, we have set up the custom field, added the tag, and also set up send the chatbot user content and flows.
Those are 4 important actions you want to connect or set up in your chatbot platform.
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.
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.

Last important notice

Once the hook is triggered, our platform executes the action from top to bottom, and from right to left.
Image 17
This is important if you want to use some custom field in your flow, you need to put the “set custom field” action first at the top.
And also you can add conditions in your flow to make sure those custom fields are populated properly.

Was this article helpful?

Can't find what you're looking for?

Contact Us
Refreshed On: Dec 05, 2021 05:44:04 UTC+00:00