Widget overview

Widget provides an interface for customers to make transaction tokens, charges, and subscriptions for a store. Based on the parameters that are used to create the widget and the configuration options set on the store, the customer will be presented with a form where they can enter their payment details (credit card number, address, email, and so on). The widget will use the UnivaPay Javascript SDK to make the required requests to the API and create the necessary resources. Finally, the widget will display to the customer a success or failure screen, depending on the result of the API requests.

Setting up the widget

There are two ways that the widget can be set up: via an HTML element or with a Javascript function.

Using the widget

When the customer opens the widget, they will be prompted to fill out a form with their payment information. Upon submitting the form, the widget will make requests to the API to create the resources necessary (a transaction token, and possibly a charge or a subscription). If all resources are created successfully, the IDs of the created transaction token will be injected into the page in the form of a hidden input element. Additionally, if a subscription was created or a charge was created with a recurring token, then the IDs of the subscription/charge will also be injected into the page. For details on the names of these injected elements, see documentation on the name parameter below.

The logo displayed at the top of the widget can be specified in the store settings. If no logo is set in the store, the one set in the general settings will be used. If neither of these logos are set, a default logo will be displayed.


Widget: dynamic setup

Why use a dynamic setup

Using a dynamic setup will grant you a greater flexibility.
For example, setting the amount (data-amount) dynamically will allow your customers to buy multiple products in one transaction.

As the payment logic and management is coming from our service, you don’t need to develop it from scratch.

It is also possible to set up metadata dynamically, which allow you to link the order data with the payment data, making it easier to identify a transaction when a refund is needed.

Payment results

The payment result will be send (POST) as JSON data to the URL specified in Webhooks created in the management console.
Please refer to Reference > Webhook and set up a a script to get data (POST) and update order status etc.

Setup process

  1. In the management console: adjust the widget theme
  2. Create a test application token
  3. Set up a script to output the widget HTML
  4. Set up a script to receive webhooks
  5. In the management console: create a webhook
  6. Make a test payment to test the webhook script
  7. Create a live application token
  8. Update your widget script to use the live application token
  9. The widget is ready