JSFiddle - React, Tailwind, and code Playground
by João Marrucho
HTML
<div class="notWorking">
<h1>
Nor working
</h1>
<form v-if="userIsLogged && plan.name=='Small Venue'" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GFCVDZUFPDSPN">
<table>
<tr><td><input type="hidden" name="on0" value="Select No. of Sensors">Select No. of Sensors</td></tr><tr><td><select name="os0">
<option value="Up to 5">Up to 5 : £37.50 GBP - monthly</option>
<option value="Up to 10">Up to 10 : £75.00 GBP - monthly</option>
<option value="Up to 15">Up to 15 : £112.50 GBP - monthly</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<label>
<input type="image" class="cartinput" src="https://www.paypalobjects.com/en_GB/i/btn/btn_subscribe_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
</label>
</form>
</div>
<div class="working">
<h1>
Working
</h1>
<form v-if="userIsLogged && product.name == 'Sensor W85/H200'" target="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="PHXUV7YX2SZY6">
<table>
<tr><td><input type="hidden" name="on0" value="Select quantity">Select quantity</td></tr><tr><td><select name="os0">
<option value="1 Sensor">1 Sensor £31.90 GBP</option>
<option value="10 Sensors">10 Sensors £319.00 GBP</option>
<option value="100 Sensors">100 Sensors...
CSS
div {
display:inline-block;
color: white;
padding: 3px;
text-align: center;
font-family: sans-serif;
}
.notWorking {
background-color: red;
}
.working {
background-color: green;
}
h1 {
color: white;
font-size: 1rem;
}