Architecture

📘

The Architecture page contains a series of diagrams and high level descriptions to provide you with an overview of how the various services and transaction flows function between PowerBoard and merchant environment.

Integration Workflows

Charge creation with OTT

charge with ott

Sequence Diagram

To create a one-time token for the payment flow, the process can be described as follows:

  1. The Merchant Site utilizes the PowerBoard Client SDK to render the checkout on the Browser.
  2. The Browser securely sends the Payment Data to PowerBoard through the PCI-DSS HostedField Widget.
  3. PowerBoard generates a One-time Token (OTT) and returns it to the Browser.
  4. Using the newly created OTT, the Browser initiates the Charge by sending the payment data to the Merchant Site.
  5. The Merchant Site gathers all the data received from the Browser and forwards it to PowerBoard for further processing.
  6. Once processing is complete, PowerBoard shares the Authorization Response with the Merchant Site.

PayPal Smart Button

paypal-flow

PayPal Sequence Diagram

The steps involved in creating a charge using the Paypal Smart Button can be outlined as follows:

  1. Upon loading the checkout, the Merchant Site initiates the creation of a wallet charge. It gathers the necessary payment information, such as amount, currency, and customer details, and sends these data to PowerBoard.
  2. PowerBoard responds by providing a token for creating a wallet button on the Merchant Site.
  3. The Merchant Site sends a request to the PowerBoard Client SDK, instructing it to create an instance of the Wallet Button using the provided token.
  4. The PowerBoard Client SDK, in turn, requests Paypal to render the Smart button.
  5. Once the confirmation is received from Paypal, the button is loaded onto the Merchant's checkout page.
  6. When a user clicks the Pay button, the PowerBoard Client SDK contacts PowerBoard and requests a transaction using the provided token.
  7. PowerBoard generates an order creation via the Paypal API.
  8. The Paypal API sends the order response back to PowerBoard.
  9. PowerBoard forwards the received transaction-created response to the PowerBoard Client SDK.
  10. Upon receiving the response, Paypal renders the Paypal login page for the user to proceed with the login process. Simultaneously, Paypal generates an approved callback and sends it to the PowerBoard Client SDK.
  11. PowerBoard Client SDK requests the PowerBoard to charge/wallet/capture the transaction using the provided token.
  12. PowerBoard generates a request to capture an order and sends it to the Paypal API.
  13. The Paypal API determines the appropriate flow for the request. If capture=true, the capture flow is used, and a success confirmation is sent to the PowerBoard Client SDK. If capture=false, the authorization flow is used, and a success confirmation is also sent to the PowerBoard Client SDK.
  14. After receiving the confirmation, the PowerBoard Client SDK forwards it to the Merchant Site.

Apple Pay

applePay-flow

Apple Pay Sequence Diagram

Here's a sequence diagram description that shows how to create a charge using Apple Pay:

  1. The wallet charge creation process is initiated by the Merchant Site, which sends a request to PowerBoard.
  2. In response, PowerBoard provides an initialization token to the Merchant Site.
  3. The Browser requests the initialization of the Apple Pay button from the PowerBoard Client SDK.
  4. The Client SDK checks availability and retrieves necessary payment details.
  5. The next step involves the validation of the Merchant by the PowerBoard Client SDK.
  6. The PowerBoard Client SDK is requesting that PowerBoard create a payment session.
  7. The PowerBoard Client SDK receives the outcome of the payment session creation from PowerBoard.
  8. If additional information is needed regarding the Shipping Contact and Shipping Method, Client SDK requests the necessary information update from the Browser.
  9. The Browser requests an update of the Shipping Cost from PowerBoard.
  10. The Merchant Site updates the charge and directly sends the result to PowerBoard.
  11. PowerBoard sends the updated result back to the Merchant Site, which is then passed through the chain: Merchant Site -> Browser -> PowerBoard Client SDK.
  12. The PowerBoard Client SDK initiates the capture process by sending a corresponding request to PowerBoard, along with the encrypted token. The PowerBoard decrypts the token and processes the charge creation.
  13. PowerBoard sends the result back to the PowerBoard Client SDK.
  14. The PowerBoard Client SDK provides the Browser with a success/error callback.
  15. The Browser notifies the Client SDK about the completion of processing.

Google Pay

GooglePay-Flow

Google Pay Sequence Diagram

Below is a description of a sequence diagram that illustrates the process of creating a charge using Google Pay:

  1. The wallet charge creation process is initiated by the Merchant Site, which sends a request to PowerBoard.
  2. In response, PowerBoard provides an initialization token to the Merchant Site.
  3. The Browser requests the initialization of the Google Pay button from the PowerBoard Client SDK.
  4. The Client SDK checks availability and retrieves necessary payment details.
  5. Once confirmation is received, the Client SDK inserts the Google Pay button into the Website.
  6. The user selects the Google Pay button on the Browser, triggering the payment process.
  7. SDK renders a popup window requesting the loading of payment data.
  8. If additional information is needed regarding the Shipping Contact and Shipping Method, Client SDK requests the necessary information update from the Browser.
  9. The Browser requests an update of the Shipping Cost from PowerBoard.
  10. The Merchant Site updates the charge and directly sends the result to PowerBoard.
  11. PowerBoard sends the updated result back to the Merchant Site, which is then passed through the chain: Merchant Site -> Browser -> PowerBoard Client SDK.
  12. The user clicks the "Pay" button on the Browser, triggering a payment-authorized request.
  13. The PowerBoard Client SDK initiates the capture process by sending a corresponding request to PowerBoard, along with the encrypted token.
  14. The PowerBoard decrypts the token and processes the charge creation.
  15. PowerBoard sends the result back to the PowerBoard Client SDK.
  16. The PowerBoard Client SDK provides the Browser with a success/error callback.
  17. The Browser notifies the Client SDK about the completion of processing.

Checkout Integration ( ZipPay, Afterpay v1)

ZipPay-Flow

Sequence Diagram

Below is a description of the steps involved in using a checkout service to create a charge:

  1. When placing an order, the Browser loads PowerBoard Client SDK.
  2. The PowerBoard Client SDK initializes and configures a checkout button, which is then displayed on the website.
  3. Upon clicking the button, the checkout creation process is triggered on Client SDK and sent the request to PowerBoard.
  4. PowerBoard initiates the checkout process using Client SDK.
  5. PowerBoard Client SDK requests the creation of a one-time token (OTT) from PowerBoard.
  6. PowerBoard generates a new OTT and sends it back to PowerBoard Client SDK. The SDK notifies the Browser of the OTT creation by triggering a "Finish OTT" event.
  7. Using the newly created OTT, the Browser initiates the Charge by sending the payment data to the Merchant Site.
  8. The Merchant Site collects all the data received from the website and forwards it to PowerBoard for further processing.
  9. PowerBoard generates a charge response and shares it with the Merchant Site.