Dynamic Checkout builds on top of the standard ProcessOut payment flow by leveraging the Invoice object. You can retrieve an invoice from your frontend code to get the list of payment methods that should be offered for the invoice, along with the information required to render the payment form.

Frontend integration options

We offer several ways to integrate Dynamic Checkout in the client side of your application. They range from drop-in SDKs that render best-in-class UIs easily, to deeply customizable API-driven bindings. Find below a summary of integration options.

	ProcessOut.js (web)	Headless	iOS SDK	Android SDK
Customization	Medium	Very high	Medium	Medium
Effort to integrate	Low	High	Low	Low
Documentation	Web: ProcessOut.js	Web: Headless (advanced)	Mobile: iOS	Mobile: Android

Flow overview

Create an invoice

Follow the Creating an invoice documentation to create a ProcessOut invoice from your server. You can set as much information as you want.

If you know that the customer is returning or may return in the future, we recommend to attach the customer ID to the invoice. This will allow ProcessOut to save and offer payment methods to the customer in the future.

Optionally, to support saving and re-using payment methods securely, retrieve the invoice client secret. It is located in the x-processout-client-secret HTTP header of the invoice creation call. While the invoice ID can be shared publicly, we strongly recommend that the client secret remains private.

After creating the invoice, you need to pass its ID and client secret to your frontend.

Display the checkout interface

The checkout interface’s role is to present payment options to the user, handle their selection, and to authorize the payment from the frontend. As this is a complex function with several possible flows, we recommend integrating using our prebuilt SDKs.

If you are using ProcessOut.js or the ProcessOut mobile SDKs, you need to initialize the payment process with the invoice ID, and optionally the client secret. Please see the documentation below for each platform:

If you are interested in building your own payment UI, please follow our Headless documentation.

Capture the payment

From this point, the flow is the same as any other ProcessOut transaction.

When the checkout interface completes, the invoice should the in the authorized state. You can proceed to capturing it from your backend.