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.

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.

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.

Optional: Add structured information

You can display extra information on the payment page using the invoice’s metadata. Follow these steps:

1. Add the information you need to the metadata structure of the invoice. For example, set a memo metadata with more information about the payment.
2. Update your project settings to expose the metadata key publicly (e.g. memo).

By default, ProcessOut keeps your invoice metadata private and does not expose it to the client side. You are required to change your project settings to explicitly expose the metadata fields you want to display on the payment page. This data will be displayed in a structured way at the top of the payment page.

📘

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.

Optional: Generate a QR code

ProcessOut can generate a QR code for the invoice URL. To retrieve it, set the expand parameter to the property invoice_qrcode.

The invoice object will be returned with the url_qrcode property. The QR code is a base64-encoded PNG that you can embed in your application. It points to the URL contained in the url field.

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:

Link expiry and cancellation

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.

You can also cancel a payment link before the payment is attempted by using the ProcessOut API to delete the invoice.

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:

• Payment method customization and re-use for customers paying several times on the payment page;
• Manual creation of invoices from the Dashboard.

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