Create Payment Form

Introduction

This plugin offers advanced users the ability to create their own payment forms. The following guide will walk you through how to create a custom form and register it with the plugin.

1. Create a file in your active theme's custom-forms directory and give it a descriptive name. See our article on customizing a form for steps on adding the woo-payment-gateway folder to your theme.

   

2. Add your custom HTML to the file. The id attributes of your hosted field containers must match those shown in the screenshot.

   

   ID attributes of the hosted fields:

   credit card: #bfwc-card-number

   expiration date: #bfwc-expiration-date

   expiration month: #bfwc-expiration-month

   expiration year: #bfwc-expiration-year

   cvv: #bfwc-cvv

   postal code: #bfwc-postal-code

3. Create a CSS file that contains your custom styles for your form. Optionally, you can just include your CSS in your theme's custom.css file.

   

   .my-form-container, .my-form-container *{
   	box-sizing: border-box;
   }
   .my-form-container{
   	display: flex;
   	display: -webkit-flex;
   	flex-wrap: wrap;
   	background: #fff;
   	padding: 15px;
   	border-radius: 4px;
   }
   .my-form-container .field-container{
   	width: 100%;
   	margin-top: 20px;
   }
   body.bfwc-body .my-form-container .field-container label{
   	font-weight: 600;
   	letter-spacing: 0.6px;
   }
   .my-form-container .field-container .hosted-field{
   	height: 40px;
   	background: #fff;
   	border-radius: 4px;
   	padding-left: 10px;
   	border: 1px solid #bfbfbf;
   	transition: all ease-in 0.3s;
   }
   .my-form-container .field-container .hosted-field.braintree-hosted-fields-valid{
   	border-color: #5aa739;
   }
   
   

4. Register your custom form in your theme's functions.php file. To keep your changes safe from theme updates, it's recommended that you use your child theme or create one.
   label: This is the text that will appear in the admin section for the form.

   html: The relative path to your custom form. This path should point to your theme's custom-forms directory.

   css: The url to your css for your form. If you are using your theme's custom.css, then leave this option blank since custom.css is already loaded by Wordpress.

   external_css: url path to any externally hosted css that you want to use.

   javascript: custom JavaScript related to your form.

   default_styles: the json formatted styles that are used in the rendering of your hosted fields

   
   function add_my_custom_form( $custom_forms )
   {
   	$custom_forms [ 'my_custom_form' ] = array (
   			'label' => 'My Custom Form', 
   			'html' => 'custom-forms/my-custom-form.php', 
   			'css' => get_stylesheet_directory_uri() . '/my-custom-form.css', 
   			'external_css' => '', 
   			'javascript' => '', 
   			'default_styles' => '' 
   	);
           return $custom_forms;
   }
   
   add_filter( 'bwc_get_custom_forms', 'add_my_custom_form' );
   

5. Navigate back to your admin settings for custom forms. Refresh the page and you will see your custom form as an option now. Select the form and save your settings.

    

6. Verify that your custom form appears on your checkout page.