Using PayPal to handle Subscriptions from your website customers.
During the final stages of development for a new website, I needed to add the Subscription buttons. Still, the resources for PayPal have always been scarce, which is a pain in the butt, especially when you are trying to get it completed so you can move on to the next task that needs your attention during development.
After racking my brain for a little while, I figured it out, so I wanted to post it, not only for me to come back to but for others to learn from as well.
Testing in [Developer]
(PayPal has a very short window for logins, so you need to make sure you create everything as fast as possible, to make sure that the website knows you are active on the site, so it will not log you out.
Business Developer/Sandbox
[Setting up the PayPal Business Developer/Sandbox]
  1. Logged into your PayPal Business Account
  2. In the top-right corner, you will see a code bracket icon.
    This is the Developer Tool entrance.
  3. Click [Apps & Credentials]
    Click [Create App]
    Give your App a Name: My App
    Choose [Merchant] or Platform
    Sandbox Account: A demo business email account is generated by default.
    Click [Create App]
  4. You will see your new App in the list. Click the 3-dot hamburger on the right side.
    Choose [Edit]
    From here, you will have access to your [Client ID] and [Secret Key]
    Click the Back button to go back to the [Apps & Credentials] page.
    While we are here, copy your [Secret Key] by clicking the copy button beside it.
  5. Next, click on [Testing Tools]
    Choose [Sandbox Accounts]
    When the page loads, click on the [@business.example.com] account.
    When the page opens, click on [Change Password]
    Add a password you will remember, then save it.
    Next, go to the PayPal sandbox. https://sandbox.paypal.com«.
    Once on the page, log in with your business.example.com email account.
  6. Once you have logged in to the Sandbox Business Account.
    Go to this URL https://www.sandbox.paypal.com/buttons/«
    Once the page loads, click on [Smart Subscribe]
  7. When the page loads, fill out the information for your button.
    For this one, I chose the Yearly, as I already have the Monthly button created and working.
    Layout [Horizontal] | [[Pill] | [White]
    Button Text: [Subscribe]
    Click [Create Plan]
    When the window opens, click [Copy Code]
  8. Next, let's add a postback link to our button. (Send your customers back to your website)
    Go to your PayPal Dashboard (Not Developer).
    Top-right corner, click your profile icon and choose [Settings]
    When the page loads, click [Website Payments] from the left-side panel.
    Next, on [Website preferences], click the [Update] button.
    Turn [On] the following.
    [Auto return] And set the URL to your webpage. (We will add the actual link in our JS API)
    [Payment Data Transfer]
    It will [AutoSave] when you change a setting.
Now that we have our code, let's customize it to do what we need.
Our code will look like this.
[PayPal - Button Code]
CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language)
<div id="paypal-button-container-P-8R751475MD722180PNIIJFUI"></div>
<script src="https://www.paypal.com/sdk/js?client-id=YOUR-CLIENT-ID&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
// Monthly
  paypal.Buttons({
      style: {
          shape: 'pill',
          color: 'white',
          layout: 'horizontal',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          /* Creates the subscription */
          plan id: 'YOUR-PLAIN-ID'
        });
      },
      onApprove: function(data, actions) {
        alert(data.subscriptionID); // You can add an optional success message for the subscriber here
      }
  }).render('#paypal-button-container-YOUR-PLAIN-ID'); // Renders the PayPal button
</script>

We are going to add to our postback link and some Parameters.
Now, you have to keep in mind that this is a postback, and we cannot use
const urlParams = new URLSearchParams(window.location.search);
Copy
Search Site
Search Google

The postback URL will have [null] where the value is supposed to be.
So, we have to get the information from our URL's QueryString.
In this example, I will be using ASP.
[PayPal - Get Parameter from URL QueryString]
CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language)
<script>
const urlMID = "<%= Request("MID") %>";
const urlPaymentType = "<%= Request("PaymentType") %>";
// Monthly
  paypal.Buttons({
      style: {
          shape: 'pill',
          color: 'white',
          layout: 'horizontal',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          /* Creates the subscription */
          plan id: 'YOUR-PLAIN-ID'
        });
      },
      onApprove: function(data, actions) {
                var targetUrl = "https://YourWebsite.com/PaypalBackend.asp?Type=Return" +
                        "&MID=" + encodeURIComponent(urlMID) + 
                        "&PaymentType=" + encodeURIComponent(urlPaymentType) + 
                        "&subscriptionID=" + encodeURIComponent(data.subscriptionID);
                       
        window.location.href = targetUrl;
      }
  }).render('#paypal-button-container-YOUR-PLAIN-ID'); // Renders the PayPal button
  //Add a Debug so we can tell if it has its values
 console.log("Extracted MID:", urlMID);
console.log("Extracted PaymentType:", urlPaymentType);
</script>

And then on the server side, we process the information when it comes back to us.
This took me several hours to get everything, which is why I created this Article.
Sometimes there isn't enough information available to get the job done.
Now you should be able to test it out.