javascriptreactjspaypalpayment

How to make paypal buttons with custom values? ReactJS


Im planning to have payment method on my website and I chose paypal for it. I didn't have many problems with static values - I just created paypal buttons at paypal' website. My problem is.. How to create paypal buttons with custom values? Let's say I have a function which does some calculations and the result of it should be value of payment. Code of static value buttons:

  <form
            action="https://www.paypal.com/cgi-bin/webscr"
            method="post"
            target="_top"
            className="paypal-form"
          >
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input
              type="hidden"
              name="hosted_button_id"
              value="CJEKJADN6L8P2"
            />
            <input
              type="image"
              src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif"
              name="submit"
              alt="PayPal – The safer, easier way to pay online!"
              className="paypal-button"
            />
            <img
              alt=""
              src="https://www.paypalobjects.com/pl_PL/i/scr/pixel.gif"
              width="1"
              height="1"
            />
          </form>

Solution

  • (Old answer--these HTML buttons posting to webscr have been deprecated, do not use them)

    Create a new button at PayPal.

    In Step 2, uncheck the option to save the button at PayPal.

    When you have generated your code, click the link to remove code protection.

    Copy the code. This code will have parameters with values that can be changed.

    The other variables you can use are documented here: https://developer.paypal.com/api/nvp-soap/paypal-payments-standard/integration-guide/Appx-websitestandard-htmlvariables/


    Current solution for simple buttons without a backend: https://www.paypal.com/buttons/

    Save the resulting code, load the page in a browser, right/secondary click and "Inspect". There are elements in the rendered HTML that you might want to hide with CSS (add a <style> tag), and you can see the <input> element where it gets the amount, which you could also hide and set in the DOM to whatever custom value.

    What you come up with may be hacked together; the best solution is to implement a full frontend+backend order creation and capture solution per the current standard integration guide.