Search code examples
javascriptjqueryformspaypal-rest-sdk

Passing Custom Variables to PayPal

I am trying to recreate this https://www.paypal.com/donate/?hosted_button_id=JA4LPSED5LVCG which is the standard hosted PayPal donation button. It has preset amounts, let the user add their intent(which program to support), and recurring monthly donations. I started out with jQuery to target elements and pass the preset amounts and that worked but since I've gone with a vanilla js approach. My question is this, am I even setting this up properly using the PP SDK? Or do I need to do a different kind of integration with the API in order to support the recurring donations.

At this point my code is more broken than when I started out with jQuery(At least I was able to pass the preset amounts, but not the donation intent). I have set up a Codepen here and would love any and all feedback. https://codepen.io/tripdog/pen/dyvNeEV

var amount = 0;
var selectedProgram = "";

const buttons = document.querySelectorAll("button.Paypal");
buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    amount = btn.dataset.id;
  });
});

const programSelect = document.getElementById("programSelect");
programSelect.addEventListener("change", (e) => {
  selectedProgram = programSelect.value;
});

// Render the PayPal button into #paypal-button-container
paypal
  .Buttons({
    // Set up the transaction
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: amount
          },
          description: programSelect
        }]
      });
    },
    // Finalize the transaction
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        // Show a success message to the buyer
        alert("Donation completed by " + details.payer.name.given_name + "!");
        location.replace("https://www.example.com/completed_success.php");
      });
    }
  })
  .render("#paypal-button-container");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
  <script src="https://www.paypal.com/sdk/js?client-id=ATRpb7qwKVe802ScEBXewSlZEzVfK0LJwBpn5AI7orX96kziTQw4CvrOler2sR4H-rIN4aL_dPvtCg2l&currency=USD"></script>

  <title>IBS Donation Form</title>
</head>

<body>
  <input type="checkbox" name="vehicle3" value="Boat" checked> Recurring Monthly Payment<br>
  <h4 class="text-style-news">Paypal Payment Platform</h4>
  <button class="btn btn-sm btn-danger Paypal" data-id="25" style="margin-right: 15px">
    $25
  </button>
  <button class="btn btn-sm btn-danger Paypal" data-id="50" style="margin-right: 15px">
    $50
  </button>
  <button class="btn btn-sm btn-danger Paypal" data-id="100" style="margin-right: 15px">
    $100
  </button>
  <button class="btn btn-sm btn-danger Paypal" data-id="500">$500</button>

  <div class="Options">
    <label for="availablePrograms">Choose a program to support (optional)</label>
    <select id="programSelect">
      <option class="Paypal programSelect" name="No Prgram Selected" value="No Prgram Selected" data-id="No Prgram Selected">
        --(Optional) Use this donation for--
      </option>
      <option class="Paypal programSelect" name="Prison Program" value="Prison Program" data-id="Prison Program">
        IBS Prison Program (監獄弘法
      </option>
      <option class="Paypal programSelect" name="Nepal Emergency Relief" value="Nepal Emergency Relief" data-id="Nepal Emergency Relief">
        Nepal Medical Emergency Relief ( 尼泊爾醫療急難救援
      </option>
      <option class="Paypal programSelect" name="Sramanera School of Nepalf" value="Sramanera School of Nepal" data-id="Sramanera School of Nepal">
        IBS Sramanera School of Nepal (尼泊爾菩薩沙彌學院)
      </option>
      <option class="Paypal programSelect" name="Monastic Living Expenses" value="Monastic Living Expenses" data-id="Monastic Living Expenses">
        Monastic Living Expenses　(供養法師)
      </option>
    </select>
  </div>
  <label style="float: left" for="amount" class="mb-2">
    <p class="support-p"><strong>Any Amount*</strong></p>
  </label>
  <br />
  <br />
  <input type="number" id="amount" class="form-control mb-4" placeholder="in $USD" onchange="Pay()" />

  <div id="paypal-button-container"></div>
  <br />
</body>

</html>

PS I am not worried about styling at the moment, just functionality. Client ID is sandboxed :-)

Solution

  • That code will not work for recurring payments. Subscriptions are a separate integration, see the Subscriptions overview: https://developer.paypal.com/docs/subscriptions/ , and in addition to API calls you can manually create and manage billing Products and Plans in the receiving account at:

    If you want a choice on a PayPal page to make a donation recurring or not, the only option is to create a non-JS Donate button at https://www.paypal.com/buttons . In Step 2 you can uncheck the option to save the button at PayPal, and when you generate the code you can remove the code protection. A custom value can be passed using the custom parameter, https://developer.paypal.com/docs/paypal-payments-standard/integration-guide/Appx-websitestandard-htmlvariables/#payment-transaction-variables , this will be visible in the receiver account's transaction details.