Skip to main content

Concepts

note

The Secure Payments Interface (SPI) was previously named the Payment Isolation Gateway Interface (PIGI).

The Secure Payments Interface (SPI) is the UI a customer uses to input their payment information and add the payment method to an order. The SPI 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 the SPI in a user interface:

A screenshot of SPI in a user interface.

SPI information flow​

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

  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 the SPI. The SPI 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. The SPI never reads or stores this payment information.
  4. The storefront code dispatches the `PIGI_ADD_PAYMENT action to SPI.
  5. The SPI 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 the SPI.
  7. The SPI sends the token and a payment gateway identifier to Bold Checkout.
  8. The SPI sends a PIGI_ADD_PAYMENT response to the storefront if the transaction was successful. If the transaction was not successful, the SPI 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 Secure Payments Interface page or the SPI 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 SPI 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 SPI​

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