I need a buy now pay later code for paypal integration with squarespace, that allows for multiple pricing options on the same page

Question

Here is a link to the site. As you can see in the middle of the page there are different pricing options for my retreats.

https://tomato-gardenia-7cxt.squarespace.com/egyptretreat

I have a code that produces a pay later button on squarespace. My site is retreat based and so there are multiple payment options. The pay later button is designed to split the ONE price on the page into 4 payments.

Thats one part of it. The other part is....I need to be able to have multiple pricing options using the pay later feature. This is so that I can create a pay later button for each product option on the same page (other wise I will have to create a different page for every product that offers this feature, which would be about 50 separate pages just for this feature to work for me). I obviously could so this but im looking for a possible work around.

Paypal does have a feature with the options built in, its called the Buy now button. Im thinking a merger of the two codes could produce the results im looking for.

I can post the code I have if that would help (stack overflow says its too much for this post)

I tried to enter in the paypal code in a text block and I got the pay later button BUT I need it to be able to address different pricing options.

Answer 1

Place radio buttons (html: select+option) above the Pay Later button to select an option, with a value for each option that is the amount, and have the button code read the selected amount using:

document.getElementById('mySelectId').value

---

Alternatively you could choose to render multiple separate Pay Later buttons, each with their own container with a unique id, and own script block referencing that id (or looping over an array or document.querySelector to invoke paypal.Buttons for each, if you prefer). The JS SDK should only be loaded once per page.