Jumpseller Support Center

Checkout Settings

On this guide you will learn all of the available settings to customize the checkout process in your Admin Panel: Settings > Checkout.

The Checkout Process

Checkout Steps

Step Description URL Structure
Information Contact Information and Shipping Address /v2/information/success/unique_token
Shipping Shipping Method or Pickup Point Selection /v2/shipping/success/unique_token
Billing Billing Address and Information /v2/billing/success/unique_token
Payment Payment Method Selection /v2/checkout/payment/unique_token
Processing Payment Gateway Process the transaction External URL
Success Payment Confirmation or Instructions in case of Manual Payments /v2/checkout/success/unique_token

General Definitions

Abandonment

When a customer completes the Information, Shipping, Billing but not the Payment Step, his cart will be considered Abandoned after the time defined in “Expiration time for carts”.

Abandonment Options

If the customer reached the Processing step, an order will be created in Pending status, the order will be considered abandoned if the customer does not complete the payment, if the payment is rejected, the order will be considered canceled, not abandoned.

Data Retention

Data Retention policies are critical to ensuring local privacy regulations are being met. Customer Data will be removed from your store after the selected period of time.

GDPR Data Retention

The Privacy Policy legal page may include a reference to this setting.


Cart

Add to Cart

What happens when a customer clicks on Add to cart. Choose between:

  • Stay on the same page
  • Redirect to the Cart page (Default)
  • Initiate Checkout

Cross Selling

Cross-selling is one of the most effective methods of marketing. Offer related or complementary products to your customers.

Select products that the customer will view as recommended in the cart page.

Cross Selling Settings

Cross Selling Settings

Automate your Cross Selling process in your cart and emails based on purchasing patterns across sessions from repeat sales in our Advanced Plan.

Minimum Conditions

If toggled, customers who don’t meet the requirements will not be able to initiate Checkout.

Minimum Conditions

Item count will consider all units of products added to the cart.

Shipping Estimations

Shipping estimations are always displayed in the Checkout process, some stores find value in showing these prices before the initiation of the checkout.

A calculator will be placed in the cart if the toggle is on.

Estimate Shipping in Cart

Geolocation

When toggled, customer will receive a request for the location. If accepted, Address Checkout fields will be autocompleted with the current location.


Checkout Forms

Version

Current version of the Checkout is 2. Previous version (1) is a simplistic form that allows some modifications, mostly through Javascript. Checkout 1 will not receive updates and will not support Local Pickups.

Design

Design options are limited to color selections and a logo that will be visible only in the checkout process.

System Fields

Add extra fields to your checkout form. These can be optional or required.

  • Tax Id / Vat Number: Commonly used for invoicing and Shipping.
  • Phone: Some Shipping companies require a phone number.
  • Postal Code: In some countries it is a required field.
  • Special Instructions / Additional Information: Customer can add special instructions for the delivery: “leave the order in the front door*.
  • Customer Accepts Marketing: In some legislations, it is required to ask customers for their authorization to include them in targeted marketing campaings.

Custom Fields

These can be added to any of the three sections: Contact Information, Shipping and Billing Addresses or Other. If a field is added to the Shipping Information, it will be added as well in the billing form. These are the field types:

  • Input: A line of text and/or numbers. Example: Door Number, Company Name.
  • Text: More than a line of text or numbers.
  • Select: A list of options to select. - Example: Type of billing document, type of wrapping.
  • Date: A date field with no restrictions. Example: Date of birth.
  • Checkbox: Or selection box.

Change the text style to Bold, Italics and add in-text links when creating your customized fields by selecting and hovering text.

Estimate Shipping in Cart


Advanced Customization in Checkout Version 1

Using these options involves a solid understanding of Javascript. If you are not confident about what this is get an overview of Design for Jumpseller.

Javascript Library

The Jumpseller Javascript Library is included in every theme on every store, the most commonly used functions for the checkout process are:

  • countryListener: Country selector listener.
  • regionListener: Regions selector listener.
  • getCart: Get the information of the active shopping cart.
  • updateCart: Modify the active shopping cart.
  • clearCart: Deletes all elements of the active shopping cart.
  • addProductToCart: Adds any product or variant to the cart.
  • addCouponToCart: Adds coupon codes to the cart.
  • removeCouponFromCart: Removes coupons from cart.

Common Use Cases

Add a Surcharge

Add a an existing virtual product if a certain condition is true in the Checkout.

<script>
  // Variables
  var productId = 4482829 // The product id
  var variant1 = 8769517 // This is the variant that will go to the cart.
  // Conditions Function: This function returns true or false depending if the conditions are present or not on the checkout.
  var conditions = function(){
    return $("#payments_options input:checked").val() == "186648"; // Certain payment option is selected on this example
  }
  // Finds product_cart_id by searching the productId on the cart. The Product Cart Id is the ID of the instance of the product that is on the cart. This section shouldn't change.
  function find_order_product_id(cart_json) {
    var id = null;
    $.each(cart_json.products, function(i, order_product) {
      if (order_product.product_id == productId) {
        id = order_product.id;
      }
    });
    return id; // return order_product.id if found
  }
  // Function to add product to Cart (Removes if previously pressent). This section shouldn't change.
  var addProduct = function(data) {
    var order_product_id = find_order_product_id(data);
    var variants = data.products.map(product => { return product.variant_id })
    if(!variants.includes(parseInt(variant1))) {
      Jumpseller.updateCart(order_product_id, 0); // no payment cost on the order.
      Jumpseller.addProductToCart(productId, 1, {
        "Variant": variant1
      })
    }
  }
  // Function to remove product from cart. This section shouldn't change.
  var removeProduct = function(data) {
    var order_product_id = find_order_product_id(data);
    Jumpseller.updateCart(order_product_id, 0); // no payment cost on the order.
  }
  // Function that checks the conditions and adds or removes the virtual product. This section shouldn't change.
  function productInCart(){
    if(conditions()){
      Jumpseller.getCart({callback: addProduct})
    }else{
      Jumpseller.getCart({callback: removeProduct })
    }
  }
  // Applies function on condition changes and on page load. This part can change depending on the conditions.
  $("#checkout").change(productInCart)
  $(document).ready(productInCart)
</script>

Add a Date Picker

Date picker with some custom rules: Remove a list of holidays, requires Bootsrap Datepicker.

<script>
const today = new Date() // Defines Today
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1) // Defines Tomorrow
holidays = ["29/05/2020", "03/06/2020"] // Holidays to remove
$(document).ready(function() {
    $("#custom_input_field").datepicker({
        format: 'dd/mm/yyyy', // Chose your preffered date format.
        weekStart: 1, // Week starts Mondays.
        startDate: tomorrow,
        language: "es", // Choose a language.
        daysOfWeekDisabled: [0, 1], // Disables Sundays and Mondays.
        datesDisabled: holidays
    });
});
</script>