Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Miriam LückeMiriam Lücke 

Need help with JavaScript and Visualforce (Paymill)

I need to include an external library and pass the answer from the library to the controller. The example from the documentation works fine 'as is'. Here's the example (from https://developers.paymill.com/en/introduction/brief-instructions/): 
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '62477926916d4da496cf4f1a77c4175d';
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.paymill.com/"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

$("#payment-form").submit(function (event) {
// Deactivate submit button to avoid further clicks
$('.submit-button').attr("disabled", "disabled");

if (!paymill.validateCardNumber($('.card-number').val())) {
$(".payment-errors").text("Invalid card number");
$(".submit-button").removeAttr("disabled");
return false;
}

if (!paymill.validateExpiry(
  $('.card-expiry-month').val(),
  $('.card-expiry-year').val())
) {
$(".payment-errors").text("Invalid expiration date");
$(".submit-button").removeAttr("disabled");
return false;
}

paymill.createToken({
number:         $('.card-number').val(),
exp_month:      $('.card-expiry-month').val(),
exp_year:       $('.card-expiry-year').val(),
cvc:            $('.card-cvc').val(),
cardholder:     $('.card-holdername').val(),
amount_int:     $('.card-amount-int').val(),   // Integer z.B. "4900" für 49,00 EUR
currency:       $('.card-currency').val()      // ISO 4217 z.B. "EUR"
}, PaymillResponseHandler);

return false;
});
});
</script>
<div class="payment-errors"></div>
<form id="payment-form" action="request.php" method="POST">
<input class="card-amount-int" type="hidden" value="4900" />
<input class="card-currency" type="hidden" value="EUR" />

<div class="form-row"><label>Card number</label>
<input class="card-number" type="text" value="4111111111111111" size="20" /></div>

<div class="form-row"><label>CVC (Prüfnummer)</label>
<input class="card-cvc" type="text" value="111" size="4" /></div>

<div class="form-row"><label>Name</label>
<input class="card-holdername" type="text" value="Joe Doe" size="20" /></div>

<div class="form-row"><label>Expiry Date (MM/YYYY)</label>
<input class="card-expiry-month" type="text" value="02" size="2" />
<span> / </span>
<input class="card-expiry-year" type="text" value="2015" size="4" /></div>

<div class="form-row"><label>Currency</label>
<input class="card-currency" type="text" value="EUR" size="20" /></div>

<button class="submit-button" type="submit">Submit</button>

</form>

Since I'm not that into JS, maybe someone could help me adopt this to Visualforce. I have more <apex:inputFields> on the VF-Page and a complete <apex:form> with own <apex:commandbutton> to submit the inputfields to the controller. I'd like to have only one form, if possible. If not, I'd like to send the "token" var from the JS to a controller variable.

Any help is appreciated!

Amritesh SahuAmritesh Sahu
Hi Miriam, 
You can paas the value from javascript using inputHidden.

VF: 
<script type="text/javascript">
.
.
$("[id$=hidden]").val("value_to_pass");
.
.
</script>
<apex:inputHidden id="hidden" value="{!msg}"/>

Controller: 
Public class multiplicationTable {
......
Public String msg{get;set;}
.......
}

Regards,
Amritesh
Miriam LückeMiriam Lücke

As far as I can tell it doesn't work. I get the var from js to the form (for debugging I put it in <apex:inputText> but when I hit save it won't be passed to the controller.

My code snippets, I marked the respektive parts in bold:

JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.paymill.com/"></script>
<script type="text/javascript">
function Paymillfunction()
{
	var zahlungsweise = document.getElementById('{!$Component.paymentform.zahlungsweise}').value;
	var card_number = document.getElementById('{!$Component.paymentform.card_number}').value;	
	var cvc  = document.getElementById('{!$Component.paymentform.cvc}').value;
	var holdername = document.getElementById('{!$Component.paymentform.holdername}').value;
	var expiry_date_month = document.getElementById('{!$Component.paymentform.expiry_date_month}').value;
	var expiry_date_year = document.getElementById('{!$Component.paymentform.expiry_date_year}').value;
	var amount_int = {!PriceInCent};
	var currency = 'EUR'; 
	if(zahlungsweise == 'Kreditkarte')
	{
		paymill.createToken({
  		number:         card_number,		// required
  		exp_month:      expiry_date_month, 	// required
  		exp_year:       expiry_date_year,  	// required
  		cvc:            cvc,          		// required
  		amount_int:     amount_int,   		// required, e.g. "4900" for 49.00 EUR
  		currency:       currency,          	// required
  		cardholder:     holdername    		// optional
},
paymillResponseHandler);	}
}
function paymillResponseHandler(error, result) 
{
    if (error) 
    {
      // Displays the error
      alert(error.apierror);
    } 
    else 
    {
      // Output token
      var token = result.token;
      // Insert token into form in order to submit to server
     $("[id$=paymilltoken]").val(token);
    }
} 
</script>
Creating the token works (since I can see it shortly in the below field), but then it disappears.

The VF Form 
<apex:form id="paymentform">
<apex:inputHidden value="{!Teilnehmer.Zahlung_per__c}" id="zahlungsweise" />
<!--  outer panel with id to rerender -->
<apex:outputPanel id="creditcardinput" >                
<!--  inner panel with rendering conditions -->
<apex:outputPanel rendered="{!IF(Teilnehmer.Zahlung_per__c == 'Kreditkarte', 'true', 'false')}" >
    <p><apex:outputText value="{!$Label.Kreditkartenzahlung}" /></p><br/>
    <table>
        <tr>
            <td>{!$Label.Card_number}:</td>
            <td>&nbsp;</td>
            <td><apex:inputText id="card_number" /></td>
        </tr>
        <tr>
            <td>{!$label.CVC}:</td>
            <td>&nbsp;</td>
            <td><apex:inputText id="cvc" /></td>
        </tr>
        <tr>
            <td>{!$label.card_holdername}:</td>
            <td>&nbsp;</td>
            <td><apex:inputText id="holdername" /></td>
        </tr>
        <tr>
            <td>{!$label.Expiry_Date}:</td>
            <td>&nbsp;</td>
            <td><apex:inputText id="expiry_date_month" style="width: 2em;text-align:right;" maxlength="2"/>&nbsp;/&nbsp;<apex:inputText id="expiry_date_year"  style="width: 4em;text-align:right;" maxlength="4"/> </td>
        </tr>
        <!-- <tr>
            <td>{!$label.Currency}:</td>
            <td>&nbsp;</td>
            <td><apex:inputText id="currency" /></td>
        </tr> -->
    </table>
    <apex:inputHidden value="{!PaymentId}" id="paymentid" />
    
    <apex:inputText value="{!PaymillToken}" id="paymilltoken" />

<p><apex:messages /></p>
<div style="float:left;"><br/>
<p><apex:commandButton action="{!toRegistration}" value="{!$Label.Zur_ck}" styleClass="ab" /></p>
</div>

<div style="float:right;"><br/>

<p><apex:commandButton value="{!$Label.Weiter}" action="{!finishRegistration}" onclick="Paymillfunction();" /></p>
</div>
</apex:form>

:The class snippet with controller method: 
public without sharing class EventmanagementCtrler 
{
public String PaymillToken{get;set;}

    public PageReference finishRegistration()
    {
	system.debug(this.PaymillToken);        	
    	Teilnehmer.Paymill_Token__c = this.PaymillToken;
    	Teilnehmer.Status__c = 'angemeldet';
        upsert Teilnehmer;
        return Page.Sonstiges;
    }
}