Hosted Fields

Use our Hosted Fields to add payment fields to your checkout page. You control the look and feel of the fields, but we host the fields to make them more secure. By integrating with Hosted Fields, you allow the merchant to:
  • Accept payments from cards and bank accounts.
  • Save a customer's payment details.
  • Update a customer's saved payment details.
  • Handle surcharging on transactions.
  • Customize their checkout page to match their branding.
  • Reduce their PCI-DSS compliance requirements.

How it works

Use our Hosted Fields to create a form that the customer uses to enter their payment details. After the customer submits their payment details, we generate a single-use token that represents the details.

Using the single-use token

You can use the single-use token in the following transactions:
  • Payments > Create payment - Run a sale with a single-use token that represents the customer's card details. You can also save the customer's payment details with this method.
  • Bank transfer payments > Create payment - Run a sale with a single-use token that represents the customer's bank account details. You can also save the customer's payment details with this method.
  • Secure tokens > Create secure token - Save the customer's payment details by converting the single-use token into a secure token. You can use the secure token to run a sale later using the Create Payment method.
  • Secure tokens > Update account - Update a customer's saved payment details.
For more information about the Payroc API and other follow-on transactions, go to https://docs.payroc.com/api.

Your integration journey

  1. Authenticate your requests - Use our Identity Service to create an authentication token.
  2. Create payment forms - Use our HTML and our Hosted Fields JavaScript Library to create a payment form.
  3. Handle single-use token - Subscribe to our submissionSuccess event to receive the single-use token from our gateway.
  4. Handle errors - Subscribe to our error event to help you identify and fix any errors that you might encounter.
  5. Run follow-on transactions - Use the single-use token to run a sale or save the customer's payment details.

Guides