Payment page

Learn how to build your no-code customer checkout flow on ProcessOut.

ProcessOut offers out of the box a default payment link that you can use to request payments from your customers. It does not require any integration in your website. You can customize it from the ProcessOut Dashboard to match your brand and your messaging.

Sample ProcessOut payment page

Example ProcessOut payment page

Using the payment page

The payment page fits into ProcessOut’s payment flow and uses primitives such as invoices and ProcessOut.js to complete transactions.

Payment page creation and payment completion flow overview

Payment page creation and payment completion flow overview

Create an invoice on ProcessOut

Use the ProcessOut API to create an invoice from your backend. Any ProcessOut invoice can be used for transactions using the payment page.

The following invoice fields are displayed by default on the payment page:

  • Invoice name
  • Invoice amount
  • Order ID
  • Invoice expiry date

The return URL of the invoice is used to redirect the user after the payment, or when the link is visited after the payment is completed.

📘

We are working to add support for creating invoices manually from the Dashboard. If you are interested in this feature, please contact your ProcessOut account manager.

Retrieve the payment page link from the invoice

Once created, the invoice objects contains a url field. This field contains the URL that you can share with the customer to make the payment.

The payment page link is also available if you fetch the invoice again after having created it.

Complete the transaction

After the payment is successful, payment page redirects the user to the return URL set in the invoice. If the return URL is not set, the payment ends on the success screen.

You can get the result of the payment in the following ways:

  • From the ProcessOut Dashboard: the transaction will be listed on the Dashboard, along with its status. You can use Dashboard search to find the invoice.
  • From the ProcessOut API: your backend can fetch the invoice to get the transaction status once the user is redirected to the return URL. You can use this status to update the state of the payment in your system.
  • From webhooks: your backend will receive ProcessOut as normal during the payment flow, so your system can also listen for the result of the payment asynchronously.

Customizing the payment page

Within the ProcessOut Dashboard, you can customize the following elements of your payment page:

CustomizationNotes
LogoAllowed file types: .svg, .png, and .jpg
Theme colorHexadecimal color
Button text colorHexadecimal color
Links in footerText and URL for links.
Up to 5 links can be configured.

Link expiry

You can define an expiration date and time for the payment link by setting the invoice expiry date (expires_at field in the invoice object). After this date, the payment link will not be available for new transactions.

Expired invoices still support voids, captures, refunds, and other operations linked to already-authorized amounts.

Upcoming features

We are actively developing the payment page feature and are adding new features on a regular basis. We are currently building the following features:

  • Card tokenization and re-use for customers paying several times on the payment page;
  • APM payments and tokenization support;
  • Manual creation of invoices from the Dashboard;
  • Backend capture for payment page transactions.

Please contact your ProcessOut account manager if you are interested in these features for your use-case.