How to style Paydock widget

Paydock makes it possible to personalise the look and feel of your Widget and can be applied to all visual elements including title, buttons and caption.

How to set the iFrame CSS 

An iFrame is an HTML element that allows an external webpage to be embedded in an HTML document. This object allows you to insert the widget on your webpage. You will first configure the iFrame parameters including:

  • border
  • width
  • height (recommended widget height is 600px)

An example of an iframe CSS configuration can be found below:

 <style>           
	iframe {               
		border: 0;               
		width: 100%;               
		height: 300px;           
	} 
</style>

Example of Paydock Widget styles

Next you can configure the appearance using any of the visual elements of the the Paydock Widget, including:

  • background_color - the expected background colour for the selected object.
  • border - all the properties that are used to define the border (frame) of an element.
  • border_radius - allows you to round the borders of a block.
  • color - the text color.
  • font_family - the font for an element.
  • margin - the margin on all four sides of an element.
  • transition - a transition state between two elements.

Also, the following methods are available for customising the styles:

  • widget.setStyles - styles for the Paydock Widget.
  • widget.setElementStyle - styles for different elements and states.
  • widget.setTexts - styles fortexts inside the widget.

You can find more examples on methods using the Paydock Client SDK documentation.

An example of the widget code with personal styles can be found here:

<!DOCTYPE html><br><html lang="en"><br><head><br>	<meta charset="UTF-8"><br>	<title>Title</title><br>	<style><br>		iframe {<br>			border: 0;<br>			width: 100%;<br>			height: 300px;<br>		}<br>	</style><br></head><br><body><br><h1>Widget</h1>
<div id="widget"></div><script src="<a href="https://widget.paydock.com/sdk/latest/widget.umd.min.js">https://widget.paydock.com/sdk/latest/widget.umd.min.js</a>" ></script>

<script><br>  var widget = new paydock.HtmlWidget('#widget', 'public_key', 'gateway_id');<br>  widget.setEnv('sandbox');
	
  widget.setStyles({<br>	background_color: '#efedeb',<br>	border_color: '#7363ff',<br>	text_color: '#FFFFAA',<br>	button_color: 'rgba(255, 255, 255, 0.9)',<br>	font_size: '20px',<br>	font_family: 'ProximaNovaA-Black',<br>  });	
  widget.setTexts({<br>	title: 'Your card'	
  });	

// INPUT    
  widget.setElementStyle('input', {
	color: 'blue',<br>	font_family: 'cursive',<br>  });    
  widget.setElementStyle('input', {
	border: 'green solid 1px',<br>	font_family: 'serif'<br>	margin: '50px'<br>  });    
  widget.setElementStyle('input', 'focus', {
	border: 'blue solid 1px',<br>  });    
  widget.setElementStyle('input', 'error', {<br>	border: 'red solid 1px'<br>  });    

// LABEL 
  widget.setElementStyle('label', {<br> 	color: 'green',<br>	font_family: 'fantasy',<br>  });    

// TITLE    
  widget.setElementStyle('title', {<br>	color: 'red',<br>	font_family: 'ProximaNova-Regular',<br>  });    

// BUTTON    
  widget.setElementStyle('submit_button', {<br>	border_radius: '50px 50px 50px 0',<br>	background_color: 'blue',
	color: 'white',<br>	transition: 'border-radius 1s'<br>  });    
  widget.setElementStyle('submit_button', 'hover', {<br>	border_radius: '50px 0 50px 50px',<br>	background_color: 'blue',<br>	color: 'white',<br>	transition: 'border-radius 1s'<br>  });    
  widget.load();<br></script><br></body>
</html><br>

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us