3

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 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 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 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');
3
  • Is there a reason you're not dynamically creating & destroying a child component to use as a modal for your form instead of creating the i-frame? I think you'd find that much more reliable.
    – crmprogdev
    Mar 7 '17 at 15:44
  • @crmprogdev - Yes, as i need to send this iframe along with the form data to securepaymentstest.cardconnect.com/hpp/payment, so it would process remaining steps of payment process. do you think if i build a child component for containing form data also do the work. pls refer this link: [developer.cardconnect.com/…
    – Venkatz
    Mar 8 '17 at 9:01
  • I'd rely on @ChristopheCoenraets answer. He knows his stuff and has given you good advice. I didn't realize the container component was in Developer Preview which is in all honesty, IMO, the "correct" way to do this.
    – crmprogdev
    Mar 8 '17 at 13:52
4

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 for details.

In Spring17, you can also use the Lightning Container Component, but be aware that it is in Developer Preview.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.