JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<div id="checkout">
		<div id="checkout_header">
			Shop Checkout
		</div>
		<div id="checkout_wrapper">
			<div id="checkout_loader"><div class="loader">Loading</div></div>
		</div>
		<div id="checkout_message">Sample Footer Message</div>
		<div id="checkout_button" onclick="$ipsp('checkout').send('submit')">Pay</div>
</div>

CSS

html,body{
    font-family:"Open Sans",Arial,Helvetica,sans-serif;
}
#checkout{
	width:450px;
	margin:0 auto;
}
#checkout_header{
	padding:0 20px;
	line-height:50px;
	border-bottom:1px solid #ccc;
}
#checkout_wrapper{
	background-color:#fff;
	height:290px;
}
#checkout_message{
	padding:0px 20px;
	font-size:14px;
    margin-bottom:18px;
}
#checkout_loader{
	padding:20px;
	text-align:center;	
    .loader{
        color:#949494;
        text-transform:uppercase;
        margin-bottom:20px;
    }
}
#checkout_button{
	padding:25px;
	text-align:center;
	cursor:pointer;
	background-color:lightgreen;
	color:#fff;
    &:hover{
        background-color:green;
    }
}

JavaScript

var checkoutStyles = {
		'html , body' : {
			'overflow' : 'hidden'
		},
		'.input_suggest .arrow' : {
			'display' : 'none'
		},
		'[name="card_number"]' : {
			'width' : '320px !important'
		},
		'.pages-checkout .page-section-shopinfo' : {
			'background' : 'transparent'
		},
		'.col.col-shoplogo' : {
			'display' : 'none'
		},
		'.col.col-language' : {
			'display' : 'none'
		},
		'.pages-checkout' : {
			'background' : 'transparent'
		},
		'.col.col-login' : {
			'display' : 'none'
		},
		'.pages-checkout .page-section-overview' : {
			'background' : '#fff',
			'color' : '#252525',
			'border-bottom' : '1px solid #dfdfdf'
		},
		'.col.col-value.order-content' : {
			'color' : '#252525'
		},
		'.page-section-footer' : {
			'display' : 'none'
		},
		'.page-section-tabs' : {
			'display' : 'none'
		},
		'.btn-row' : {
			'margin' : '20px'
		},
		'#submit_button_row' : {
			'display': 'none'
		},
		'.btn-block' : {
			'font-size' : '18px',
			'line-height' : '50px',
		}
	};

	function __DEFAULTCALLBACK__(data,type){
        var form;
        console.log('action',data.action);
        console.log('url',data.url)
        for(var prop in data.send_data){
            if(data.send_data.hasOwnProperty(prop)){
                console.log(prop,data.send_data[prop]);
            }
        }
        if ( data.error){
        	console.log(data,data.error);
        	return;
        }
        if (data.action == 'redirect') {
            this.loadUrl(data.url);
            return;
        }
        if (data.send_data.order_status == 'delayed') {
            this.unbind('ready');
            this.hide();
            return;
        } else {
            this.unbind('ready').action('ready', function() {
                this.show();
            });
        }
        if( data.send_data && data.url ){
            form = prepareFormData(data.url,data.send_data);
            this.find('body').appendChild(form);
            form.submit();
           ...