Streaming live at 10am (PST)

CMS Pay Pal Button Embed

Hello,
Very new to Webflow. I would like to know how to embed PayPal Button Codes into a Webflow CMS Collection List. Also, can the Pay Pal Button code incorporate one of Webflow’s Button’s rather than using a button image? If so, how?

I tried embedding a Pay Pal Button Code into the Collection list and of course it duplicated the same button code for the same item all the way down the list. There would need to be a unique button for each item.

Here is an Example of of the current PayPal button code:

Select a Size:
24in x 13in $350.00 USD 30in x 17in $425.00 USD 36in x 20in $500.00 USD 43in x 24in $575.00 USD 64in x 36in $675.00 USD 75in x 42in $800.00 USD

Any help would be greatly appreciated!:slightly_smiling_face:
Thank you,
Sara


Here is my public share link: https://preview.webflow.com/preview/saras-fresh-project-29b7f0?utm_medium=preview_link&utm_source=designer&utm_content=saras-fresh-project-29b7f0&preview=fe3ebf1fe45ff37c9b9a87a8573ca881&pageId=5d36297a16ec366547fecf30&itemId=5d3629872c17ab85bfaca3c6&mode=preview
(how to access public share link)

The way to do this at the moment is to look at this shopify example and change it to fit PayPal’s embed code. https://university.webflow.com/integrations/shopify . I did this recently with an EJunkie button and it works really well.

2 Likes

Hi Sarah,

Thank you! I appreciate your response.

Followed the instructions from the Shopify example. It appears that PayPal has one unique id called “hosted_button_id”. I have two Pay Pal buttons for each item: one for prints on paper and one for prints on canvas. In the collection, two plain text fields were created: one titled “button id paper” and one titled “button id canvas” . The unique PayPal hosted Button id was pasted into these fields. An embed component was added to a collection list and the PayPal code was pasted in where the unique “hosted_button_id” code was, then added the field “button id paper” or “button id canvas” when applicable.
Unfortunately the variable print size options in the button code did not carry over by adding the unique “hosted_button_id”. Perhaps a field must be made for the print size options ?

Share only Link:
https://preview.webflow.com/preview/saras-fresh-project-29b7f0?utm_medium=preview_link&utm_source=designer&utm_content=saras-fresh-project-29b7f0&preview=fe3ebf1fe45ff37c9b9a87a8573ca881&pageId=5d36297a16ec366547fecf30&itemId=5d362987db404af757c1573b&mode=preview

:thinking: I’ve only added a buy button with one option. Not with variants before.
Are you sure you copied the full code?
There’s a couple of errors showing here. For example, there’s an end tag for a span wrapper but no opening tag

.
I wonder if there’s a way to avoid having to make the variants work. Is there a paypal option that allows your customers to pick their size print after they added their order to the cart?
That way you’re only dealing with one challenge.

Hi Sarah,
Thanks for pointing out that there were errors. I went back to PayPal and copied a fresh version of the code and corrected any tag errors, then published the page to test. Unfortunately the Pay Pal Button code is still not functioning properly. Due to the variants, this may be pushing the Pay Pal code too far in Webflow.

Hey Sarah could you please go into a little more detail on how 1 for 1 the shopify instructions work for paypal because I dont see where to add the ID and component.

@averett_barksdale welcome to the forum! Do you have the code from paypal? If you could send me a message, or blur any identifying info, with that code I’ll take a look and let you know.

Just sent you a screenshot of the button code.

@averett_barksdale yes, I saw. i didn’t reply anymore since it was past 9pm in my timezone. Got to have limits to volunteering :slight_smile: .
You’d have to compare the code for different products. What pieces of code identify a specific product? Those values need to be added to the CMS as text fields. Looking at this code, I’d assume the only value that’s specific to the product is this one

. I can’t say for sure since I don’t use stand-alone paypal buttons. If you’ve got a read-only link, I can take a look at how you’d best implement this. It’s really the shopify tutorial but swapping out the shopify fields like ID and component for the paypal ones.