Set up one click upsell - Stripe 

Last updated by Matthew Miao 3 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: 
Image 1  
 
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. 
 
Image 2  
 
Here is a few most used system variables for your reference,  
 
#{order_number} 
#{order_total} 
#{order_currency} 
 
Suppose your success url is: 
 
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. 
 
Image 3  
 
 
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: 
 
<!-- Panda Checkout Scripts Start --> 
<script> 
  const PANDA_CHECKOUT_PUBLIC_KEY = ' pub_testKey ' 
</script> 
<script src="https://js.stripe.com/v3/"></script> 
<script src="https://cdn.pandacheckout.com/upsell/v1/upsell-min.js"></script> 
<link rel="stylesheet" href="https://cdn.pandacheckout.com/upsell/v1/upsell.css"> 
<!-- Panda Checkout Scripts End --> 
 
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 ,  
 
Image 4  
 
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"> 
    Accept 
  </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: 
 
Image 5  
 
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  
Image 6  
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 
Here is a screenshot of the code added to the button:
 Image 7  
 
 
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: 
Image 8  
 
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 : 
 
 
Header:
X-api-key: xxxx(type your API here) 
 
Body: 
 
order_number:xxxx 
product_qty:xxxx 
product_price:xxxx 
product_name:xxxx 
 
 Image 9  
 
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 
 
 
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.  
 
 
 
 
Refreshed On: Mar 27, 2024 18:07:26 UTC+00:00