Skip to main content

Payment Isolation Gateway Interface

The Payment Isolation Gateway Interface (PIGI) is the UI a customer uses to input their payment information and add the payment method to an order. PIGI isolates customer payment information from everything else that happens during a checkout experience. This separation increases the security of the customer’s payment information.

The following image shows a screenshot of PIGI in a user interface:

A screenshot of PIGI in a user interface.

PIGI information flow​

The following diagram and steps show the flow of information between the storefront, PIGI, Bold Checkout, and the payment gateway when someone places an order:

A diagram showing the interactions between the storefront, PIGI, and the payment gateway

  1. The customer clicks a Checkout or another button that initializes the checkout process.
  2. The storefront code makes a call to the Checkout Frontend API to retrieve the URL for PIGI. PIGI forms security checks and initializes an <iframe> on the page.
  3. The customer enters their payment information in the <iframe> and clicks Place an Order or another button that completes the checkout process. PIGI never reads or stores this payment information.
  4. The storefront code dispatches the `PIGI_ADD_PAYMENT action to PIGI.
  5. PIGI recognizes the action and sends a request to the payment gateway.
  6. The payment gateway reads the customer payment information and tokenizes the customer payment information. The gateway then sends this token back to PIGI.
  7. PIGI sends the token and a payment gateway identifier to Bold Checkout.
  8. PIGI sends a PIGI_ADD_PAYMENT response to the storefront if the transaction was successful. If the transaction was not successful, PIGI displays an error.
  9. The storefront receives the response. At this point, you can call the Get Application State endpoint to ensure the order total is completely covered. If it is not, you can prompt the customer to add another payment.
  10. When ready, the storefront triggers payment processing by calling the Process Order endpoint.
  11. Checkout processes the order.
  12. The payment gateway verifies that there are enough funds on the card to complete the transaction and authorizes the charge on the card.
  13. When complete, the storefront displays a message confirming the order has been placed.

For more information about implementation, refer to the Payment Isolation Gateway Interface page or the PIGI API reference.

Strong Customer Authentication (SCA)​

SCA is a regulatory requirement set by the second Payment Services Directive (PSD2), which aims to create additional layers of security for banks and customers in Europe. Banks that facilitate transactions between a merchant and customer that are both in Europe may require two of the following three methods of authentication:

  • Something the customer knows (such as a password).
  • Something the customer has (such as a token or physical item).
  • Something the customer is (such as biometric data).

To meet SCA requirements, Bold uses 3D Secure (3DS), a technology that requires customers to complete additional steps to verify their identity. Bold displays 3DS in the PIGI iframe, and you can use the PIGI_HANDLE_SCA action and responses to interact with 3DS and its responses.

For more information about implementing SCA on your store, refer to Handling Strong Customer Authentication (SCA).

Styling PIGI​

To style PIGI, use the Create CSS Styling for PIGI endpoint. For more information, refer to Style the Checkout with CSS.