Setting up the widget
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.
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.
- In the management console: adjust the widget theme
- Create a test application token
- Set up a script to output the widget HTML
- Set up a script to receive webhooks
- In the management console: create a webhook
- Make a test payment to test the webhook script
- Create a live application token
- Update your widget script to use the live application token
- The widget is ready