Let user pick their own own subscription pricing and period?

[luuie]

Hello

I have a donation form that lets user choose a one time donation, or recurring donation. For recurring donation, they can select monthly, or every 3/6/12 months. For either one time or recurring they are free to choose any amount between $10-10,000 

The form currently uses the legacy html variable method seen on this page https://developer.paypal.com/api/nvp-soap/paypal-payments-standard/integration-guide/Appx-websitesta...

I want to migrate to javascript SDK (I'll be using vanilla JS) because I'll want to accept apple/google pay at some point. But I'm reading the reference and I can't figure out how subscription works. It seems I have to refer to one of the fixed subscription plans that need to be created in the dashboard? How do I let user choose any amount they want every 1/3/6/12 month?

thanks in advance for any help

PS: Oh the other things is when the button is created, and I haven't done anything yet, I see a bunch of errors in chrome. "Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox."  It seems the paypal script is posting a bunch to this url https://www.sandbox.paypal.com/smart/buttons?... and trying to set a cookie and chrome doesn't like it?  Is this going to be a problem?

[luuie]

A partial answer:

To have one time payment and subscription on same place, I can include the js twice, using data-namespace to separate them

<script src="https://www.sandbox.paypal.com/sdk/js?client-id=xxxxxxxxx&currency=USD" data-namespace="paypal_onetime"></script>
<script src="https://www.sandbox.paypal.com/sdk/js?client-id=xxxxxxxxx&currency=USD&intent=subscription&vault=true" data-namespace="paypal_subscr"></script>

Add two placeholders for buttons

      <div id="donate-button-container"></div>
      <div id="subscr-button-container"></div>

javascript handlers

   paypal_onetime.Buttons({
      style: {
          color:  'blue',
          label: 'donate',
      },
      onInit: function (data, actions) {
          ....
      },
      createOrder: function(data, actions) {.....}
    )}.render('#donate-button-container');

    paypal_subscr.Buttons({
      style: {
          label: 'subscribe',
      },
      onInit: function (data, actions) {
          .... 
         
      },
      createSubscription: function(data, actions) {
          ...
          
      },
    }).render('#subscr-button-container');

In addition, I have code to hide / show the appropriate *-button-container div depending on which option the user picks.