How to generate dynamic subscription checkout link in Manychat
Last updated by matthewkiata 4 years ago One of the great features of Panda checkout is that it can dynamically generate checkout links and send you directly confirmation right after your purchase.
So it’s big feature is dynamic checkout & seamless integration with your chatbot.
Chatbot have a lot of features to make interactive actions with your potential customer, image you can do below offers easily:
Set up a loyalty program, so that your customers loyalty points can be used to redeem and buy something from you.
Etc.
There is so much more. The imagination is yours. But we built this tool for you to sell different prices for different customers.
All the information we need from your chatbot is the userID, total amount, currency, payment type(one time payment or subscription) , and then we can send you immediately the checkout link right back to your chatbot.
We will show you how to set up dynamic subscriptions on the Manychat platform today.
Checklist before we start
Before we started, let’s first get everything ready. You should have the below thing ready to move ahead.
Panda Checkout account, you need to generate your own API keys in our platform. If you haven’t yet, click here to find out how to do it. You can start your 14 days free trial here.
Connect Stripe account with Panda checkout. If you still haven’t done so, click here to find out how to do it.
Connect Manychat to Panda checkout, if you still haven’t done it, click here to find out how to do it.
So once you have ticked all the boxes above, now we can move to set up a dynamic checkout for you.
What payment type you want to generate?
We support one time payment & subscription in the Chatbot. Their set up is a little different, but you need to follow each tutorial specifically.
All the checkout links are generated through external requests. We will provide you an endpoint url for you, and you can send a request to this url and with your dynamic parameters like total amount, etc, then we can generate a checkout link for your customer right away.
Create one time dynamic subscription payment of Stripe checkout
In this section, we will talk about how to generate the Stripe checkout link for one time payment right inside of Chatrace.
Here is a few important URL you need to reference:
Request Type:
Post
Request URL:
https://api.v1.pandacheckout.com/checkout
https://api.v1.pandacheckout.com/checkout
Header:
Request Body:
product_name:
type your product name
product_qty:
type the product quantity
product_subscription_image:
provide the image of your subscription product image. This image will show up on the checkout page.
product_subscription_interval:
Here are a few subscription options you have, “day, week, month or year”. Pick any interval you want, and then the subscription will create on the fly.
product_subscription_trial:
We support free trial, you can set up 7 days, or 14 days free trial, the subscription will be only activated after your trial days.
product_price:
number, this should be a number, which can be a custom field in your chatbot, that’s how we make the checkout dynamic. Also this is the actual payment you want to charge, don’t convert it into cents.
payment_gateway: stripe
This should be stripe or stripe_subscription , depending on if you are sending a request for one time payment(using stripe) or subscription(using stripe_subscription).
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 Chatrace, it’s {{user_id}}, this might vary depending on the platform you are using.
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.
success_url:
This is the redirect page after the success payment from Chatbot. You can add some instructions on the page. This url can be any url you want.
This is the redirect page after the success payment from Chatbot. You can add some instructions on the page. This url can be any url you want.
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.
contact_email:
If this field has email value, we will pre-fill the email address on the Stripe hosted checkout page, the customer doesn't have to type it again on the checkout page, also they won’t be able to change it. Use it according to your user case.
allow_shipping_countries:
If you type country shortcode here, there will be a shipping/billing address on the checkout page, it will make you sell physical products. And also sometimes some countries require you to collect billing addresses. If you have multiple countries, separate with , with no spaces, for example, AU,CN,USA,UK. Also you can reference here for a complete country list. Please use two-letter ISO country codes.
Now, Let’s head back to Chatrace, and then let’s set up an external request in the Action. You need to have a pro account in order to use this feature.
Important note:
Please keep the key name exactly the same as shown above.
First, Let’s set up the post request as below:
Make sure you select Post type, and type the URl as in our documents above.
Request Type: POST
Header:
Name: X-api-key
Value: xxxx - change it with your own API keys
And then add your own API keys in the header. It should looks like this:
Now, Let’s set up Body with the minimum mandatory field as below:
Then add below minimum key-value pairs:
Here is a sample of my Stripe subscription set up:
{
{
"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"
}
Please take a note of the important parameters in the screenshot below:
If you set up as above, now go to the test request, you can send a test request, see if you can get any response.
Check the image below, if it’s all set up correctly, you should be able to receive 200 code responses with a checkout link just generated for you.
If you paste that checkout link into your browser, it should redirect to a Stripe hosted checkout page like below:
The amount you see on the checkout page should be the same value you put in the external request.
And if you set up the subscription trial days, you should be able to see the free trial in the product description.
If you have connected in Panda checkout with your sandbox account, you should be able to use the Stripe test credit card to test if out.
If you have the test mode at the top left corner of the checkout page, it means you are connected to the Stripe sandbox account.
You can checkout using the Test Credit card information below:
Email: any email
Card Information: Credit Card number: 4242424242424242; Expiry date: 02/22(any future dates); CVC: 456(any 3 digit number)
Name on the card: any name
Then after you clicked the Pay button below, you should be able to redirect to the success url you just set up when you send the external request.
For me, it just redirects me back to the Google page.
Now, that’s the very basic set up of taking one time payment inside of the Manychat platform.
So, now you can make the basic works, now we can improve on your checkout page.
Customize your checkout page - add product name & image & description
In the previous section, we just provide the most basic information to generate the checkout link. But there are a few very interesting options for us to customize the checkout page even more.
In this section, I will you how to provide more information about the product, you can set up:
And Let me show you how to do it now.
So let’s get back to our external request in Chatrace,
Here is what we have previously for the basic version of checkout page:
We have more parameters you can use to customize the checkout page, that is:
product_name:
type your product name
product_subscription_image:
provide the image of the product, which will show up on the left side of the stripe hosted checkout page.
And these fields are optional, but you can make it more personal and use any of the custom fields you have right in your chatbot.
A interesting note:
You can use custom fields in all these descriptions.
Now, let’s test request and visit the checkout link generate now, you will see the new checkout page as below:
As you can see from the screenshot above, you can see the product name, product description and image all populated on the checkout page.
And you can see that even your customer’s name from Chatbot is shown in the product name and description.
That’s pretty awesome, right? 😇
Customize your checkout page - pre-fill email address
So, usually when you send the customer to the checkout page, you already have their name and email address already, so if you already have it, why do we trouble them to type it again on the checkout page?
We all know that you can increase your conversion rate when you remove friction on the checkout page.
So in this section, I will show you how to pre-fill the email address on the checkout page for your customer.
Let’s go.
This time, we will use one extra parameter.
contact_email:
If this field has email value, we will pre-fill the email address on the Stripe hosted checkout page, the customer doesn't have to type it again on the checkout page, also they won’t be able to change it. Use it according to your user case.
If you have your customer email already stored in one of the custom fields, you can use that email custom field instead.
And once you fill the email as above(you should replace that with one of your custom fields), and then generate the checkout link and you will see this on the checkout page.
As you can see from the screenshot above, the email from your chatbot got prefilled on the checkout page, and greyed out.
Now, Let’s talk about the last customerization you can do for the checkout page.
Customize your checkout page - collect billing/shipping address, auto complete
If you are selling physical products, or some countries require you to collect billing address or shipping address, you will need to use below options to turn it on.
Plus, Stripe hosted checkout pages support Google address autocomplete, so another small feature that can potentially increase your checkout conversion rates.
Now, Let’s see how to set it up, you will need to learn more about below parameter:
allow_shipping_countries:
If you type country shortcode here, there will be a shipping/billing address on the checkout page, it will make you sell physical products. And also sometimes some countries require you to collect billing addresses. If you have multiple countries, separate with , with no spaces, for example, AU,CN,USA,UK. Also you can reference here for a complete country list. Please use two-letter ISO country codes.
So, an important note is that you need to add all the countries you want to ship to. And you should use the two-letter ISO country codes.
In my examples, I am going to show you to accept shipping addresses to Australia, and you should be able to customize to your own needs.
After you set it up, now you can send test request, and then now go visit the checkout page:
As you can see from the screenshot above, the checkout page already showed the shipping and billing address, and also if you type any address, it will auto complete the address for you.
It’s pretty convenient for you.
Save checkout link to custom field
By now you should be able to send external request to generate the checkout link, and also you also learn how to customize the checkout page:
Now, you need to save the checkout link generated and send it to your Chatbot user. There are two ways to do so, I will show you the easier way first.
We will use the external request response to map the checkout link into one of your custom fields.
So, I just created a custom field called checkout_link in my demo chatbot, and now, Let me show you how to map the checkout link to this custom field.
You should use $.message in the JSONPath. So what this does is that it pulls out the value from the response sample below:
{
"statusCode": 200,
"message": "https://api.v1.pandacheckout.com/checkout/QPOOE395"
}
The JSONPath will save the value of the message into the custom field. And then you can put that checkout link in the button as screenshot below:
And also you can add some conditions before sending this message to the user, this is just to make sure the checkout is valid.
And once the user clicks the button, it will take them to the Stripe checkout page, and that's done for generating a dynamic checkout link and taking the customer to the Stripe hosted checkout page.
I have to mention there is another way to send the checkout link back to your chatbot platform.
It’s through our “Checkout created” hook, it takes some time to set up, but you can become familiar with our Panda checkout platform pretty quickly.
For more information, checkout “ Set up Checkout Created Hook tutorials.
