Add custom payment widget to a node? I have a widget that allows the user to book and pay on a site. I used:

function capewinefarms_preprocess(&amp;$variables, $hook) 


And ended up with something like this:

$variables['book_now_widget'] = '&lt;div style="font-weight: bold"&gt;bla bla bla&lt;/div&gt;';


Which I then output in the template using:

{{ book_now_widget }}


The problem is that instead of seeing:

 bla bla bla


in bold text, i see:

&lt;div style="font-weight: bold"&gt;bla bla bla&lt;/div&gt;


Because the widget is "self-contained", it needs all the javascript and html and everything to be outputted exactly as is, and not be formatted. It seems twig is somehow doing this.

Any idea as to how to get around this? Or any insight into why this is happening? Or perhaps an even better question might be: how do I do this the most correct way? 

I suppose I can do it as a block, but then I would have to attached a JS file, and I can't do this, because it all needs to be self contained as it is also re-used on a mobile app.

Any ideas?
1.) What is happening

Twig sanitizes all variables before displaying them. Because it assumes, that the style attribute is from user input and is considered to be unsafe. You can pass most html as #markup, but not the style attribute.

2.) You asked about the most correct way to do this is.

This would be to put all html markup in templates.

3.) How to get around this

If you don't want to build a custom twig template for this, you can use an inline template instead:

$variables['book_now_widget'] = [
        '#type' =&gt; 'inline_template',
        '#template' =&gt; '&lt;div style="font-weight: bold"&gt;{{ var1 }}&lt;/div&gt;',
        '#context' =&gt; [
          'var1' =&gt; 'bla bla bla'],
];