Wallet Buttons on Product Detail Page

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.