Checkout initiate Hook Tutorial

Last updated by matthewkiata 4 years ago

In this article, we will talk about how to generate dynamic checkout links using Panda checkout. If you have checked our tutorials on how to do it with Chatrace , or Manychat, that is an easy way to do so.

You can send external requests, and map the response to the custom field , and then your Chatbot user can go to the link generated checkout.

What we are going to cover today can also work. But it takes a little bit to set up. It will be a good chance for you to familiar with panda checkout platform,

Let’s get started.

Things to be ready

We will use Panda checkout to complete the process, The benefits of Panda checkout is that we want to build a smooth and dynamic checkout experience for the Chatbot.

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

Once you finish this, that means Panda checkout now knows which platform they are “talking to” , and all the set custom fields, add tags, send flow will be sent to the right platform.

Still we need to know which specific user, that’s why you need to add {{user_id}} in the external request. More details later.

Create flow & Assign Keys

In this section, I will start from scratch and let’s first create a new flow name “Panda Check demo” as below:

Create a “ Checkout Created ” hook, and then assign keys to one of the Chatbot platforms you are planning to use.

Now, save the flow, and return back to the flow field, and let’s copy the flow ID.

Create dynamic checkout link in Manychat

If you don't know how to generate a checkout link from an external request, you can refer to the Chatrace tutorial or Manychat tutorials .

The benefits of Panda checkout is that we want to build a smooth and dynamic checkout experience for the Chatbot platform.

That’s why we want to inform the chatbot user right inside of the chatbot, and let them know the purchase is confirmed or canceled.

In order to do so, we need to change the external request a little bit, we need to let “Panda checkout” know which chatbot user is talking to her.

We will need below parameters to add to the external request,

platform:

This should be the name of the Chatbot platform you are using, for example manychat or chatrace.

platform_customer_id: {{user_id}}

You need to use the userID variable in your chatbot platform. For Manychat, it’s {{user_id}}, this might vary depending on the platform you are using.

Here is the screenshot when it’s added(take Manychat platform for example):

{

"product_price": 434,

"product_qty": 1,

"product_name": "Manychat DEMO Product",

"allow_shipping_countries": "AU",

"contact_email": "test123@gmail.com",

"payment_gateway": "stripe_subscription",

"product_subscription_interval": "month",

"product_subscription_trial": 14,

"product_subscription_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",

"platform_customer_id": "{{user_id}}",

"platform":"manychat"

}

As per screenshot below:

So when you finish above, and when you send the request to Panda checkout, our platform knows which user and which platform is talking to “her”.

But you might have multiple flows in your Panda checkout, we need to specify which flow you want Panda checkout to “talk back” to you.

Now, here is one more parameter we need:

flow:

This should be the flow ID in Panda checkout. That’s how we connect everything together. You need to make sure you are using the correct flow ID, otherwise your customer might not be able to receive purchase notification.

And now Let’s set up the flowId in the external request:

{

"product_price": 434,

"product_qty": 1,

"product_name": "Manychat DEMO Product",

"allow_shipping_countries": "AU",

"contact_email": "test123@gmail.com",

"payment_gateway": "stripe_subscription",

"product_subscription_interval": "month",

"product_subscription_trial": 14,

"product_subscription_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",

"platform_customer_id": "{{user_id}}",

"platform":"manychat",

"flow":"6071512f1fdcc720105670cb"

}

As per screenshot below:

Set checkout link in Panda checkout

By now we already include the messenger user Id and messenger platform and the flow ID in the external request.

So when the checkout link generated, panda checkout already knows which user in which platform to send the information back.

So, now we just need to set the “information” right inside of Panda checkout.

So, we have 4 common actions we can set up for the chatbot user.

Set custom field

Add Tag

Send user to flow

Send content to user

Now, let’s set up the process below to send the checkout link back to the user who initiated the checkout from chatbot.

Below is using Chatrace to set it up. Manychat or any other chatbot platform should be the same logic.

So, we need to first get the custom field name in the chatbot which are going to save the checkout link:

I just created a user custom field, name is Checkout URL

And also I have send up a flow which is send the user the checkout link, the flow is set up as below:

It’s a simple flow, it will just send the message, but it will check if the checkout link has any value before redirecting the user to the checkout message block.

Now, Let’s copy this flow ID now. For Manychat, your flow ID is on the URL of that flow.

Set custom field into Chatbot user

Now, Let’s get back to Panda checkout, and now, We will set up a custom field , and set up a tag , and also set up the flow we want to send to the user.

So you drag the checkout URL element from the “Order information” section, and then drag the Chatbot custom field action from the “integration” section.

Connect these two elements , and paste the exactly the same custom field name from your chatbot, and then you are all set.

Important Notice:

paste the exactly the same custom field name from your chatbot

Add tag to Chatbot user

And next, we will add the tag when the checkout is created.

Just drag the “ Chatbot Add Tag ” action into the canvas, and then add any number of tags you want.

Set up send content action

In this section, we will show you how to send content right after the checkout link generated. 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}

#{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:

“Here is your checkout link:
#{checkout_url}

“

Let’s copy the above content and paste into the sent content to chatbot.

Beside sending content directly to the user, you can also send users to the flow for more complex messages.

Send flow to Chatbot user

And then next we will set up the flow we want to send to the user, remember we already copy the flow ID from Chatbot (here is chatrace platform for example).

Just paste the flow ID when you drag the “ Chatbot send flow ” into the canvas.

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 Manychat platform

Create dynamic checkout links in your chatbot(Manychat 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.

If all the points above are checked, then you can do a test, it should work. If it doesn’t work, then you just follow the checklist step by step.

Set up abandon checkout follow up sequence

It’s common practice to set up abandoned cart follow up sequences, and we can do the same using Panda checkout.

The logic is simple, I will just briefly describe what the steps looks like,

Generate the checkout link for the Chabot user, and store the checkout link in the custom field.

In our other tutorials add the “customer” tag for the purchased customer.

Add time delay(say 30 mins), if the chatbot user doesn't have the tag, then send your checkout reminder or discount incentive.