Using embed elements for HTML, CSS, and JavaScript

I am trying to get a custom integration going with Stripe. Their docs are great, and provide code samples which you can copy and paste, which are broken-down into separate tabs for HTML, CSS, and JavaScript. For example, see here for building a page to collect payment details:

Screenshot 2020-09-22 at 14.38.13

My question is how do I apply this in Webflow? I know that the embed element supports all three, and so I am wondering do I just add a separate embed element for each, one after the other? Or do I include all three blocks of code in the one embed element?

I also read in the Webflow docs that CSS must be in style tags, and JS in script tags. The Stripe docs don’t provide code this way, and so i’ll have to just figure that out separately myself too.

You have a few options really. Depending on the length of the code you could use one embed element, or break them up if it’s too long, but they can all coexist within one.

You’ll need to put tags and tags around css and JavaScript.

Another option is to rebuild in Webflow. So build out the HTML structure as defined, then add the same classes and styling defined within Webflow. And then only use embed for the JavaScript.

Interesting. I will try that, because styling it seems quite difficult to do otherwise, as I am exporting the code and hosting elsewhere and so don’t have the benefit of the preview. thanks for the reply Drew, much appreciated.