How To Set A Default Payment Method On The Checkout Page

A while back we covered how to change the order of the payment methods in Bigcommerce and today I want to show you how to automatically select a default payment method.

In the standard template none of the payment options are selected which forces a customer to make another choice before being able to checkout. This modification allows you to preselect a payment method and nudge your customers toward your favorite payment provider.

Instructions

1. Go through the express checkout until you get to the payment information. It should look something like this:

   

2. Choose the payment method that you want to be selected by default. In my case, I chose PayPal. Then right click on the selected payment method and pick the Inspect Element option from the menu:

   

   Look for the code inside of the development console:

   

3. Copy the id of the radio button as shown in this screen shot:

   

   In my case it is checkout_provider_checkout_paypal but it will be different in your store depending on the payment method that you picked. To save you some time I compiled a short list of popular payment methods along with the IDs:

   Payment Method	Payment ID
   Pay in store	checkout_provider_checkout_instore
   Bank Deposit	checkout_provider_checkout_bankdeposit
   Authorize.net	checkout_provider_checkout_authorizenet
   Payleap	checkout_provider_checkout_payleap
   Stripe	checkout_provider_checkout_stripe

   Now that you have the payment method ID you are ready to insert the Javascript code into the page.

4. Open the checkout_express.html file using WebDAV or the design mode feature in your control panel.

5. Add the following script at the bottom of the file (before the </body> element):

   Replace checkout_provider_checkout_paypal with your specific payment ID.

   
   <script type="text/javascript">
           $(document).ajaxComplete(function(event, request, settings) {
               $("#checkout_provider_checkout_paypal").trigger("click");
               $("#uniform-checkout_provider_checkout_paypal span").addClass("checked");
           });
   </script>
   
   

6. Save your changes and then replace the checkout_express.html file on the WebDAV server with the modified one.

How Does It Work?

The code is pretty simple once you get the payment ID from the checkout page. The first line of the code makes sure that the code runs after the Ajax request is completed. Then the code triggers a click on the specific radio button for the payment method based on the ID. The last line is used to visually check the radio button. You might not even need that line because it is specific to themes that use the uniform jQuery library.

Troubleshooting

If the code is not working at all... then look for Javascript errors on the checkout page using your browser's dev console. You will need to fix the Javascript errors before the code can function.

If there are no errors on the checkout page, bu the code still is not working... then double-check that you replaced the default payment ID with your own ID (redo Step #5).

Thanks for reading, and hope you found the modification useful!