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
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.