You need to sign in to do that
Don't have an account?
Raghu Rao 12
Accessing Javascript variable from Visualforce page
Hi
I have incorporated a Javascriipt Credit Card reader. I am able to read in the credit care information from the reader into Javascript variables. However I am not able to map these variable values and display them in Visualforce page.
Here is the visualforce page and the apex controller snippets:
Controller Code:
public String getJSStart(){return '<script>document.write(';}
public String getJSEnd(){return ')</script>';}
public PageReference sendCardData () {
if (Apexpages.currentPage().getParameters().containsKey('firstName')){
String fn=Apexpages.currentPage().getParameters().get('firstName');
String ln=Apexpages.currentPage().getParameters().get('lastName');
CCName= fn+' '+ln;
System.Debug('CCName is ::' + CCName);
}//firstName
if (Apexpages.currentPage().getParameters().containsKey('account')){
CCNum=Apexpages.currentPage().getParameters().get('account');
System.Debug('CCNum is ::' + CCNum);
}//account
if (Apexpages.currentPage().getParameters().containsKey('expMonth')){
selectedExpMnth=Integer.ValueOf(Apexpages.currentPage().getParameters().get('expMonth'));
System.Debug('selectedExpMnth is ::' + selectedExpMnth);
}//expMonth
if (Apexpages.currentPage().getParameters().containsKey('expYear')){
selectedExpYr=Integer.ValueOf(Apexpages.currentPage().getParameters().get('expYear'));
System.Debug('selectedExpYr is ::' + selectedExpYr);
}//expMonth
return null;
}//sendCardData
Visualforce Page:
<apex:pageBlockSection title="Enter CREDIT CARD INFORMATION" columns="1" rendered="{!IF(CONTAINS(selectedPT,'Credit'),true,false)}"></apex:pageBlockSection>
<apex:pageBlockSection title="Enter CHECK INFORMATION" columns="1" rendered="{!IF(CONTAINS(selectedPT,'Check'),true,false)}"></apex:pageBlockSection>
<apex:actionFunction action="{!sendCardData}" name="CardInfo" rerender="CC">
<apex:param name="firstName" value=""/>
<apex:param name="lastName" value=""/>
<apex:param name="account" value=""/>
<apex:param name="expMonth" value=""/>
<apex:param name="expYear" value=""/>
<apex:param name="type" value=""/>
</apex:actionFunction>
<apex:panelgrid id="CC" columns="4" rendered="{!IF(CONTAINS(selectedPT,'Credit'),true,false)}">
<!-- rendered="{IF(!selectedPT == 'CREDIT CARD', true, false)}" -->
<apex:outputLabel style="font-weight:bold;" value="Name as in Credit Card"></apex:outputLabel>
<apex:inputText value="{!CCName}" id="lastName"/>
<!-- required="{!IF(CONTAINS(selectedPT,'CREDIT'),true,false)}" -->
<apex:outputLabel style="font-weight:bold;" value="Card Number (16 Digits):"></apex:outputLabel>
<apex:inputText value="{!CCNum}" id="CRNUM" maxlength="19"/>
<apex:outputText value="{!JSStart}account{!JSEnd}" escape="false"/>
<apex:outputLabel style="font-weight:bold;" value="Card Exp Month : "></apex:outputLabel>
<apex:selectList value="{!selectedExpMnth}" id="expMonth" multiselect="false" size="1">
<apex:selectOptions value="{!TmplCEM}"/>
<!-- <apex:actionSupport action="{!getPaymentFields}" event="" reRender="" />-->
</apex:selectList>
<apex:outputLabel style="font-weight:bold;" value="Card Exp Year : "></apex:outputLabel>
<apex:selectList value="{!selectedExpYr}" id="expYear" multiselect="false" size="1">
<apex:selectOptions value="{!TmplCEYOptions}"/>
<!-- <apex:actionSupport action="{!getPaymentFields}" event="" reRender="" />-->
</apex:selectList>
<apex:outputLabel style="font-weight:bold;" value="3 Digit Card CVC Code"></apex:outputLabel>
<apex:inputText value="{!CCCVC}" maxlength="3"/>
</apex:panelgrid>
<script type="text/javascript">
// Called by plugin on a successful scan.
var complete = function (data) {
// Is it a payment card?
if (data.type == "generic")
return;
// Copy data fields to form
//$("#firstName").val(data.firstName);
//document.getElementById("lastName").value = data.firstName+" "+data.lastName;
//$("#lastName").val(data.lastName);
//$("#fullName").val(data.fullName);
//$("#account").val(data.account);
//$("#expMonth").val(data.expMonth);
//$("#expYear").val(data.expYear);
//$("#type").val(data.type);
//var lastName=data.lastName;
var firstName=data.firstName;
var lastName=data.lastName;
var account=data.account;
var expMonth=data.expMonth;
var expYear=data.expYear;
var type=data.type;
document.getElementById('{!$Component.thepage.theform.CC.CRNUM}').value = account;
//document.write("You have entered credit card number:"+ account);
//document.getElementById("expMonth").value = expMonth;
//document.getElementById("expYear").value = expYear;
function sendCardData(){
CardInfo(firstName,lastName,account,expMonth,expYear,type);
}
};
// Event handler for scanstart.cardswipe.
var scanstart = function () {
$("#overlay").fadeIn(200);
};
// Event handler for scanend.cardswipe.
var scanend = function () {
$("#overlay").fadeOut(200);
};
// Event handler for success.cardswipe. Displays returned data in a dialog
var success = function (event, data) {
$("#properties").empty();
// Iterate properties of parsed data
for (var key in data) {
if (data.hasOwnProperty(key)) {
var text = key + ': ' + data[key];
$("#properties").append('<div class="property">' + text + '</div>');
}
}
$("#success").fadeIn().delay(3000).fadeOut();
}
var failure = function () {
$("#failure").fadeIn().delay(1000).fadeOut();
}
// Initialize the plugin with default parser and callbacks.
//
// Set debug to true to watch the characters get captured and the state machine transitions
// in the javascript console. This requires a browser that supports the console.log function.
//
// Set firstLineOnly to true to invoke the parser after scanning the first line. This will speed up the
// time from the start of the scan to invoking your success callback.
$.cardswipe({
firstLineOnly: true,
success: complete,
parsers: ["visa", "amex", "mastercard", "discover", "generic"],
debug: false
});
// Bind event listeners to the document
$(document)
.on("scanstart.cardswipe", scanstart)
.on("scanend.cardswipe", scanend)
.on("success.cardswipe", success)
.on("failure.cardswipe", failure)
;
</script>
</apex:page>
I have incorporated a Javascriipt Credit Card reader. I am able to read in the credit care information from the reader into Javascript variables. However I am not able to map these variable values and display them in Visualforce page.
Here is the visualforce page and the apex controller snippets:
Controller Code:
public String getJSStart(){return '<script>document.write(';}
public String getJSEnd(){return ')</script>';}
public PageReference sendCardData () {
if (Apexpages.currentPage().getParameters().containsKey('firstName')){
String fn=Apexpages.currentPage().getParameters().get('firstName');
String ln=Apexpages.currentPage().getParameters().get('lastName');
CCName= fn+' '+ln;
System.Debug('CCName is ::' + CCName);
}//firstName
if (Apexpages.currentPage().getParameters().containsKey('account')){
CCNum=Apexpages.currentPage().getParameters().get('account');
System.Debug('CCNum is ::' + CCNum);
}//account
if (Apexpages.currentPage().getParameters().containsKey('expMonth')){
selectedExpMnth=Integer.ValueOf(Apexpages.currentPage().getParameters().get('expMonth'));
System.Debug('selectedExpMnth is ::' + selectedExpMnth);
}//expMonth
if (Apexpages.currentPage().getParameters().containsKey('expYear')){
selectedExpYr=Integer.ValueOf(Apexpages.currentPage().getParameters().get('expYear'));
System.Debug('selectedExpYr is ::' + selectedExpYr);
}//expMonth
return null;
}//sendCardData
Visualforce Page:
<apex:pageBlockSection title="Enter CREDIT CARD INFORMATION" columns="1" rendered="{!IF(CONTAINS(selectedPT,'Credit'),true,false)}"></apex:pageBlockSection>
<apex:pageBlockSection title="Enter CHECK INFORMATION" columns="1" rendered="{!IF(CONTAINS(selectedPT,'Check'),true,false)}"></apex:pageBlockSection>
<apex:actionFunction action="{!sendCardData}" name="CardInfo" rerender="CC">
<apex:param name="firstName" value=""/>
<apex:param name="lastName" value=""/>
<apex:param name="account" value=""/>
<apex:param name="expMonth" value=""/>
<apex:param name="expYear" value=""/>
<apex:param name="type" value=""/>
</apex:actionFunction>
<apex:panelgrid id="CC" columns="4" rendered="{!IF(CONTAINS(selectedPT,'Credit'),true,false)}">
<!-- rendered="{IF(!selectedPT == 'CREDIT CARD', true, false)}" -->
<apex:outputLabel style="font-weight:bold;" value="Name as in Credit Card"></apex:outputLabel>
<apex:inputText value="{!CCName}" id="lastName"/>
<!-- required="{!IF(CONTAINS(selectedPT,'CREDIT'),true,false)}" -->
<apex:outputLabel style="font-weight:bold;" value="Card Number (16 Digits):"></apex:outputLabel>
<apex:inputText value="{!CCNum}" id="CRNUM" maxlength="19"/>
<apex:outputText value="{!JSStart}account{!JSEnd}" escape="false"/>
<apex:outputLabel style="font-weight:bold;" value="Card Exp Month : "></apex:outputLabel>
<apex:selectList value="{!selectedExpMnth}" id="expMonth" multiselect="false" size="1">
<apex:selectOptions value="{!TmplCEM}"/>
<!-- <apex:actionSupport action="{!getPaymentFields}" event="" reRender="" />-->
</apex:selectList>
<apex:outputLabel style="font-weight:bold;" value="Card Exp Year : "></apex:outputLabel>
<apex:selectList value="{!selectedExpYr}" id="expYear" multiselect="false" size="1">
<apex:selectOptions value="{!TmplCEYOptions}"/>
<!-- <apex:actionSupport action="{!getPaymentFields}" event="" reRender="" />-->
</apex:selectList>
<apex:outputLabel style="font-weight:bold;" value="3 Digit Card CVC Code"></apex:outputLabel>
<apex:inputText value="{!CCCVC}" maxlength="3"/>
</apex:panelgrid>
<script type="text/javascript">
// Called by plugin on a successful scan.
var complete = function (data) {
// Is it a payment card?
if (data.type == "generic")
return;
// Copy data fields to form
//$("#firstName").val(data.firstName);
//document.getElementById("lastName").value = data.firstName+" "+data.lastName;
//$("#lastName").val(data.lastName);
//$("#fullName").val(data.fullName);
//$("#account").val(data.account);
//$("#expMonth").val(data.expMonth);
//$("#expYear").val(data.expYear);
//$("#type").val(data.type);
//var lastName=data.lastName;
var firstName=data.firstName;
var lastName=data.lastName;
var account=data.account;
var expMonth=data.expMonth;
var expYear=data.expYear;
var type=data.type;
document.getElementById('{!$Component.thepage.theform.CC.CRNUM}').value = account;
//document.write("You have entered credit card number:"+ account);
//document.getElementById("expMonth").value = expMonth;
//document.getElementById("expYear").value = expYear;
function sendCardData(){
CardInfo(firstName,lastName,account,expMonth,expYear,type);
}
};
// Event handler for scanstart.cardswipe.
var scanstart = function () {
$("#overlay").fadeIn(200);
};
// Event handler for scanend.cardswipe.
var scanend = function () {
$("#overlay").fadeOut(200);
};
// Event handler for success.cardswipe. Displays returned data in a dialog
var success = function (event, data) {
$("#properties").empty();
// Iterate properties of parsed data
for (var key in data) {
if (data.hasOwnProperty(key)) {
var text = key + ': ' + data[key];
$("#properties").append('<div class="property">' + text + '</div>');
}
}
$("#success").fadeIn().delay(3000).fadeOut();
}
var failure = function () {
$("#failure").fadeIn().delay(1000).fadeOut();
}
// Initialize the plugin with default parser and callbacks.
//
// Set debug to true to watch the characters get captured and the state machine transitions
// in the javascript console. This requires a browser that supports the console.log function.
//
// Set firstLineOnly to true to invoke the parser after scanning the first line. This will speed up the
// time from the start of the scan to invoking your success callback.
$.cardswipe({
firstLineOnly: true,
success: complete,
parsers: ["visa", "amex", "mastercard", "discover", "generic"],
debug: false
});
// Bind event listeners to the document
$(document)
.on("scanstart.cardswipe", scanstart)
.on("scanend.cardswipe", scanend)
.on("success.cardswipe", success)
.on("failure.cardswipe", failure)
;
</script>
</apex:page>
Will Javascript remoting help me in this case? Any input will be appreciated.