Forem: Stephen Hilliard

Wallet Buttons on Product Detail Page

Stephen Hilliard — Mon, 09 Jan 2023 17:38:33 +0000

Wallet Buttons are now available on Product Detail Page with PayPal / Braintree yellow button & PayPal / Braintree Venmo! With Amazon, Apple, & Google Pay coming later in 2023!

As ecommerce methods change, so will we for the best possible platform experience. As of March 31, 2021, 30% of payments at the checkout come from digital wallets. From this, 50% of digital wallet payments come from a mobile device. With an upward trend in checkout conversions using digital wallets especially on mobile devices the platform is moving away from having the shopper to sign-in and towards the use of wallets/alternative payment methods.

These wallet buttons on the Product Detail Page, or PDP will enable customers to click the wallet. Rather than add-to-cart, to checkout that item with the wallet provider. This will create the opportunity to optimize for guest checkout by having the wallet buttons (also referred to payment buttons) at the product page.

What this Means for you:

One valuable outcome is speeding up the payment process where shoppers won't have to fill-in all the details on the checkout page. Another business benefit is optimizing the use of wallet buttons on the platform.
Provide merchants with the option to place wallet buttons on the product detail page as well as the option to configure the look (where applicable) of the buttons.
Provide system integrators and merchants with the option to add payment buttons to headless stores.
Merchants can easily configure the product page to have buttons without needing to write any custom code themselves.

I’m interested! What are my next steps?

The file structure of each theme can be unique; therefore, some knowledge of Stencil development may be required to render wallet buttons. Cornerstone 6.7.0+ supports wallet buttons by default; however, you can upgrade older themes to support wallet buttons by following the steps outlined in this article: (Disclaimer: Amazon/Apple/Google pay are mentioned in this article and documentation but will not be available till later in 2023)

Add wallet buttons feature to the theme settings:

To start working with wallet button implementation extra config updates should be added to the theme settings.
First of all we should make an ability to turn on / off the feature for the merchant. To make pay it possible we should add show_quick_payment_buttons configuration with default value to the config.json file and make an update to the schema.json file to create a checkbox for toggling the feature in Page Builder.

Adding show_quick_payment_buttons configuration with default value:
config.json

{
  ...,
  "settings": {
    ...,
    "show_quick_payment_buttons": true
  }
}

To make it turned on by default set "show_quick_payment_buttons": true.

Adding checkbox to Products section for toggling the Wallet buttons feature in Page Builder:

schema.json

{
  ...,
  {
    "name": "Products",
    "settings": [
      ...,
      {
        "type": "checkbox",
        "label": "Show quick payment buttons",
        "force_reload": true,
        "id": "show_quick_payment_buttons"
      },
      ...,
    ]
  }  
}

It should look like:

This settings option is responsible for providing an array of data to the theme.

Add an ability to set how many wallet buttons should be always visible on product page:

This option is responsible for a quantity of wallet buttons what should be always visible on the product page.

Adding paymentbuttons-number-of-buttons configuration with default value:
config.json

{
  ...,
  "settings": {
    ...,
    "paymentbuttons-number-of-buttons": 1
  }
}

Info: if the settings option is not provided, then only one button will be shown by default. The customer will have an access to another buttons by clicking on “More payment options“ button.

Adding base wallet buttons count section to the Page Builder into Payments section:
schema.json

{
  ...,
  {
    "name": "Payments",
    "settings": [
      ...,
      {
        "type": "heading",
        "content": "Quick payment buttons"
      },
      {
        "type": "select",
        "label": "Number of buttons always visible",
        "force_reload": true,
        "id": "paymentbuttons-number-of-buttons",
        "options": [
          {
            "value": 1,
            "label": "1"
          },
          {
            "value": 2,
            "label": "2"
          }
        ]
      },
      ...
    ]
  }  
}

It should look like:

Add sorting for the wallet buttons:
Merchants can have an ability to choose an order for rendering wallet buttons. To add sorting feature theme setting config should be updated.

Info: The default sorting is PayPal/BT button, ApplePay, GooglePay, AmazonPay, Venmo. There are 2 buttons displayed max and 4 buttons upon clicking "Show More", but the 5th button is not visible at all. Merchants can move the 5th button to the top of the list to make it visible.

Adding paymentbuttons-provider-sorting configuration with default value:
config.json

{
  ...,
  "settings": {
    ...,
    "paymentbuttons-provider-sorting": []
  }
}

Adding sorting wallet buttons component to the Page Builder into Payments section:
schema.json

{
  ...,
  {
    "name": "Payments",
    "settings": [
      ...,
      {
        "type": "heading",
        "content": "i18n.QuickPaymentButtons"
      },
      {
        "type": "sort",
        "label": "i18n.ProviderSortingOrderLabel",
        "id": "paymentbuttons-provider-sorting",
        "force_reload": true,
        "options": [
          {
            "value": "paypal",
            "label": "i18n.PayPalProviderSortingLabel",
            "enabledBy": "paypal"
          },
          {
            "value": "paypal-credit",
            "label": "i18n.PayPalCreditProviderSortingLabel",
            "enabledBy": "paypal-credit"
          },
          {
            "value": "paypal-venmo",
            "label": "i18n.PayPalVenmoProviderSortingLabel",
            "enabledBy": "paypal-venmo"
          },
          {
            "value": "googlepay",
            "label": "i18n.GooglepayProviderSortingLabel",
            "enabledBy": "googlepay"
          },
          {
            "value": "applepay",
            "label": "i18n.ApplepayProviderSortingLabel",
            "enabledBy": "applepay"
          },
          {
            "value": "amazonpay",
            "label": "i18n.AmazonProviderSortingLabel",
            "enabledBy": "amazonpay"
          }
        ]
      },
      ...
    ]
  }  
}

It should look like:

Info: Adding “heading” for a section can be skipped if it was added before:
schema.json

{
  ...,
  {
    "name": "Payments",
    "settings": [
      ...,
      {
        "type": "heading",
        "content": "i18n.QuickPaymentButtons"
      },
      ...
    ]
  }  
}

Adding wallet buttons to theme markup:
To render wallet buttons next code should be paste under the 'Add to cart' button on the Product details page:

{{#if this.with_wallet_buttons}}
  {{#if wallet_buttons}}
    <div class="your-class-for-wallet-buttons-list">
      {{{wallet_buttons}}}
    </div>
  {{/if}}
{{/if}}

It should look like:

And That's It! The wallet buttons should be always available to the customer except:

Wallet buttons should be hidden if the product details form is invalid.
Wallet buttons should be hidden if the product is not purchasable or out of stock.

If you would like to learn more about the use of Wallet buttons on your Product Detail Page please check out our Configuring Wallet Buttons Documentation. Also look for more to come in 2023 with the use of Wallet Buttons on the Product Detail Page. Including integrations with ApplePay, GooglePay, AmazonPay.

Introducing the Point of Sale Foundation

Stephen Hilliard — Thu, 05 Jan 2023 18:34:25 +0000

“Introducing an open-sourced point-of-sale app to unify the online and in-person payments experience with Stripe Terminal.”

BigCommerce previously announced the release of the Subscription Foundation and now the Point Of Sales Foundation. You may be asking what the Foundations are.

To help you with your ecommerce journey, BigCommerce is now offering a faster, more flexible path to custom commerce solutions for enterprises. The BigCommerce Foundations are open-sourced apps that provide a base for enterprise merchants to create highly customized customer experiences with less upfront development work. 70% built by BigCommerce, merchants can customize 30% on top of our foundations with the help of developers and third-party agencies. This foundation means you get access to a base layer of open-source technology that’s easy to build on, so you can acquire the right capabilities faster.

What is the POS Foundation?

**
In a nutshell, Point of Sale Foundations unifies your online and physical stores. By using Stripe Terminal as a point of sale solution you can connect your on-site and online business using Stripe’s POS hardware. Once connected, you can use the POS terminal to select products from your online store and accept in-person payments. This setup is great for ecommerce merchants who need to accept in-person payments.

POS Foundations accelerates your Stripe Terminal implementation by removing hundreds of hours of upfront work and offers a head start on building a customized POS solution that uses secure, pre-certified EMV card readers. Merchants can unify their online and offline channels and create experiences tailored to a variety of retail use cases and business models. With the POS Foundations, you also benefit from automatic reconciliation, cloud-based fleet management, and a single view of their customers and products.

What the POS Foundation Provides:

Merchant and employee onboarding experience
POS Front-end
PIN-entry login
Category, product, and option selection
Customer lookup and selection
Connected terminals selection
Integration to BigCommerce customer groups and promotions management (including automatic, customer group, order-based, and product-based discounts)
Integration into APIs and webhooks **

What the POS Foundation Gives You:

A faster path to POS customization
Enable your omnichannel vision by bringing your in-store experience together with ecommerce and other key channels
Less upfront development work so you can spend time on building standout in-store experiences
Expansive possibilities beyond the limits of off-the-shelf POS solutions

Foundations takes Stripe Terminal to the next level by removing hundreds of hours of upfront development work. The POS Foundation is a manual connector app that uses a store API account. Customize your in-person payment experience with an open source point-of-sale application. Easily set up, manage, and use pre-certified Stripe card readers that ensure secure transactions to unify your online and offline channels for all kinds of retail use cases and business models. BPOS WisePOS E card readers are industry-certified and end-to-end encrypted to manage payment card data. Order readers from the Stripe Dashboard and have them shipped to a location of your choice.

While currently only available in the U.S., Canada, United Kingdom, Ireland, France, Germany, and the Netherlands. We are looking to expand this foundation and would like to collaborate with interested agencies. If you would like to submit a PR for contribution, you can do so here. We also invite you to join other developers working with POS Foundations and the BigCommerce platform in our BigCommerceDevs Community space on Slack; if interested apply here.

Introducing the Subscription Foundation

Stephen Hilliard — Thu, 05 Jan 2023 18:27:05 +0000

BigCommerce & Stripe are bringing the Subscription Foundation for Store Owners and Developers convenience…

The Subscription Foundation is the latest open-source application out of the BigCommerce Foundations tool set that “helps you accelerate custom development of specific use cases by leapfrogging the foundational integration points.” The Subscription Foundation is a “subscribe and save” application framework that provides a template to scaffold custom subscription billing and invoicing solutions for your business or client. This framework will fast track builds of custom subscription experiences on the BigCommerce platform, potentially saving you hundreds of hours of development time with a user experience that fits nicely within the BigCommerce control panel.

This suite of open source apps provides enhanced functionality, which connects seamlessly with your store and Stripe account. With the resources included in Foundations, you can build customized subscription plans for your products and take advantage of Stripe’s POS terminals to unify your online and physical stores and connect multiple terminals at a single location.

How is this Done?

**
You can build customized subscription plans using the default integration with Stripe Billing, including authentication, merchant onboarding, subscription product management, subscription creation, and customer-facing subscription management, which can significantly help accelerate your development time. Subscription Foundation will utilize the Channels toolkit, and your custom subscription channel will appear in the Channel Manager view of a store’s control panel, alongside your other sales channels.

Subscription Foundation uses Stripe Connect so that your app can use one single connection to submit payments to the previously configured Stripe accounts of multiple BigCommerce merchants. The integration with Stripe and BigCommerce requires that the app uses two keys to issue charges: (1) the merchant-specific Stripe account’s public key and (2) the app-specific Stripe account’s secret key.

The reason two keys are needed is that for development, you will work with the two aforementioned Stripe accounts; the merchant account, which simulates a pre-existing account, and the App Account which you configure as the app’s dedicated Stripe Connect-enabled account. The two accounts will create the following benefits for the merchant:

The merchant can change the Stripe accounts they use without breaking the integration.
The merchant’s Stripe account stores all the entire shopper payment history, including subscription and one-time purchases.

Utilizing this type of approach, the Subscription Foundation creates Multi-tenant functionality. During installation, the app UI prompts the merchant to enter the keys for their store’s Stripe account so that the app can initiate an OAuth authorization code grant flow to link the merchant’s Stripe account to the app’s Stripe Connect-enabled account.

What this means

Build your ideal customer experience, and stand out from competition using Foundations to customize core commerce elements.
Win enterprise merchants by offering unique commerce solutions that natively work with BigCommerce and differentiate your services.
Get a head start on building your own subscription and POS apps with open sourced apps that eliminate some slower parts of the development process.

When you use Foundations, you’re not limited to the capabilities in off-the-shelf products that may not be up to meeting complex needs. With Stripe, we make it easier for you to build customized, globally scalable solutions for your specific needs without starting from scratch, so you can create your ideal customer experience while saving hundreds of hours in development work.

What’s next?

**
If you want to learn more about how Foundations, powered by BigCommerce and Stripe support your business and customers visit https://www.bigcommerce.com/foundations/ to learn more about Foundations for Stripe Billing and Foundations for Stripe Terminal. With Foundations start turning your biggest ideas into reality, and be sure to check back often for the latest updates.

BigCommerce Storefronts Now Support Preload/Early Hints

Stephen Hilliard — Thu, 05 Jan 2023 16:58:01 +0000

BigCommerce Storefronts now support Preload/Early Hints features with Chrome’s addition of supporting HTTP Early Hints.

When you open a web page, the browser requests the HTML document from a server, parses its contents, and submits separate requests for any referenced resources. Developers already know about all the resources a web page needs and which of them are the most important. With that knowledge the developer can request the critical resources ahead of time and speed up the loading process by adding a tag with rel=”preload” to the head of your HTML document: The browser caches preloaded resources so they are available immediately when needed in subsequent requests.

This allows a browser to start downloading critical assets (like CSS/JS files, images, fonts, etc.) very early in the request lifecycle. Which can result in a material improvement in load times for shoppers on stencil storefronts, as they do not have to wait to receive the HTML of the page in order to download large assets. This can significantly improve first paint by pre-populating the browser cache with these assets, and can reduce the impact of a slow response time.

How preloading works:

**
Preloading is best suited for resources typically discovered late by the browser. By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. For example, font is defined in the stylesheet with a @font-face rule. The browser loads the font file only after it has finished downloading and parsing the stylesheet. Preloading these resources ensures they are fetched before the CSS files have downloaded.

The critical request chain represents the order of resources that are prioritized and fetched by the browser. Lighthouse identifies assets that are on the third level of this chain as late-discovered. A word of caution: unused preloads trigger a Console warning in Chrome, approximately 3 seconds after the load event, that’s why it’s important to use preload sparingly and only preload the most critical resources. Preloading is a powerful performance optimization that has an effect on loading speed. Such optimizations can lead to changes in your site’s Core Web Vitals, and it’s important to be aware of them.

What this means for you:

Provide theme developers with tools to mark critical theme assets for preloading and the ability to nominate high-priority resources.
Automatically preload critical assets, such as Script Manager scripts, payment provider JS, analytics JS.
FCP reduction for first page load.
Faster storefronts with better conversions as a business benefit creating happier merchants with better growth adjustments. If you want to read more you can check out our documentation here: Early Hints & handlebars helpers reference early hints and cdn