+ Start a Discussion
VENKATESH BALLA 3VENKATESH BALLA 3 

how to post data of a form to an iframe in lightning component?

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');
NagendraNagendra (Salesforce Developers) 
Hi Venkatesh,

Please find the solution suggested solution from stack exchange community for same issue.

The browser's same-origin policy prevents a page from accessing content or code in another page loaded from a different origin (protocol + port + host).

You can use postMessage() to communicate between your Lightning Component and the content of the iframe. See this blog post(https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html) for details.

In Spring17, you can also use the Lightning Container Component(https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_overview.htm), but be aware that it is in Developer Preview.

Please mark this as solved so that it gets removed from the unanswered queue which results in helping others who are encountering similar issue.

Best Regards,
Nagendra.