How to generate dynamic checkout link in Chatrace

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:

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.

We will show you how to do so on the Chatrace 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.

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 accoun t, 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.

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.

If you are a developer, you can play with our swagger here.

Create one time dynamic 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.

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

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.

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 minimum 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

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

product_qty : any number

success_url : any url address

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:

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

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:

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.