Set up one click upsell - Stripe

Last updated by matthewkiata 4 years ago

Welcome to panda checkout! One of the most important features for panda checkout is that we bring the one click upsell right into your chatbot.

Here is a few important features about our one click upsell(This article is for Stripe only)

Unlimited upsell/downsells

Upsell on your website & in your chatbot

Upsell one time payment or subscription, both supported

Seamless & instant success notification or follow up

Well, we got a lot to cover, let’s get started, we will use the Chatrace chatbot platform for example in this article.

Checklist

Before we move a head to set up one click upsell, you need to know it’s a little complicated to set it up.

You need to get below things ready or familiar with below items:

Have a Panda checkout account

Have a verified Stripe account and already connected with Panda checkout

Connected Chatrace with Panda checkout.

Able to set up “checkout created” hook or “checkout success” hook & familiar with external request

If you go all the above covered, now let’s move to set the simple one click upsell

Update your external request

If you follow up our instruction by now, you should know that we use external requests to generate dynamic checkout links, and we have a lot of parameters in the body of the request, so that we can make some “AWESOME” checkouts.

A few customizations we can do are:

Control it’s one time payment or subscription

Customize the product name, description, or image showed on Stripe hosted checkout page

Pre-fill customer email address on the checkout page

Control if you want to collect shipping/billing address or not

Control which payment gateway you want to use, Stripe or Paypal

Control success url or cancel url you want to redirect after the purchase

Well, today, we will add or update below two more parameters,

u psell_enabled: true or false, it’s false by default

s uccess_url: we need to add extra parameters at the end of URL.

Let’s talk about one by one:

upsell_enabled:
This parameter is false by default, if you don’t use one click upsell, you don’t need to worry or add this to the body of your external request.

It’s false by default.

But this time, we want to set up upsell, so let’s add this parameter and set the value to “true”.

It will be looking like the screenshot below:

Now, there is another important update we need to make for the success_url.

By default, the url is the website you want to redirect the user to after the purchase, for the upsell/downsells, you want to redirect the user to one of your offers, and offer two options on the page, it’s either they accept the offer (we update the order) or they reject the offer , we move to the next offer or to the thank you page instead.

In order to connect the purchase they might take on their website, we need to pass on the order_number variable at the end of the success url.

If you want to track the purchase conversion to Google or Facebook , you can add extra purchase information like total amount & currency at end of success url too.

You can find them by adding send content block, and then click the link on the top right corner of the window.

Here is a few most used system variables for your reference,

#{order_number}

#{order_total}

#{order_currency}

Suppose your success url is:

https://www.pandacheckout.com

Now, you should add these parameters

https://www.pandacheckout.com ?order_number=#{order_number} & order_total= #{order_total}& order_currency =#{order_currency}

The red & bold part can’t change, otherwise your upsell won’t work. We won’t be able to match your upsell with existing purchase.

However, you can change the key of order_total & order_currency (in light blue) to anything you want.

Now, let’s update the success url to the body of the external request.

So to sum up, in order to start using upsell, you will need to:

Add upsell_enabled parameter, and set the value to true

Update your success url , add at least “ ?order_number=#{order_number}” at the end of URL

One click upsell through website

Panda checkout supports one click upsell on your website or right in your chatbot . You can pick which one you want to use, and in this section, we will talk about setting up the one click upsell on your website.

You can use Wordpress with any page builder you like, as long as you can add data-attribute to the buttons.

We will show you how to set it up through an elementor powered WordPress site.

Here is an overview what you need to do to make it work:

Find your public API key in your panda checkout account.

Swap the API key in the below code to your own API keys, and then add to the header of all your upsell page.

Make modification to your buttons(accept offer or reject offer)

First, you can find your API keys here, and then swap your API keys to the below code:

const PANDA_CHECKOUT_PUBLIC_KEY = ' pub_testKey '

</script>

After you changed your API keys, copy the above code to the footer of all your upsell pages .

Make sure it’s at the bottom of your page. If you added in the header, this might not work.

Now, I will add “html” module to footer of my upsell page ,

Now, let's set up the “accept” or “reject” button on the upsell/downsell page.

Here is a sample code for your to reference:

<div>

<button id="panda-checkout-btn-reject"

class="panda-checkout-btn-reject"

data-product-price="39"

data-product-name="Standard License"

data-product-qty="1"

data-product-id="1"

data-redirect="https://www.pandacheckout.com">

Reject

</button>

<button id="panda-checkout-btn-accept"

class="panda-checkout-btn-accept"

data-product-price="39"

data-product-name="Standard License"

data-product-qty="1"

data-product-id="1"

data-subscription="true"

data-redirect="https://www.pandacheckout.com"

data-product-subscription-image=""

data-product-subscription-trial="14"

data-product-subscription-interval="month">

</button>

</div>

First, Let’s clear one thing. Usually there are two buttons on the upsell/downsell page, you need to add our specific class or ID for those two buttons.

For accept offer button , you need to add either class or ID with the value: panda-checkout-btn-accept

For reject offer button , you need to add either class or ID to the button with value:

panda-checkout-btn-reject

Only add one, don’t add to both class and id. It will create duplicate triggering problems.

Now, Let me show you how to do so in elementor page builder.

For the accept offer button:

You can do the same for the reject button .

Now, we have fixed the button, and then you need to decide two thing:

The upsell offer is one time payment or subscription ? we support both no matter what payment you started with. Just the data for each will be a little different.

Which page do you want to redirect to after your customer clicked on each button? Do you want to redirect the customer to a downsell page when they reject the offer? Do you want to redirect the customer to thank you page after they accept offer or to another

If the upsell offer is one time payment , then you can add below information to your accept or reject offer buttons:

data-product-price="39"

data-product-name="Standard License"

data-product-qty="1"

data-product-id="1"

data-redirect="https://www.pandacheckout.com”

And obviously, you can replace with your own redirect url, and product name, price, qty.

Mandatory fields are:

Redirect url: mandatory

Price: mandatory

Qty: mandatory

Product name: highly suggest you have

For the redirect url, you don’t need to add orderID at the end of it here. You only need to add that at the first redirect URL.

For one time payment do notice:

Redirect url, price, qty are mandatory fields. You must provide value for it.

If the upsell offer is subscription , then you can add below information to your accept or reject offer buttons:

data-product-price="39"

data-product-name="Standard License"

data-product-qty="1"

data-product-id="1"

data-subscription="true"

data-redirect="https://www.pandacheckout.com"

data-product-subscription-image=""

data-product-subscription-trial="14"

data-product-subscription-interval="month"

For the subscription interval, you can use “month” “year” “week” “day” , and you can set up your subscription name, subscription price.

Mandatory fields are:

Redirect url: mandatory

Price: mandatory

Qty: mandatory

Data-subscription: mandatory

Subscription-interval: mandatory

Subscription-trial: optional

Product_name: highly suggest you have.

That’s it.

For subscription do notice:

Redirect url, price, qty, subscription, data-subscription are mandatory fields. You must provide value for it.

Now, Let’s set up the data attribute for the buttons. Different platform/page builders might have different ways to add data attributes, you can reach out to your platform support or developer to add the necessary code for your upsell page.

In the following section, I will just show you how to add a data attribute to the button using elementor page builder.

If you are using Elementor to build your website and sales funnels, they have very specific documentation on how to add data attributes, you can find the tutorial here . You have to have elementor pro to using this feature.

“ Example of one property for one attribute:

data-spots|round

Example of two properties for one attribute:

data-spots|round long

In this example, data-spots is our custom attribute, and round and long are the properties of the attribute. When you view the source code that is output, it will look like this:

data-spots=”round long”

So, then we can change our data attribute to:

For one time payment :

data-product-price|100

data-product-name|Standard License

data-product-qty|1

data-product-id|1

data-redirect|https://www.cutepanda.com.au/miao-upsell-2/

Here is a screenshot of the code added to the button:

For subscription :

data-product-price|100

data-product-name|Standard License

data-product-qty|1

data-product-id|1

data-redirect|https://www.cutepanda.com.au/miao-upsell-2/

data-product-subscription-trial|14

data-product-subscription-interval|month

data-subscription|true

Here is quick video how to add the subscription code to the button elements:

Now, the upsell page is done!

So to a quick recap, we have done bellowing for the upsell page:

Replace with your own API key , and add our script to all the upsell/downsell page, add to the footer of the upsell/downsell page

Add our specific css or id to the accept or reject button, don’t add both, otherwise you will get duplicate messages.

Add data attribute to the button depending on the upsell is one time payment or subscription , and also which page to redirect after the button is clicked.

Quick test & debug

Now, let’s run a quick test of the website upsell.

First let’s generate a checkout link with upsell_enable = true , and also update the success url(add “ ?order_number=#{order_number}” at end of url) , and when the checkout link generated.

Go to the checkout page, and complete the purchase(suggest you use Stripe sandbox to test).

After the purchase, you should be able to redirect to the success url.

Now first you go to the dashboard, you should be able to see the new order showed up at the dashboard.

Copy the success url and see if you can see the ?order_number=#{order_number} added to the end of url.

If the order number is already added to the end of the url, click the “accept” or “redirect” button, you should be able to see the spinning circle and then redirect to the next page.

If you don’t see any spinning circle, then you need to check the script you need to add for all your upsell/downsell pages. You can preview the source code of your page, and search for the “upsell” keyword to see if you can find the script on the page.

If you are not redirected to the next page, then you need to check the redirect url in your data attribute.

If you have successfully redirected to the next page, you can now go to the dashboard, refresh the order page, you should be able to see another upsell order pushing in if you clicked the “accept” button.

If you haven’t seen the upsell order updated to your dashboard, then check the data attribute again.

If you still can’t figure it out, reach out to our support team.

Upsell confirmation & follow up in chatbot

Panda checkout provides special hooks/triggers for the upsell accepte or upsell rejected action. Now you will be able to:

Send follow up chatbot sequence if customer didn’t take the upsell

Send upsell purchase confirmation immediately in chatbot

In this section, we will show you the system variable for the upsells, and also how you can set up to send confirmation or follow up chatbot sequences.

So, let’s first talk about the purchase confirmation flow, we will not going through all the details here, if you are not familiar with how to set it up, you can look the tutorials about “checkout created tutorials ” “checkout cancelled tutorials ”, especially “checkout succeed ” tutorials.

A few new system variable for the upsell are listed below:

#{upsell_product_name}:

the name of the upsell product, which is defined in the data attribute(website upsell) or custom field in your chatbot upsell.

#{upsell_product_price}:

The selling price of the product, if it's a subscription product, then it’s subscription amount, which is defined in the data attribute(website upsell) or custom field in your chatbot upsell.

#{upsell_product_qty}:

The quantity of the product, if it's a subscription product, then it’s subscription amount, which is defined in the data attribute(website upsell) or custom field in your chatbot upsell.

#{upsell_product_subscription_interval}:

This is used only for subscription products,which are defined in the data attribute(website upsell) or custom field in your chatbot upsell.

#{upsell_product_subscription_trial}:

This is used only for subscription products,which are defined in the data attribute(website upsell) or custom field in your chatbot upsell.

#{upsell_receipt}:

This is a Stripe hosted invoice, used only for one time payment products. Subscription products don’t have a receipt url.

#{upsell_payment_gateway}:

It will be Stripe, which stands for Stripe one time payment; Stripe_subscription, which stands for Stripe subscription; it will be paypal, which stands for Paypal one time payment; it will be paypal_subscription, which means Paypal subscription.

#{upsell_payment_gateway_id}:

This is the payment gateway id, you can search this id in your Stripe or Paypal dashboard directly to locate the purchase.

#{upsell_result}:

This will be the results of the upsell, it’s accepted or rejected.

You can use these variables specifically for upsell, and then you can set a custom field, add tags, send user content or flow in your chatbot.

One click upsell through chatbot

Panda checkout supports one click upsell on your website & chatbot too . In this section, you will learn how to set up one click upsell right in your chatbot.

Remember you can only set up one click upsell after you have sent the customer back to your chatbot after the “checkout success” hook.

If you don’t know how to do so, follow the tutorials here for more details .

The only parameter that we need is the order number. If you have some developer background, you can have a look at our swagger here.

Please note the below external request should be set up in the purchase confirmation flow, where you already have the order number from the customer.

Let’s set up the external request as below:

Below is the variable for the one time payment upsell :

The request url is:
https://api.v1.pandacheckout.com/upsell/append

Header:
X-api-key: xxxx(type your API here)

Body:

order_number:xxxx

product_qty:xxxx

product_price:xxxx

product_name:xxxx

You can test the upsell external request, but do need to update using the valid order number.

Below is the variable for the Stripe subscription payment upsell :

Request type:

Post

The request url is:
https://api.v1.pandacheckout.com/upsell/append

Header:
X-api-key: xxxx(type your public API here)

Body:

order_number :xxxx

product_qty: xxxx

Product_price: xxxx

subscription: true

product_subscription_interval: month or year or week or day

product_subscription_trial: number of days that you want to offer free trial, default is 0, and it's an optional setting.

p roduct_name:xxxx

You can test the upsell external request, but do need to update using the valid order number.