Getting started with the Paydock Widget

What is the Paydock Widget?

Paydock's Widget is a PCI-compliant payment module which allows you to securely capture payment details, such as credit card and bank account data, and exchange it for a one-time token to run charges. The Widget can be easily implemented on any website and is hosted by Paydock, reducing merchant PCI exposure. It allows you to offer your customers unparalleled choice over how they want to pay.

The Widget itself does not process the payment, but rather collects the card data securely, sends it to Paydock, and returns the one-time token. Since the payment details are submitted through the Paydock iFrame, they are never sent to your server in their pure form, only in the form of the token. From your server, the token and the amount are sent to PayDock to make the payment using our Charges API.

How is it set up?

Firstly, install the Client SDK as described here. With the help of this JavaScript library, you can create an iFrame on your site where the Widget will appear. You will need to use your public key (located in your PayDock dashboard -> My Account -> API & Settings) and also your gateway ID to complete the set up process. You can also customise the size and colour of your widget as described here.

Next, you should configure Widget Events to trigger certain actions when an interaction occurs with your Widget, giving you control over your customer experience. To get started, complete these steps:

Create an HTML element to contain the widget.
Initiate the widget, set various styles, configure inputs and subscribe to events.
Use a trigger to interact with the widget.

Events are used to to capture information while Triggers are used for interacting with the widget in response to these events.Below you can find the piece of code required for the basic setup:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		iframe {
			border: 0;
			width: 100%;
			height: 300px;
		}
	</style>
</head>
<body>
<h1>Simple Widget</h1>


<div id="widget"></div>


<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script src="../../../bundles/widget.umd.js" ></script>


<script>
	var widget = new paydock.HtmlWidget('#widget', 'yourpublickey', 'gatewayID');
	widget.setEnv('sandbox');
	widget.load();
</script>
</body>
</html><br>

For more details, please refer to the official documentation.

Classes of Widget

You can choose the Class that will suit your integration needs:

HtmlWidget
HtmlMultiWidget
Configuration
PaymentSourceWidget
Canvas3ds
CheckoutButton
MultiWidget
WalletButtons

Below you will find a brief outline of their main functions and use cases. You can also use several Classes at the same time.

HtmlWidget

This is the most common type of widget that supports one gateway and allows working with HTML. It generates a one-time token using the credit card or bank account details of your customer.

HtmlMultiWidget

With this Class, you can support many gateways and payment types (bank account and card). Every gateway is configured separately as all of them have different settings and mandatory fields. Unlike MultiWidget, this widget class allows working with HTML and subscribing to events.

Configuration

This Class allows you to create a configuration for a specific gateway using its ID and the payment type, delineating between several gateways. This allows your customer to select their preferred gateway from the options available. The method configuration.setFormFields(fields) allows you to define the mandatory fields for every tab.

PaymentSourceWidget

This class populates all the payment sources added previously for a customer. PaymentSourceWidget requires a query token, which is a pre-generated and secure token for limiting the list of payment sources specific for a customer or reference. You will need your secret key to get the query token. First, you send the GET request get the customers list to receive a query token. Then you can use this query token as a one-time token for running charges.

Canvas3ds

This Class supports the integration with 3D Secure. It renders the UI for payment authentication, including an additional verification step when making a 3D secure card payment.

CheckoutButton

This Class is used specifically for gateways which support wallet functionality. Currently, you can use the checkout widget for PayPal Classic, Afterpay, and Zipmoney.

MultiWidget

This Class will generate an iFrame link but it will not allow working with HTML elements and events. You should choose this Class when you want to write an integration for the widget yourself. This Class supports several gateways and payment types.

WalletButtons

This class of widget is used to work with Google Pay and Apple Pay wallets. Google Pay is compatible with the Google Chrome browser and Apple Pay - with Safari. This widget works along with this charge endpoint.