Iframe worldPay integration in website asp.net - asp.net

Currently we are with a major problem with iframe-worldpay integration.
I'm currently using worldpay template form, if the template form is placed in my website the form is visible however when I load the worldpay template form inside an iframe the worldpay template form visibility set to hidden.
Worldly doesn't provide a solution for this scenario, is there any work around?
EDIT
Sample Code
<script src="https://xx.xxxx/xx/worldpay.js"></script>
<script type="text/javascript">
function WorldPay() {
/*WorldPay-START*/
Worldpay.setClientKey('<%=WorldPayClientKey%>');//<YOUR_CLIENT_KEY>
Worldpay.reusable = false;
Worldpay.templateSaveButton = false;
Worldpay.useTemplate('aspnetForm', 'paymentDetails', 'inline', function (obj) {
//Form Submission here
});
/*WorldPay-END*/
}
</script>
<div id="paymentDetails"></div> //WORLDPAY iframe loads here
If this page is not inside an iframe world pay loads else it does not

Related

Hide Wordpress page contents when on Gravity Form inner pages

I have a multi-page gravity form. I've echoed it using do_shortcode within the theme template.
I have content on the same page below the gravity form (which resides inside the wp editor (the_content() wrapped in a div with its own class) ).
Is there a way for me to hide this content on page 2 or later of the gravity form? I would still like it to appear on page 1 of the gf form.
Here was the final code that worked for me:
<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(event, form_id, current_page){
jQuery('.page-content').toggle(current_page == 1);
});
</script>
I placed this in header.php
Lets say the class name of the div that is wrapping the_content() is "entry-content" and you want to hide it when the form is on second page. Add the following jQuery code to your theme and It will hide that div when someone goes to 2nd page. If they return back to 1st page of the form. It will show the content again.
<script type="text/javascript">// <![CDATA[
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
if(current_page == "1"){
jQuery('.entry-content').show();
} else {
jQuery('.entry-content').hide();
}
});
// ]]></script>
If you donot want to show the content even if they come back to page 1, then you can use the following code.
<script type="text/javascript">// <![CDATA[
jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
jQuery('.entry-content').hide();
});
// ]]></script>
Documentation : https://www.gravityhelp.com/documentation/article/gform_page_loaded/

Is it possible to make GTM Custom HTML tag not to insert new <script/> tags into the DOM?

There is a Single Page App with Facebook Pixel integrated via Google Tag Manager as Custom HTML tag.
<script>
(function() {
fbq({{Facebook Pixel Track Type}}, {{Facebook Pixel Event Name}});
})()
</script>
This tag is firing on every history change. And on every history change new
<script type="text/javascript" id="">fbq(google_tag_manager["GTM-XXXXXXX"].macro('gtm22'),google_tag_manager["GTM-XXXXXXX"].macro('gtm23'));</script>
is inserted into the DOM.
multiple script tags added to the page
The only way I found just remove executed script tags.
<script id='facebook-pixel-hit'>
(function() {
fbq({{Facebook Pixel Track Type}}, {{Facebook Pixel Event Name}});
setTimeout(function() {
var scriptTag = document.getElementById('facebook-pixel-hit')
if (scriptTag)
scriptTag.remove()
}, 500);
})()
</script>
but it doesn't look like a good solution.
Are there any ways to avoid adding multiple tags into the DOM?

How can I pass UTM parameters from URL to an iframe?

i have a link google adword :
http://example.com?utm_campaign=Testcam&utm_medium=referral&utm_source=Blog&utm_content=blogers&utm_term=Test
When visitor click the link above to navigate to mysite. And then he submit a Marketo form (non Marketo form for landing page on my site).
I follow this article to create Mkto form on my site: http://community.marketo.com/MarketoResource?id=kA650000000GsPJCA0 to make sure when it submit it will get values from url parameters.
My problem on here is : Normally, this form just submit to the server to handle register. Beside that, when this form submmited, i also need it submit to Marketo for tracking. That a reason, Marketo form will be submit via iframe.
When i submit marketo form, it will be target to this iframe.
So, i need pass the url parameter into iframe to make sure when submit form, hidden fields will automatic get values from url parameters. But on this iframe, as you can see, it haven't src. I had try to add this to iframe:
$("#mktoformhidden").src = window.location.href;
but it doesn't work well.
What's the iframe src should be on here?
Thanks,
I would do something like this! Just replace "URL HERE" with your iframe url and of course update the sizing that you need in BOTH loactions.
<noscript>
<iframe src="YOUR URL HERE" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>
<script type="text/javascript">
var iframeurl = 'YOUR URL HERE';
var params = window.location.search;
var thisScript = document.scripts[document.scripts.length - 1];
var iframe = document.createElement('iframe');
iframe.setAttribute('src', iframeurl + params);
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', 500);
iframe.setAttribute('type', 'text/html');
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('allowTransparency', 'true');
iframe.style.border = '0';
thisScript.parentElement.replaceChild(iframe, thisScript);
</script>
My guess is that an iframe is not the best solution here. The iframe can create all sorts of cross site scripting and permission based concerns.
Why not just use the new forms functionality in Marketo so you can drop the form either on a landing page or embed on your site (they come with an embed source code).
Also, the munchkin tracking code automatically grabs "query" parameters so you can use those in smart lists or reporting.
Like sahutchi said, embedding the actual Marketo form into your site could be the way to go. I opted for the iframe approach to get Marketo to automatically fill in fields based on mkt_tok. This might be possible using Marketo forms, but I wasn't able to figure it out a month or two ago.
Here's a decent overview of ways that you can integrate Marketo forms with your site: http://www.elixiter.com/marketo-landing-page-and-form-hosting-options/
If you insist on doing it the iframe way, here's my setup to pass query string params down to the embedded iframe:
This is in http://yourdomain.com/my-marketo-page:
<div class="lazy-iframe" data-src="//pages.yourdomain.com/MyMarketoPage.html" style="width: 960px; height: 1000px;">
</div>
And in some shared library (but you can have it on the same page, and simplify it a bit):
<script>
$(function() {
var $lazyIframe = $('.lazy-iframe');
if ($lazyIframe.length) {
var src = $lazyIframe.attr('data-src');
if (src) {
var $iframe = $('<iframe src="' + src + location.search + '"></iframe>');
$iframe.attr({
scrolling: 'no',
frameborder: 0
});
$lazyIframe.replaceWith($iframe);
}
}
});
</script>
Given that pages.yourdomain.com is your CNAME to your Marketo domain.
In my email, I just link to http://yourdomain.com/my-marketo-page, and Marketo will automatically add the mkt_tok for that email recipient to the end of that URL (becoming http://yourdomain.com/my-marketo-page?mkt_tok=BLAHBLAHBLAH). Then the iframe is constructed with the data-src URL and all of the parameters attached, and with no scrolling nor frameborder (up to you).

Implementing modalpopups as default alert in entire project

right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?

How to Force the page to be loaded only within an IFrame?

I have a set of asp.net pages which I wish they should only be accessible or loaded when they are loaded from an IFrame. If an attempt is made to access the pages directly via browser address bar then the page should not be displayed at all or display the message to the user.
I tried using cookies and sesions, but they are not that effective becuase once the cookie/session is created you can access the pages directly from browser, bypassing IFrame.
My development platform is asp.net 2.0+, vs2008, C# 2.0+
This is an example of one of the few times it is better to put the script in the head tag.
<html>
<head>
<title>sandBox</title>
<script type="text/javascript">
if (frameElement == null) {
//change location or close
window.location = "http://stackoverflow.com";
// or window.close();
}
</script>
</head>
<body>
content goes here
</body>
</html>
Try this inside your head tag:
<script>
if(window.self !== window.top); //inside an iframe
else window.location = "http://stackoverflow.com/" // Outside
</script>
Use this JS in the page to check whether it is in iframe or not.
if(window == window.top) {
//page is not in an iframe
}

Resources