Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

PayPal Smart Buttons

PayPal Smart Buttons Overview

PayPal Smart Buttons are available on Cornerstone versions 2.6.0+. Theme developers can enable Smart Buttons on a custom Stencil theme by adding settings to the config.json file. Merchants will have the ability to customize some style aspects of the PayPal payment buttons at checkout using Theme Editor/Store Design for stores that have PayPal powered by Braintree enabled. In order to make PayPal Smart Buttons customizable through Theme Editor/Store Design, a theme developer will need to make its customization properties available by adding its schema to the schema.json file.


Enable Smart Buttons on Your Stencil Theme

To enable Smart Buttons on Cornerstone versions pre-2.6.0 or Marketplace themes, append the following highlighted paymentbuttons settings to the settings object within your config.json file:

"settings" object
config.json
 "settings": {
    "...",
    "color_badge_product_sale_badges": "#007dc6",
    "color_text_product_sale_badges": "#ffffff",
    "color_hover_product_sale_badges": "#000000",
    "restrict_to_login": false,
    "swatch_option_size": "22x22",
    "social_icon_placement_top": false,
    "social_icon_placement_bottom": "bottom_none",
    "geotrust_ssl_common_name": "",
    "geotrust_ssl_seal_size": "M",
    "navigation_design": "simple",
    "price_ranges": true,
    "pdp-price-label": "",
    "pdp-sale-price-label": "Now:",
    "pdp-non-sale-price-label": "Was:",
    "pdp-retail-price-label": "MSRP:",
    "paymentbuttons-paypal-layout": "horizontal",
    "paymentbuttons-paypal-color": "gold",
    "paymentbuttons-paypal-shape": "pill",
    "paymentbuttons-paypal-size": "small",
    "paymentbuttons-paypal-label": "checkout",
    "paymentbuttons-paypal-tagline": true,
    "paymentbuttons-paypal-fundingicons": false
  },

Adding the above keys to the config.json file will enable Smart Buttons on a Stencil theme, however, the merchant will not be able to customize button styles through Theme Editor/Store Design unless setting configurations are added to schema.json.


Making Smart Buttons Customizable via Theme Editor/Store Design

Merchants who enable PayPal powered by Braintree can customize PayPal Smart Buttons via the Theme Editor or Store Design. As a theme developer, you can enable PayPal Smart Button customization via Theme Editor/Store Design, by appending the following object to the schema.json file:

Addition to schema.json file in order to enable Theme Editor/Store Design customization
schema.json
{
      "name": "Payment Buttons",
      "enable": "smartButtons",
      "settings": [
          {
            "type": "checkbox",
            "label": "Show Paypal tagline",
            "force_reload": true,
            "id": "paymentbuttons-paypal-tagline"
          },
          {
            "type": "checkbox",
            "label": "Show funding icons",
            "force_reload": true,
            "id": "paymentbuttons-paypal-fundingicons"
          },
          {
              "type": "select",
              "label": "Button color",
              "id": "paymentbuttons-paypal-color",
              "force_reload": true,
              "options": [
                {
                  "value": "gold",
                  "label": "Gold"
                },
                {
                  "value": "blue",
                  "label": "Blue"
                },
                {
                  "value": "silver",
                  "label": "Silver"
                },
                {
                  "value": "black",
                  "label": "Black"
                }
              ]
          },
          {
              "type": "select",
              "label": "Button shape",
              "id": "paymentbuttons-paypal-shape",
              "force_reload": true,
              "options": [
                {
                  "value": "pill",
                  "label": "Pill"
                },
                {
                  "value": "rect",
                  "label": "Rectangle"
                }
              ]
          },
          {
              "type": "select",
              "label": "Button size",
              "id": "paymentbuttons-paypal-size",
              "force_reload": true,
              "options": [
                {
                  "value": "small",
                  "label": "Small"
                },
                {
                  "value": "medium",
                  "label": "Medium"
                },
                {
                  "value": "large",
                  "label": "Large"
                },
                {
                  "value": "responsive",
                  "label": "Responsive"
                }
              ]
          },
          {
              "type": "select",
              "label": "Button content",
              "id": "paymentbuttons-paypal-label",
              "force_reload": true,
              "options": [
                {
                  "value": "checkout",
                  "label": "Paypal Checkout"
                },
                {
                  "value": "pay",
                  "label": "Pay with Paypal"
                },
                {
                  "value": "buynow",
                  "label": "Buy Now"
                },
                {
                  "value": "paypal",
                  "label": "Paypal"
                }
              ]
          },
          {
            "type": "select",
            "label": "Display style",
            "id": "paymentbuttons-paypal-layout",
            "force_reload": true,
            "options": [
              {
                "value": "horizontal",
                "label": "Show buttons horizontally"
              },
              {
                "value": "vertical",
                "label": "Show buttons vertically"
              }
            ]
Mutually Exclusive Options

Some customization options are mutually exclusive, meaning when used in combination with other customization options, the smart button button will completely fail to render on the page.

All mutually exclusive options are tied to the layout setting vertical. If your layout setting is vertical, take note of the following customization restrictions:

  • If you have a layout setting of vertical, you can not have a button size of small.
  • If you have a layout setting of vertical, you can not customize the branding of the button.
  • If you have a layout setting of vertical, you can not customize the tagline of the button.
  • If you have a layout setting of vertical, you can not customize the funding icons settings.

Additional Resources