When multiple payment methods are available in Checkout, end users are typically required to select their preferred option before completing a purchase. In some cases, you may want to streamline the checkout experience by automatically selecting a specific payment method by default.
This article explains how to customize the Checkout to pre-select a payment method using a custom script. In the example below, the script automatically selects Stripe Elements (stripe_elements) when checkout loads.
Important: Clients who have customized their Payment Components template should review and follow the guidance in this article to update their templates accordingly. This will help ensure compatibility with ongoing Piano enhancements and prevent potential disruptions as Piano continues to release new functionality.
In the Publisher Dashboard, go to Manage → Templates → System → Payment Components.
Find <script type="text/ng-template" id="/widget/checkout/component/partials/payment-method-selector-component.html">
Place the following code immediately after the <script> tag. Although this location is recommended by Piano, other placements within the template may also be suitable.
<div custom-script>
var scope = angular.element('div[payment-method-selector-component]').scope();
scope.selectPaymentMethodByIdentifier('stripe_elements');
</div>
Full example code:
<script type="text/ng-template" id="/widget/checkout/component/partials/payment-method-selector-component.html">
<div custom-script>
var scope = angular.element('div[payment-method-selector-component]').scope();
scope.selectPaymentMethodByIdentifier('stripe_elements');
</div>
<div desktop>
<h4 class="select-payment-options">
<t>Select a payment method</t>
</h4>
</div>
<div mobile>
<h4 class="select-payment-options--mobile">
<t>Select a payment method</t>
</h4>
</div>
<div class="payment-options-wrapper-new">
<div class="payment-methods-container">
<button type="button"
class="payment-method-tile"
role="radio"
aria-checked="{{pm.selected ? 'true' : 'false'}}"
ng-repeat="pm in paymentMethods | orderBy: $index"
ng-click="selectPaymentMethod(pm)"
ng-class="{'payment-method-selected': pm.selected}"
tabindex="{{$index === 0 ? '0' : '-1' }}"
aria-label="{{'Payment method ' + pm.name}}"
>
<span class="payment-button {{pm.identifier}}">
<span class="item payment-method-items-inner-container">
<span ng-if="!pm.customIconURL" class="payment-method-logo {{pm.identifier}} {{getCurrencyClass()}}" aria-hidden="true"></span>
<img ng-if="pm.customIconURL" class="payment-method-custom-logo" src="{{pm.customIconURL}}" alt="payment method custom logo">
<span ng-if="pm.customTitle" class="payment-method-title">
{{pm.customTitle}}
</span>
</span>
</span>
<span class="payment-method-selection-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</script>