Introduction
Some users may find they want to create their own custom loader that will compliment their payment form. By creating a form and placing it within your active theme's woo-payment-gateway folder, you will be able to set the loader as active in your settings.
In order to display a loader with your payment form there are several steps you must follow.
- Ensure you have created the woo-payment-gateway directory in your active theme folders.
- Create a folder called loader.
- In the new loader folder, create a php file and give it a descriptive name.
- Add your custom html and styles to the file.
html
<div class="container">
<h1><?php _e('Processing Payment...', 'braintree-payments')?></h1>
</div>styles
body.bfwc-body .bfwc-new-payment-method-container .bfwc-payment-loader { background: rgba(0, 0, 0, .65); display: flex; display: -webkit-flex; justify-content: center; align-items: center; } body.bfwc-body .bfwc-new-payment-method-container .bfwc-container h1{ opacity: 0; color: #fff; font-size: 28px; animation-timing-function: ease-in-out; animation-name: custom-animation; animation-duration: 2.0s; animation-iteration-count: infinite; } @-webkit-keyframes custom-animation{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes custom-animation{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } }
- Save your file and navigate to the Checkout settings page of the plugin. On the load drop-down, you will see your custom loader as an option. Select your custom loader and save your settings.
- On any page that uses your payment form such as Checkout, Add Payment Method, etc you will see your custom loader when a payment method is being processed.
Comments
0 comments
Please sign in to leave a comment.