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.
Go through the express checkout until you get to the payment information. It should look something like this:
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:
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
Open the checkout_express.html file using WebDAV or the design mode feature in your control panel.
Add the following script at the bottom of the file (before the </body> element):Replace checkout_provider_checkout_paypal with your specific payment ID.
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.
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!