Install Paypal payment in Softr

Custom Coding
1

Hello! I wanted to share some code I put together for integrating PayPal with Softr. (I’m not a coding expert; I’m just a Softr user.) After trying to set up dynamic payment values in Softr’s PayPal for over two years, I finally figured it out!

To successfully install PayPal on Softr, you will need three separate pages: a List Detail page, a Success page, and a Fail page

In Airtable, you need three specific fields: a Number field for the amount, a Text field for the product name, and the Record ID.

  1. Create a new page.
  2. Add a List Detail block and a Custom Code block.
  3. Paste the code below into the Custom Code block.

I haven’t figured out how to edit the code or the font color yet, but you just need to change these three things in the code.

[your client id] -> Paypal client ID
[amount] -> Number field of Airtable
[product name] -> Text field of Airtable
[recordId] -> record Id field name

20251015101517
20251015101517354×258 7.81 KB

<script src="https://www.paypal.com/sdk/js?client-id=[your client id]&currency=USD"></script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const recordId = getUrlParam('recordId');
        if (!recordId) {
            console.error("Could not find recordId in the URL.");
            return;
        }

        const waitForData = setInterval(function () {
            if (window.records && window.records[recordId]) {
                const shippingCost = window.records[recordId].record.fields['[amount]'];
                const orderId = window.records[recordId].record.fields['[product name]'];
                
                if (shippingCost) {
                    clearInterval(waitForData);

                    paypal.Buttons({
                        style: {
                            layout: 'vertical',
                            color: 'blue',
                            shape: 'rect',
                            label: 'paypal'
                        },
                        createOrder: function(data, actions) {
                            return actions.order.create({
                                purchase_units: [{
                                                                      custom_id: recordId + "-item",
                                    amount: {
                                        value: shippingCost,
                                        currency_code: 'USD'
                                    },
                                    description: "item payment" 
                                }]
                            });
                        },
                        onApprove: function(data, actions) {
                            return actions.order.capture().then(function(details) {
                                alert('Payment complete! Thanks, ' + details.payer.name.given_name + '.');
                                setTimeout(function() {
                                    window.location.href = window.location.origin + "/success";
                                }, 1000);
                            });
                        },
                        onCancel: function(data) {
                            window.location.href = window.location.origin + "/fail";
                        },
                        onError: function(err) {
                            alert("An error occurred during payment: " + err.message);
                            window.location.href = window.location.origin + "/fail";
                        }
                    }).render('#paypal-button-container-shipping');

                } else {
                    console.error("Could not find shipping cost.");
                }
            }
        }, 100);

        function getUrlParam(name) {
            const url = new URL(window.location.href);
            const param = url.searchParams.get(name);
            if (param) return param;

            const pathName = window.location.pathname;
            const match = pathName.match(/\/r\/(rec[a-zA-Z0-9]+)/);
            return match ? match[1] : undefined;
        }
    });
</script>
<div id="paypal-button-container-shipping"></div>

please remember that I’m not a coding expert, so I might not be able to answer complex questions about the code itself. I’m just sharing this because I was moments away from giving up on Softr just to get this payment function working. I hope this helps anyone else who was in the same boat!