NEW Include an hourglass icon when we click on online payment button
This commit is contained in:
parent
b29d0385e6
commit
b3245fb455
@ -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))
|
||||
{
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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>';
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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 |
@ -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 */
|
||||
|
||||
@ -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 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user