Main Page: Difference between revisions

From Wiki Problem
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
==Featured Articles==
==Featured Articles==
{{#dpl:
{{#dpl:
Line 20: Line 19:
     |format=«gallery mode="packed" widths=100px heights=100px»,¶File:%PAGE%.jpg{{!}}link=%PAGE%{{!}}[[%PAGE%]],,«/gallery»
     |format=«gallery mode="packed" widths=100px heights=100px»,¶File:%PAGE%.jpg{{!}}link=%PAGE%{{!}}[[%PAGE%]],,«/gallery»
}}
}}
<div id="smart-button-container">
    <div style="text-align: center"><label for="description">Donation To Solve Problem </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
      <p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
    <div style="text-align: center"><label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value="" ><span> USD</span></div>
      <p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a price</p>
    <div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
      <p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
    <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
  </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
  <script>
  function initPayPalButton() {
    var description = document.querySelector('#smart-button-container #description');
    var amount = document.querySelector('#smart-button-container #amount');
    var descriptionError = document.querySelector('#smart-button-container #descriptionError');
    var priceError = document.querySelector('#smart-button-container #priceLabelError');
    var invoiceid = document.querySelector('#smart-button-container #invoiceid');
    var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
    var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');
    var elArr = [description, amount];
    if (invoiceidDiv.firstChild.innerHTML.length > 1) {
      invoiceidDiv.style.display = "block";
    }
    var purchase_units = [];
    purchase_units[0] = {};
    purchase_units[0].amount = {};
    function validate(event) {
      return event.value.length > 0;
    }
    paypal.Buttons({
      style: {
        color: 'blue',
        shape: 'rect',
        label: 'pay',
        layout: 'vertical',
       
      },
      onInit: function (data, actions) {
        actions.disable();
        if(invoiceidDiv.style.display === "block") {
          elArr.push(invoiceid);
        }
        elArr.forEach(function (item) {
          item.addEventListener('keyup', function (event) {
            var result = elArr.every(validate);
            if (result) {
              actions.enable();
            } else {
              actions.disable();
            }
          });
        });
      },
      onClick: function () {
        if (description.value.length < 1) {
          descriptionError.style.visibility = "visible";
        } else {
          descriptionError.style.visibility = "hidden";
        }
        if (amount.value.length < 1) {
          priceError.style.visibility = "visible";
        } else {
          priceError.style.visibility = "hidden";
        }
        if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
          invoiceidError.style.visibility = "visible";
        } else {
          invoiceidError.style.visibility = "hidden";
        }
        purchase_units[0].description = description.value;
        purchase_units[0].amount.value = amount.value;
        if(invoiceid.value !== '') {
          purchase_units[0].invoice_id = invoiceid.value;
        }
      },
      createOrder: function (data, actions) {
        return actions.order.create({
          purchase_units: purchase_units,
        });
      },
      onApprove: function (data, actions) {
        return actions.order.capture().then(function (orderData) {
          // Full available details
          console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
          // Show a success message within this page, e.g.
          const element = document.getElementById('paypal-button-container');
          element.innerHTML = '';
          element.innerHTML = '<h3>Thank you for your payment!</h3>';
          // Or go to another URL:  actions.redirect('thank_you.html');
         
        });
      },
      onError: function (err) {
        console.log(err);
      }
    }).render('#paypal-button-container');
  }
  initPayPalButton();
  </script>

Revision as of 19:37, 7 March 2022

Featured Articles


Latest Articles

<label for="description">Donation To Solve Problem </label><input type="text" name="descriptionInput" id="description" maxlength="127" value="">
<label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value="" > USD
 <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
 <script>
 function initPayPalButton() {
   var description = document.querySelector('#smart-button-container #description');
   var amount = document.querySelector('#smart-button-container #amount');
   var descriptionError = document.querySelector('#smart-button-container #descriptionError');
   var priceError = document.querySelector('#smart-button-container #priceLabelError');
   var invoiceid = document.querySelector('#smart-button-container #invoiceid');
   var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
   var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');

   var elArr = [description, amount];

   if (invoiceidDiv.firstChild.innerHTML.length > 1) {
     invoiceidDiv.style.display = "block";
   }

   var purchase_units = [];
   purchase_units[0] = {};
   purchase_units[0].amount = {};

   function validate(event) {
     return event.value.length > 0;
   }

   paypal.Buttons({
     style: {
       color: 'blue',
       shape: 'rect',
       label: 'pay',
       layout: 'vertical',
       
     },

     onInit: function (data, actions) {
       actions.disable();

       if(invoiceidDiv.style.display === "block") {
         elArr.push(invoiceid);
       }

       elArr.forEach(function (item) {
         item.addEventListener('keyup', function (event) {
           var result = elArr.every(validate);
           if (result) {
             actions.enable();
           } else {
             actions.disable();
           }
         });
       });
     },

     onClick: function () {
       if (description.value.length < 1) {
         descriptionError.style.visibility = "visible";
       } else {
         descriptionError.style.visibility = "hidden";
       }

       if (amount.value.length < 1) {
         priceError.style.visibility = "visible";
       } else {
         priceError.style.visibility = "hidden";
       }

       if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
         invoiceidError.style.visibility = "visible";
       } else {
         invoiceidError.style.visibility = "hidden";
       }

       purchase_units[0].description = description.value;
       purchase_units[0].amount.value = amount.value;

       if(invoiceid.value !== ) {
         purchase_units[0].invoice_id = invoiceid.value;
       }
     },

     createOrder: function (data, actions) {
       return actions.order.create({
         purchase_units: purchase_units,
       });
     },

     onApprove: function (data, actions) {
       return actions.order.capture().then(function (orderData) {

         // Full available details
         console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

         // Show a success message within this page, e.g.
         const element = document.getElementById('paypal-button-container');
         element.innerHTML = ;

element.innerHTML = '

Thank you for your payment!

'; 

         // Or go to another URL:  actions.redirect('thank_you.html');
         
       });
     },

     onError: function (err) {
       console.log(err);
     }
   }).render('#paypal-button-container');
 }
 initPayPalButton();
 </script>
Retrieved from "https://wikiproblem.com/index.php?title=Main_Page&oldid=2328"