How to generate dynamic Subscription checkout link in Chatrace

Last updated by matthewkiata 3 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:

Increase the price every x hours

Increase the price on every purchase

Limited the quantity of certain offer

Set up a loyalty program, so that your customers loyalty points can be used to redeem and buy something from you.

Random lucky offer

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.

In this article, we will talk about how to generate dynamic subscription checkout links from Stripe for your Chatrace chatbot.

Let’s go.

Checklist before we start

Before we started, let’s first get everything ready. You should have the below thing ready to move ahead.

Chatrace Pro account (if you don’t have one, you can connect any Facebook page with “DEMO” in the page name, and you can start using all the pro features. It will be a good starting point for you)

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 Chatrace 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.

Create dynamic subscription payment of Stripe checkout

In this section, we will talk about how to generate the Stripe checkout link for subscription right inside of Chatrace.

You need to get your API keys from our Panda Checkout Platforms.

Here is a few important URL you need to reference:

Request Type:

Post

Request URL:
https://api.v1.pandacheckout.com/checkout

Header:

X-api-key: xxxxx (click here to find it in your panda checkout account )

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_subscription

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.

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

Request URL: https://api.v1.pandacheckout.com/checkout

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 mandatory field as below:

In the body of the external request, you can select ‘ Form-encoded ”

Then add below minimum key-value pairs:

payment_gateway: stripe_subscription

product_price : any number, also you can use the custom field in your chatbot .

product_qty : any number, it’s 1 by default

product_subscription_interval: choose the interval you want. Common used are month, year,week.

product_subscription_trial: you can set up your trial, it’s 0 by default.

product_subscription_image: Choose the image you want to show up on the checkout page

success_url : any url address

Here is a sample image of my subscription test setup:

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:

Now you can also create a subscription right inside of your chatbot. And your chatbot customer can also get instant notification in the chatbot.

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:

Product name

Product short description

Product image

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_image:

provide the image of the product, which will show up on the left side of the stripe hosted checkout page.

product_brief:

This is a simple product description.

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.

Now, Let me add these into body, and you will see the final results below:

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 you have your customer email already stored in one of the custom fields, you can user 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:

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:

How to add product name, description, image

How to prefill email address

How to collect shipping and billing address

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:

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.

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.