I have a requirement in Lightning community, from a lightning
component the user has a button to make payment -
- when clicked on that button, a lightning dialog will be displayed, initially this dialog box is hidden, after clicking "make payment " button, i am enabling dialog to show
-then user selects card type - like master, visa etc and click to proceed button
-this button and cardtype selection are included inside a <form> that has other information required to pass for payment gateway url.
-after proceed button is clicked, in the pop - user has to enter required info like card no, cvv, exp etc.-that shows a button to complete payment.
***************************************************
My problem is after clicking on the proceed button, the <form> is not being posted to the iframe i am using to redirect the user for processing payment. 
Can somebody solve or suggest a better way to handle this ? 

Below is my code written
*******************************************
LIGHTNING COMPONENT CODE:
*****************************************************
<div class="slds">
        <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="modaldialog">
            <div class="slds-modal__container">
                <div class="slds-modal__header slds-theme--info">
                    <button class="slds-button slds-button--icon-inverse slds-notify__close" 
                            onclick="{!c.hidePopup}" title="Close Pop-Up">
                        <span class="slds-assistive-text">
                            Close
                        </span>
                        <b>X</b>
                    </button>
                    <h2 class="slds-text-heading--medium">Make Payment</h2>
                </div>
                <div class="slds-modal__content slds-p-around--small">
                    <div class="font-size-text-xx-small">
                         <p> 
                               SAMPLE TEXT
                        </p>
                    </div>
                    <div aura:id="payment" class="slds-visible">
                        <b>
                            Your billable Amount: &nbsp;&nbsp; 
                        </b>
                        <p class="slds-truncate">
                            <ui:outputCurrency aura:id="mamount" value="141.20"/>
                        </p>
                    </div>
                    <br/>
                    <form target="<ID OF IFRAME>" action="https://securepaymentstest.cardconnect.com/hpp/payment/?5" method="post" 
                      name="cardconnectForm" aura:id="cardconnectForm">
                    <input type="hidden" name="ccId" value="<STANDARD CCID TO BE PASSED TO THIS PAYMENT GATEWAY PAGE>" id="ccId"/>
                    <input type="hidden" name="ccSite" value="gewater" />
                    <input type="hidden" name="ccCssUrl" value="<A URL GENERATED IN OUR SFDC>"/>
                    <input type="hidden" name="ccPostbackUrl" value="<A URL GENERATED IN OUR SFDC>" />
                    <input type="hidden" name="ccDisplayAddress" value="0" />
                    <input type="hidden" name="ccDisplayCvv" value="1" />
                    <input type="hidden" name="ccCancel" value="0" />
                    <input type="hidden" name="ccAmount" id="amount" value="141.20"/>                                    
                    <input type="hidden" name="ccname" id="name" value="testingggg"/>                           
                    <input type="hidden" id="invoiceNumber" name="ccOrderId" />
                    <input type="hidden" name="ccCapture" value="1" /><!-- we want to not pull funds from card, just see if it's authorized for it -->
                    <input type="hidden" name="ccTokenize" value="1" /><!-- we need the token and the token and other info needs to be saved to CC in the order object so that GE can get it from SAP -->                         
                    <div class="slds-align--absolute-left">
                        <ui:inputSelect aura:id="cardType" multiple="false" class="slds-visible">
                            <ui:inputSelectOption text="Select a card..." label="Select a card..." value="true"/>
                            <ui:inputSelectOption text="Mastercard" label="Mastercard"/>
                            <ui:inputSelectOption text="Visa" label="Visa"/>
                            <ui:inputSelectOption text="American Express" label="American Express"/>
                        </ui:inputSelect>
                    </div>
                    <br/>
                    <div style="text-align:right">   
                        <ui:button aura:id="proceedBtn" buttonTitle="Click to Continue for Completing Payment Process." 
                                   class="slds-visible actionBtn" label="Proceed" press="<AFTER CLICKING ON THIS BUTTON, I AM MAKING TO SHOW IFRAM >"/>
                    </div>
                </form>
                 <iframe aura:id="<ID OF IFRAME>" name="<NAME OF IFRAME THAT IS SAME AS ID>" class="slds-hide"
                        style="width: 100%; height: 405px;" src="https://securepaymentstest.cardconnect.com/hpp/payment/?5" />  
                </div>
            </div>
        </div>
    </div>
    
    *************************************
    lightning component javascript code to show frame and to add data to iframe from <form> body
     var iframeBody = $('#iframeCheckout').contents().find('body');
    var styleTag = iframeBody.append($('#cardconnectForm'));
    
    compId = component.find("iframeCheckout");
    $A.util.removeClass(compId, 'slds-hide');
    $A.util.addClass(compId, 'slds-visible');

I have a requirement in Lightning community, from a lightning
component the user has a button to make payment -
- when clicked on that button, a lightning dialog will be displayed, initially this dialog box is hidden, after clicking "make payment " button, i am enabling dialog to show
-then user selects card type - like master, visa etc and click to proceed button
-this button and cardtype selection are included inside a <form> that has other information required to pass for payment gateway url.
-after proceed button is clicked, in the pop - user has to enter required info like card no, cvv, exp etc.-that shows a button to complete payment.
***************************************************
My problem is after clicking on the proceed button, the <form> is not being posted to the iframe i am using to redirect the user for processing payment. 
Can somebody solve or suggest a better way to handle this ? 

Below is my code written
*******************************************
LIGHTNING COMPONENT CODE:
*****************************************************
<div class="slds">
        <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="modaldialog">
            <div class="slds-modal__container">
                <div class="slds-modal__header slds-theme--info">
                    <button class="slds-button slds-button--icon-inverse slds-notify__close" 
                            onclick="{!c.hidePopup}" title="Close Pop-Up">
                        <span class="slds-assistive-text">
                            Close
                        </span>
                        <b>X</b>
                    </button>
                    <h2 class="slds-text-heading--medium">Make Payment</h2>
                </div>
                <div class="slds-modal__content slds-p-around--small">
                    <div class="font-size-text-xx-small">
                         <p> 
                               SAMPLE TEXT
                        </p>
                    </div>
                    <div aura:id="payment" class="slds-visible">
                        <b>
                            Your billable Amount: &nbsp;&nbsp; 
                        </b>
                        <p class="slds-truncate">
                            <ui:outputCurrency aura:id="mamount" value="141.20"/>
                        </p>
                    </div>
                    <br/>
                    <form target="<ID OF IFRAME>" action="https://securepaymentstest.cardconnect.com/hpp/payment/?5" method="post" 
                      name="cardconnectForm" aura:id="cardconnectForm">
                    <input type="hidden" name="ccId" value="<STANDARD CCID TO BE PASSED TO THIS PAYMENT GATEWAY PAGE>" id="ccId"/>
                    <input type="hidden" name="ccSite" value="gewater" />
                    <input type="hidden" name="ccCssUrl" value="<A URL GENERATED IN OUR SFDC>"/>
                    <input type="hidden" name="ccPostbackUrl" value="<A URL GENERATED IN OUR SFDC>" />
                    <input type="hidden" name="ccDisplayAddress" value="0" />
                    <input type="hidden" name="ccDisplayCvv" value="1" />
                    <input type="hidden" name="ccCancel" value="0" />
                    <input type="hidden" name="ccAmount" id="amount" value="141.20"/>                                    
                    <input type="hidden" name="ccname" id="name" value="testingggg"/>                           
                    <input type="hidden" id="invoiceNumber" name="ccOrderId" />
                    <input type="hidden" name="ccCapture" value="1" /><!-- we want to not pull funds from card, just see if it's authorized for it -->
                    <input type="hidden" name="ccTokenize" value="1" /><!-- we need the token and the token and other info needs to be saved to CC in the order object so that GE can get it from SAP -->                         
                    <div class="slds-align--absolute-left">
                        <ui:inputSelect aura:id="cardType" multiple="false" class="slds-visible">
                            <ui:inputSelectOption text="Select a card..." label="Select a card..." value="true"/>
                            <ui:inputSelectOption text="Mastercard" label="Mastercard"/>
                            <ui:inputSelectOption text="Visa" label="Visa"/>
                            <ui:inputSelectOption text="American Express" label="American Express"/>
                        </ui:inputSelect>
                    </div>
                    <br/>
                    <div style="text-align:right">   
                        <ui:button aura:id="proceedBtn" buttonTitle="Click to Continue for Completing Payment Process." 
                                   class="slds-visible actionBtn" label="Proceed" press="<AFTER CLICKING ON THIS BUTTON, I AM MAKING TO SHOW IFRAM >"/>
                    </div>
                </form>
                 <iframe aura:id="<ID OF IFRAME>" name="<NAME OF IFRAME THAT IS SAME AS ID>" class="slds-hide"
                        style="width: 100%; height: 405px;" src="https://securepaymentstest.cardconnect.com/hpp/payment/?5" />  
                </div>
            </div>
        </div>
    </div>
    
    *************************************
    lightning component javascript code to show frame and to add data to iframe from <form> body
     var iframeBody = $('#iframeCheckout').contents().find('body');
    var styleTag = iframeBody.append($('#cardconnectForm'));
    
    compId = component.find("iframeCheckout");
    $A.util.removeClass(compId, 'slds-hide');
    $A.util.addClass(compId, 'slds-visible');