Develop Reference

Heartland payment integration iframe refresh on react state update

I am integrating heartland as a payment gateway in my application.
Here's my code.
When I try to update the zip code it will rerender and update the amount.
I want to update the value of fields: submit: value of embedded HPS.
Currently, it's in componentDidUpdate so it is now duplicating the fields as well.
How update the value and keep all the state including card, CVV, etc details?
I don't have any state value of these fields and once I somehow rerender the component it will vanish the field values.
Heartland Documentation
componentDidUpdate() {
console.log('render')
this.state.hps = new Heartland.HPS({
publicKey: 'pkapi_cert_jKc1FtuyAydZhZfbB3',
type: 'iframe',
// Configure the iframe fields to tell the library where
// the iframe should be inserted into the DOM and some
// basic options
fields: {
cardNumber: {
target: 'iframesCardNumber',
placeholder: '•••• •••• •••• ••••'
},
cardExpiration: {
target: 'iframesCardExpiration',
placeholder: 'MM / YYYY'
},
cardCvv: {
target: 'iframesCardCvv',
placeholder: 'CVV'
},
submit: {
value: `Pay ${this.state.amount}` || "Pay 0",
target: 'iframesSubmit'
}
},
// Collection of CSS to inject into the iframes.
// These properties can match the site's styles
// to create a seamless experience.
style: {
'input': {
'background': '#fff',
'border': '1px solid',
'border-color': '#bbb3b9 #c7c1c6 #c7c1c6',
'box-sizing': 'border-box',
'font-family': 'serif',
'font-size': '16px',
'line-height': '1',
'margin': '0 .5em 0 0',
'max-width': '100%',
'outline': '0',
'padding': '0.5278em',
'vertical-align': 'baseline',
'height' : '50px',
'width' : '100% !important'
},
'#heartland-field': {
'font-family':'sans-serif',
'box-sizing':'border-box',
'display': 'block',
'height': '50px',
'padding': '6px 12px',
'font-size': '14px',
'line-height': '1.42857143',
'color': '#555',
'background-color': '#fff',
'border': '1px solid #ccc',
'border-radius': '0px',
'-webkit-box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
'-webkit-transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
'-o-transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
'width' : '100%'
},
'#heartland-field[name=submit]': {
'background-color':'#36b46e',
'font-family':'sans-serif',
'text-transform':'uppercase',
'color':'#ffffff',
'border':'0px solid transparent'
} ,
'#heartland-field[name=submit]:focus': {
'color':'#ffffff',
'background-color':'#258851',
'outline':'none'
} ,
'#heartland-field[name=submit]:hover': {
'background-color':'#258851'
} ,
'#heartland-field-wrapper #heartland-field:focus' : {
'border':'1px solid #3989e3',
'outline':'none',
'box-shadow':'none',
'height':'50px'
},
'heartland-field-wrapper #heartland-field' : {
'height':'50px'
},
'input[type=submit]' : {
'box-sizing':'border-box',
'display': 'inline-block',
'padding': '6px 12px',
'margin-bottom': '0',
'font-size': '14px',
'font-weight': '400',
'line-height': '1.42857143',
'text-align': 'center',
'white-space': 'nowrap',
'vertical-align': 'middle',
'-ms-touch-action': 'manipulation',
'touch-action': 'manipulation',
'cursor': 'pointer',
'-webkit-user-select': 'none',
'-moz-user-select': 'none',
'-ms-user-select': 'none',
'user-select': 'none',
'background-image': 'none',
'border': '1px solid transparent',
'border-radius': '4px',
'color': '#fff',
'background-color': '#337ab7',
'border-color': '#2e6da4'
},
'#heartland-field[placeholder]' :{
'letter-spacing':'3px'
},
'#heartland-field[name=cardCvv]' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/cvv1.png?raw=true) no-repeat right',
'background-size' :'63px 40px',
},
'input#heartland-field[name=cardNumber]' : {
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-inputcard-blank#2x.png?raw=true) no-repeat right',
'background-size' :'55px 35px'},
'#heartland-field.invalid.card-type-visa' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-visa#2x.png?raw=true) no-repeat right',
'background-size' :'83px 88px',
'background-position-y':'-44px'
},
'#heartland-field.valid.card-type-visa' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-visa#2x.png?raw=true) no-repeat right top',
'background-size' :'82px 86px'
},
'#heartland-field.invalid.card-type-discover' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-discover#2x.png?raw=true) no-repeat right',
'background-size' :'85px 90px',
'background-position-y' : '-44px'
},
'#heartland-field.valid.card-type-discover' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-discover#2x.png?raw=true) no-repeat right',
'background-size' :'85px 90px',
'background-position-y' : '1px'
},
'#heartland-field.invalid.card-type-amex' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-savedcards-amex#2x.png?raw=true) no-repeat right',
'background-size' :'50px 90px',
'background-position-y':'-44px'
},
'#heartland-field.valid.card-type-amex' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-savedcards-amex#2x.png?raw=true) no-repeat right top',
'background-size' :'50px 90px'
},
'#heartland-field.invalid.card-type-mastercard' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-mastercard.png?raw=true) no-repeat right',
'background-size' :'62px 105px',
'background-position-y':'-52px'
},
'#heartland-field.valid.card-type-mastercard' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-mastercard.png?raw=true) no-repeat right',
'background-size' :'62px 105px',
'background-position-y':'-1px'
},
'#heartland-field.invalid.card-type-jcb' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-jcb#2x.png?raw=true) no-repeat right',
'background-size' :'55px 94px',
'background-position-y':'-44px'
},
'#heartland-field.valid.card-type-jcb' :{
'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-jcb#2x.png?raw=true) no-repeat right top',
'background-size' :'55px 94px',
'background-position-y':'2px'
},
'input#heartland-field[name=cardNumber]::-ms-clear' : {
'display':'none'
}
},
// Callback when a token is received from the service
onTokenSuccess: function (resp) {
alert('Here is a single-use token: ' + resp.token_value);
},
// Callback when an error is received from the service
onTokenError: function (resp) {
alert('There was an error: ' + resp.error.message);
},
// Callback when an event is fired within an iFrame
onEvent: function (ev) {
console.log(ev);
}
});
}

Draw a line after animation of each slice in a Donut - Chartistjs

I am trying to draw a "tooltip" line on completion of each slice animation using chartistjs.
Current situation
JSFiddle
Goal
I am using chartistjs library to animate the donut. I am looking for drawing line on completion of each slice (svg animate) in the chart.on('draw') function.
Looking for a line after each slice. Any recommendations?
Gist of code
var chart = new Chartist.Pie('#inner-donut', {
series: [15, 20, 30, 25],
labels: [1, 2, 3, 4]
}, {
donut: true,
showLabel: false,
width: 800,
total: 90,
height: 400,
chartPadding: 70,
plugins: [
Chartist.plugins.fillDonut({
items: [{
content: '',
offsetY : -60,
offsetX: -200
}, {
content: ''
}]
}),
]
});
chart.on('draw', function(data) {
if(data.type === 'slice') {
var pathLength = data.element._node.getTotalLength();
data.element.attr({
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
});
var animationDefinition = {
'stroke-dashoffset': {
id: 'anim' + data.index,
dur: 1000,
from: -pathLength + 'px',
to: '0px',
easing: Chartist.Svg.Easing.easeOutQuint,
fill: 'freeze'
},
};
if(data.index !== 0) {
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
}
data.element.attr({
'stroke-dashoffset': -pathLength + 'px'
});
data.element.animate(animationDefinition, false);
}
});

Cannot read property 'getData' of undefined

I am trying to produce the value of chart on top of the bars but I am getting the errormessage: Warning: Cannot read property 'getData' of undefined.
Here is my code , I have already declared the variable P, I am using XAMPP and my browser supports clipboard API.
please if anybody can help me on this.
var rlm = <?php echo json_encode($rlm_data); ?>;
var rlm_list = <?php echo json_encode($rlm_list); ?>;
function get_graph_datarlm(rlm,rlm_list){
var arlm = [];
for (var i = 1; i < rlm_list.length; i++)
arlm.push([i, rlm[rlm_list[i]][0]]);
var brlm = [];
for (var i = 1; i < rlm_list.length; i++)
brlm.push([i, rlm[rlm_list[i]][1]]);
var datarlm = [
{
label: "XaktaMissingTickets",
data: arlm,
bars: {
show: true,
barWidth: 0.6,
fill: true,
lineWidth: 0,
order: 0,
fillColor: "#5b9bd5",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
//color: "#ffffff"
color: "#5b9bd5"
},
{
label: "TotalTickets",
data: brlm,
bars: {
show: true,
barWidth: 0.6,
fill: true,
lineWidth: 0,
order: 1,
fillColor: "#ed7d31",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
//color: "#ffffff"
color: "#ed7d31"
}
];
return datarlm;
}
$(document).ready(function() {
var p;
function plot_bar_chart(rlm,rlm_list){
var trlm = [];
for (var i = 0; i < rlm_list.length; i += 1)
trlm.push([i, rlm_list[i]]);
//console.log( t87r );
var p = $.plot("#placeholderrlm", get_graph_datarlm(rlm,rlm_list), {
xaxis: {
min: 0,
max: rlm_list.length,
ticks: trlm,
tickLength: 0,
//labelWidth: 15,
labelAlign: 'center',
axisLabelPadding: 5,
//font: { size: 14, color: 'black' }
},
yaxis: {
axisLabel: 'Number of Projects',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 30,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {
shadowSize: 1,
}
});
}
plot_bar_chart(rlm,rlm_list);
function showTooltip(x, y, contents, z) {
$('<div id="flot-tooltip">' + contents + '</div>').css({
top: y - 60,
left: x + 30,
'border-color': z,
}).appendTo("body").fadeIn(200);
}
$("#placeholderrlm").bind("plothover", function (event, pos, item) {
var previousPoint;
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#flot-tooltip").remove();
var originalPoint;
if (item.datapoint[0] == item.series.data[0][3]) {
originalPoint = rlm_list[1];
}
var x = originalPoint;
y = item.datapoint[1];
z = item.series.color;
showTooltip(item.pageX, item.pageY,
"<b>" + "Series " + item.series.label + "</b><br /> " + "Point " + x + "</b><br /> " + " Value: " + y,
z);
}
} else {
$("#flot-tooltip").remove();
previousPoint = null;
}
});
$.each(p.getData()[0].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<h4 class="rotate" align="center">' + el[1] + '</h4>').css( {
position: 'absolute',
left: o.left - 125,
top: o.top - 40,
display: 'none',
padding: 1,
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
$.each(p.getData()[1].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<h4 class="rotate" align="center">' + el[1] + '</h4>').css( {
position: 'absolute',
left: o.left + 100,
top: o.top + 15,
display: 'none',
padding: 1,
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
var reload_url = "?PrePac=<?php echo $_GET['PrePac']; ?>&region=<?php echo $_GET['region']; ?>&project=<?php echo $_GET['project']; ?>&partner=<?php echo $_GET['partner']; ?>";
$(".ajax_load").click(function(e){
e.preventDefault();
reload_url=$(this).attr('href');
var region = $(this).data('region'),project = $(this).data('project');
$.getJSON( "quality_bar-ajax.php"+reload_url, function( data ) {
refresh_chart(data);
$(".region_name").text(region);
$(".project_name").text(project);
});
return false;
});
setInterval(function(){
$.getJSON( "quality_bar-ajax.php"+reload_url, function( data ) {
refresh_chart(data);
});
}, 3000);
function refresh_chart(data){
plot_bar_chart(data.rlm,data.rlm_list);
p.setupGrid(); //only necessary if your new data will change the axes or grid
p.draw();
}
});

You defined p twice. Look for var p in your code.
Change var p = $.plot with just p = $.plot.

Proper way to set default settings for each instance of jQuery plugin

I have been researching this for the past hour and I cannot seem to figure out what is wrong. I would like to make a simple plugin that allows for multiple instances each with their own settings I am not super versed in javascript so I am not using the object/prototype method.
When I run this plugin on two different elements, each with their own settings, only the last settings is being used as seen by the console.log
Here is what I have:
jQuery.fn.lighthouse = function(config) {
config = $.extend({}, jQuery.fn.lighthouse.config, config);
config.openDuration = config.openDuration || config.duration;
config.closeDuration = config.closeDuration || config.duration;
return this.each(function() {
var containers = $(this);
$(containers).click(open);
$(config.closeSelector).click(close);
console.log(config.contentType);
$(containers).each(function() {
if (config.contentType === 'img' && $(this).prop('tagName') === 'A') {
var href = $(this).href,
src = $(this).children('img').src;
if (href !== src) {
}
}
});
// Needs the container object
function open(link) {
link.preventDefault();
var current = {
close: $(this).children(config.closeSelector),
background: $(this).children(config.backgroundSelector),
container: $(this),
child: $(this).children(config.childSelector)
};
console.log($(current.child).is(':hidden'));
if($(current.child).is(':hidden')) {
link.preventDefault();
}
$(current.container).append('<div class="background"></div>').css({
background: config.background,
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '2',
opacity: config.backgroundOpacity,
display: 'none'
}).fadeIn(config.secondaryDuration);
$(current.child).css({
position: 'fixed',
display: 'none',
width: '150px',
height: '150px',
left: current.container.offset().left,
top: current.container.offset().top,
zIndex: '3'
}).fadeIn(config.secondaryDuration).animate({
width: '100%',
height: '100%',
top: '0',
left: '0'
}, config.openDuration, function () {
$(current.container).append('<a class=".close">X</a>').css({
background: 'white',
color: 'black',
width: '50px',
height: '50px',
lineHeight: '50px',
textAlign: 'center',
position: 'absolute',
top: '0',
right: '0',
display: 'none'
}).fadeIn(config.secondaryDuration);
});
}
// Needs the close object
function close(link) {
link.preventDefault();
var current = {
close: $(this),
background: $(this).siblings(config.backgroundSelector),
container: $(this).parent(config.containerSelector),
child: $(current.containter).children(config.childSelector)
};
$(current.close).fadeOut(config.secondaryDuration).remove();
$(current.close).fadeOut(config.secondaryDuration).remove();
$(current.child).animate({
height: current.containter.height(),
width: current.containter.width(),
top: current.containter.offset().top,
left: current.containter.offset().left
}, config.closeDuration, function () {
$(current.child).animate({
opacity: '0',
}, config.secondaryDuration).css({
display: 'none',
zIndex: 'auto'
});
});
}
});
}
jQuery.fn.lighthouse.config = {
containerSelector: '.lighthouse',
childSelector: 'div',
closeSelector: '.close',
backgroundSelector: '.background',
captionSelector: '.caption',
duration: 350,
openDuration: null,
closeDuration: null,
secondaryDuration: 100,
background: 'rgb(230, 230, 230)',
backgroundOpacity: '0.7',
contentType: 'img'
}
This is what I am calling it with:
$('.image').lighthouse();
$('.click').lighthouse({
childSelector: '.site',
contentType: 'html'
});
Here is the jsfiddle: http://jsfiddle.net/yK9ad/
The proper output of console.log should be:
img
html
Any ideas? Thanks in advance for the help!

I think you are missing the class attribute for the anchor containing <img/> tag. Please see below
<a class="image" href="http://placehold.it/900x800&text=Image">
<img src="http://placehold.it/300x200&text=Image" />
<span class="caption">
test
</span>
</a>
The updated fiddle - http://jsfiddle.net/yK9ad/2/
I could see the following in the console.
img
html

Render chart in ExtJS 4 Container/Panel

I have a predefined pie chart like this:
Ext.create('Ext.chart.Chart', {
width : 450,
height : 300,
animate : true,
store : store,
theme : 'Base:gradients',
series : [{
type : 'pie',
field : 'data1',
showInLegend : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight : {
segment : {
margin : 20
}
},
label : {
field : 'name',
display : 'rotate',
contrast : true,
font : '18px Arial'
}
}]
});
Then I created a Container/Panel, here I am using Container.
I am looking for a way to put my pre-defined chart into the Container. I saw some examples they actually define the chart in the Container field, but that's not what I want. Is there any way that I can put my pre-specified chart in the items field below so that the chart can be rendered?
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
items: [{
}]
});
Thanks

Yes, it's as simple as:
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {
boderColor: '#000000',
borderStyle: 'solid',
borderWidth: '1px'
},
items: chart
});
Also note there's no use specifying dimensions on the chart since it's being used in a fit layout.