How to: Create a checkout widget aligned to your website design theme on PowerBoard

Welcome to the PowerBoard Dashboard tutorials. Today we’ll show you how to create a customised Checkout widget within the PowerBoard portal to reflect your website theme. To access the PowerBoard portal, you’ll need to log in using your credentials. To setup your checkout widget, head to the Checkout tab then click on Create New. The Create New Template window will appear. For the first time setup select configuration & customisation from the drop down allowing you to do both sequentially. Then click Next. On the Create New Configuration Template window, label your Configuration Template and choose the version. For each payment method choose an option from the Flows drop-down.

For Card Payments you can choose either Guest Direct Capture for Card Payments only … or Guest Direct Capture GW 3ds for Card Payments with 3Ds. Then select the MasterCard Gateway from the Gateway dropdown. For Afterpay payments, select Direct Capture and select the Afterpay Gateway. Follow the same steps to add other alternative payment methods. For digital wallets like Apple Pay and Google Pay, we’ll select Direct Capture and then select the appropriate gateway. You can specify your business name in the Store Name field. Then click Save and Next. In the Create New Customisation template window, customise your checkout widget to reflect your website theme with a label, version, colours and font. Then Save. You’ll see a Customisation template and a Configuration template have been created. You can create an intent token from these checkout IDs to render a Checkout Master Widget for your website. Here’s an example of what the Checkout Master Widget would look like from today’s tutorial. For more information on how to integrate the Checkout widget to your website please refer to How to Integrate the Checkout Master Widget on the Developer Hub. Discover more new features on the PowerBoard Developer Hub.