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 a Stripe account with Panda checkout.
Create flows and assign keys of that flow to the Chatbot platform
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:
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.
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
receipt_urls: https://pay.stripe.com/receipts/acct_1INdAqK8NXoGf3ba/ch_1IeBx4K8NXoGf3baVXJiwBAc/rcpt_JGjP4GBjREiPBUsvcRk2pDnprud8lhX
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:
or the name you type on the billing address.
Customer_email: The value is the email address that the customer provided on the checkout page.
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:
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
Step 2: Copy the EXACTLY the same custom field name from your chatbot, and follow the setup process below
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.
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.
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:
Now, if you click into the “Chatbot send content” and edit, you will see the “ system variable ” at the top right corner.
Here is a list of system variable we can use in the content:
#{checkout_url}
#{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.
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.
Now, Let’s copy the Flow ID in the Manychat, just go to the flow URL and copy the part that start with “content”:
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.
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 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.
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.
And also you can add conditions in your flow to make sure those custom fields are populated properly.
