NEW Include an hourglass icon when we click on online payment button

This commit is contained in:
Laurent Destailleur 2017-05-15 10:27:21 +02:00
parent b29d0385e6
commit b3245fb455
7 changed files with 101 additions and 96 deletions

View File

@ -141,7 +141,7 @@ print '<td>'.$langs->trans("Value").'</td>';
print "</tr>\n";
print '<tr class="oddeven">';
print '<td class="titlefield fieldrequired">';
print '<td class="titlefield">';
print $langs->trans("PaypalLiveEnabled").'</td><td>';
if (empty($conf->global->PAYPAL_API_SANDBOX))
{

View File

@ -276,7 +276,7 @@ $paramcreditor='PAYPAL_CREDITOR_'.$suffix;
if (! empty($conf->global->$paramcreditor)) $creditor=$conf->global->$paramcreditor;
else if (! empty($conf->global->PAYPAL_CREDITOR)) $creditor=$conf->global->PAYPAL_CREDITOR;
print '<span id="dolpaymentspan"></span>'."\n";
print '<span id="dopaymentspan"></span>'."\n";
print '<div class="center">'."\n";
print '<form id="dolpaymentform" class="center" name="paymentform" action="'.$_SERVER["PHP_SELF"].'" method="POST">'."\n";
print '<input type="hidden" name="token" value="'.$_SESSION['newtoken'].'">'."\n";
@ -969,12 +969,13 @@ if ($found && ! $error) // We are in a management option and no error
if ($conf->global->PAYPAL_API_INTEGRAL_OR_PAYPALONLY == 'integral')
{
print '<br><input class="button" type="submit" name="dopayment" value="'.$langs->trans("PaypalOrCBDoPayment").'">';
print '<br><input class="button" type="submit" id="dopayment" name="dopayment" value="'.$langs->trans("PaypalOrCBDoPayment").'">';
}
if ($conf->global->PAYPAL_API_INTEGRAL_OR_PAYPALONLY == 'paypalonly')
{
print '<br><input class="button" type="submit" name="dopayment" value="'.$langs->trans("PaypalDoPayment").'">';
print '<br><input class="button" type="submit" id="dopayment" name="dopayment" value="'.$langs->trans("PaypalDoPayment").'">';
}
print '<img id="hourglasstopay" class="hidden" src="'.DOL_URL_ROOT.'/theme/'.$conf->theme.'/img/working.gif'.'">';
}
else
{
@ -986,9 +987,22 @@ print '</td></tr>'."\n";
print '</table>'."\n";
print '</form>'."\n";
print '</div>'."\n";
print '<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery("#dopayment").click(function() {
jQuery("#dopayment").hide();
jQuery("#hourglasstopay").show();
});
});
</script>';
print '<br>';
htmlPrintOnlinePaymentFooter($mysoc,$langs);
llxFooter('', 'public');

View File

@ -90,8 +90,8 @@ if (! $action)
//$urlwithroot=$urlwithouturlroot.DOL_URL_ROOT; // This is to use external domain name found into config file
$urlwithroot=DOL_MAIN_URL_ROOT; // This is to use same domain name than current
$urlok=$urlwithroot.'/public/paypal/paymentok.php?';
$urlko=$urlwithroot.'/public/paypal/paymentko.php?';
$urlok=$urlwithroot.'/public/stripe/paymentok.php?';
$urlko=$urlwithroot.'/public/stripe/paymentko.php?';
// Complete urls for post treatment
$SOURCE=GETPOST("source",'alpha');
@ -1119,8 +1119,8 @@ if (preg_match('/^dopayment/',$action))
<div id="card-errors" role="alert"></div>
</div>
<br>
<button>'.$langs->trans("ToPay").'</button>
<button class="button" id="buttontopay">'.$langs->trans("ToPay").'</button>
<img id="hourglasstopay" class="hidden" src="'.DOL_URL_ROOT.'/theme/'.$conf->theme.'/img/working.gif'.'">
</td></tr></tbody></table>
</form>
@ -1131,82 +1131,84 @@ if (preg_match('/^dopayment/',$action))
<script type="text/javascript" language="javascript">';
?>
// Create a Stripe client
var stripe = Stripe('<?php echo $stripe['publishable_key']; ?>');
// Create a Stripe client
var stripe = Stripe('<?php echo $stripe['publishable_key']; ?>');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
console.log(form);
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
console.log("submit");
form.submit();
}
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
console.log(form);
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
jQuery('#buttontopay').hide();
jQuery('#hourglasstopay').show();
console.log("submit");
form.submit();
}
<?php
print '</script>';
print '</script>';
}

View File

@ -134,7 +134,7 @@ print '<td>'.$langs->trans("Value").'</td>';
print "</tr>\n";
print '<tr class="oddeven">';
print '<td class="titlefield fieldrequired">';
print '<td class="titlefield">';
print $langs->trans("StripeLiveEnabled").'</td><td>';
if (!empty($conf->global->STRIPE_LIVE))
{
@ -229,7 +229,7 @@ $token='';
// Url list
print '<u>'.$langs->trans("FollowingUrlAreAvailableToMakePayments").':</u><br>';
print img_picto('','object_globe.png').' '.$langs->trans("ToOfferALinkForOnlinePaymentOnFreeAmount",$servicename).':<br>';
print '<strong>'.getStripePaymentUrl(1,'free')."</strong><br><br>\n";
print '<strong>'.getStripePaymentUrl(1,'free')."</strong><br>\n";
if (! empty($conf->commande->enabled))
{
print img_picto('','object_globe.png').' '.$langs->trans("ToOfferALinkForOnlinePaymentOnOrder",$servicename).':<br>';
@ -250,7 +250,6 @@ if (! empty($conf->commande->enabled))
}
print '</form>';
}
print '<br>';
}
if (! empty($conf->facture->enabled))
{
@ -272,7 +271,6 @@ if (! empty($conf->facture->enabled))
}
print '</form>';
}
print '<br>';
}
if (! empty($conf->contrat->enabled))
{
@ -294,7 +292,6 @@ if (! empty($conf->contrat->enabled))
}
print '</form>';
}
print '<br>';
}
if (! empty($conf->adherent->enabled))
{

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -3264,7 +3264,7 @@ div.visible {
display: block;
}
div.hidden {
div.hidden, td.hidden, img.hidden {
display: none;
}
@ -3272,10 +3272,6 @@ tr.visible {
display: block;
}
td.hidden {
display: none;
}
/* ============================================================================== */
/* Module website */

View File

@ -3362,7 +3362,7 @@ div.visible {
display: block;
}
div.hidden {
div.hidden, td.hidden, img.hidden {
display: none;
}
@ -3370,10 +3370,6 @@ tr.visible {
display: block;
}
td.hidden {
display: none;
}
/* ============================================================================== */
/* Module website */