You may want to give the user the option to pay by Check or use a Credit card. Having that option requires the use of Conditional Rules on select fields on the last page. You first have to create the option field, then apply the conditional rule to fields that you want to appear (and not appear) depending on the option that is selected.
(1) Create a field for Payment Option that is a Select Options field type, and select Add.
(2) Add a title to the field, and create the options using the manual entry option. It is the text you use no the left side of the pipe symbol (|) that you will need to remember, so add it to your notes. In this case, it is Check and Credit.
(3) Set your Display options and Save the Component.
(4) Depending on where you added the component, you may need to move it. This option field needs to be after the total but before any fields that the user needs to see if they select one or the other option for payment. If you need to move the field, click and drag it into place using the 4way arrow drag arrow tool. Then Save the form before continuing.
(5) Next, create a Mark Up field that gives the users the directions and information for sending in a check. Include who to make the check out to, and if they should put info in the memo line, and the mailing address.
(6) Before you save the markup, set the Conditional Rule that this information should only appear when a user selects payment by check. Open the Conditional Rules link, Select the ‘Payment Option’ component (the field you created to ask the question about payment options), select ‘Is one of’ and enter the text you used for the check payment option on the left side of the pipe symbol. This information is case and character sensitive it must be the exact text you used in the options.
(7) Select Save component.
(8) Test that the conditional rule is working by going to View and on the last page, select Check for payment option. These instructions should not appear on that page until that option has been selected.
(9) Next, you will want to add a fieldset for the Billing information, followed by adding the payment information. Information from the Billing Fieldset will be sent to the payment processor for verification.
(10) Create a fieldset and title it ‘Billing Information’. The Billing information the user enters must match that of their credit card account. So add helper text in the Billing Information Description that tells the user to “This information must match the information on file with your credit card account.” You can keep the default settings for the fieldset type no need to have it collapsible or collapsed by default, and don’t hide the label so that the title “Billing Information’ will show to the user.
(11) Before you save the Billing Information Fieldset, add the Conditional Rule that it only shows if the user selects the Credit Payment Option. Then Save the component.
(12) Test the conditional rule by selecting Credit as the payment option, and you should not see the ‘Billing Information” field set title unless Credit has been selected.
(13) Now you are ready to add the Billing Information fields to this fieldset. The Billing information should include the following fields: ● First Name ● Last Name ● Primary Street Address ● Secondary Street Address ● City ● State (can be the prebuilt select options be sure to choose the Listbox Display) ● Zip Code NOTE: DO NOT COLLECT CREDIT CARD INFORMATION (Card Number, Security Code, Expiration Date) using Textfields or any other fields on the form. The next steps outline the field type used to collect the payment information. Your site requires a Payment Processor and installation of a Payment Processor module on your website in order to take online payments securely. You do not need to set the Conditional Rules on each of these fields as long as they are within the Billing Information fieldset to include these fields in a fieldset, each of these fields should be indented beneath the Billing Information fieldset. Use the 4way arrow tool to drag each field within the Billing Information Fieldset.
(14) Drag the new component field to the end of far edge of the webform table, and enter ‘Payment Information’ for the title, then select the Payment Information option. Add it to the form.
(15) NOTE: You must have a Payment Processor (i.e. Authorize.net or Paypal) setup on your site prior to being able to make payments. If you do not see a payment processor under the Payment method option, you do not have a Payment Processor installed on your website, and you need to contact Jvillage Support once you have an account established with a Payment Processor. Select your Payment Processor in the Payment method option. (16) In the Price Component, select the option that you created for the Grand Total with Fee. This is the amount that will be sent to the payment processor and to the user’s credit card company for payment. If you did not include a total with a fee on your form, then select the Total amount option. If you do not select a total from the Price components, no amount will be sent to the payment processor/credit card company there will be no charge, and an error on the form may occur.
(17) Under the Other Component Mappings you can keep the default settings that will collect the User’s Email, First and Last Names, and depending on the payment processor, you may need to collect the Billing Information that is sent. (18) In order for the Payment Information to only appear if the user selected Credit Card option, set the Conditional Rules for the Payment Option component, Is one of, and enter ‘Credit ’ (or whatever options you typed in for the Credit Card option.)
(18) In order for the Payment Information to only appear if the user selected Credit Card option, set the Conditional Rules for the Payment Option component , Is one of, and enter ‘Credit ’ (or whatever options you typed in for the Credit Card option.)