Set up checkout success hook 

Last updated by matthewkiata 4 years 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.  
 
 
 
 
 
Refreshed On: Nov 09, 2024 20:59:41 UTC+00:00