Apex Code Development You need to sign in to do that
Don't have an account?
Miriam 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!
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
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> </td> <td><apex:inputText id="card_number" /></td> </tr> <tr> <td>{!$label.CVC}:</td> <td> </td> <td><apex:inputText id="cvc" /></td> </tr> <tr> <td>{!$label.card_holdername}:</td> <td> </td> <td><apex:inputText id="holdername" /></td> </tr> <tr> <td>{!$label.Expiry_Date}:</td> <td> </td> <td><apex:inputText id="expiry_date_month" style="width: 2em;text-align:right;" maxlength="2"/> / <apex:inputText id="expiry_date_year" style="width: 4em;text-align:right;" maxlength="4"/> </td> </tr> <!-- <tr> <td>{!$label.Currency}:</td> <td> </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; } }