Hosted Fields

An AI skill is available for this guide, get it on the Skills Marketplace (GitHub).

Use our Hosted Fields solution to add payment fields to your checkout page. You control the look and feel of the checkout page, 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.
• Keep the design of their checkout page.
• Reduce their PCI-DSS compliance requirements.

How it works

Use our Hosted Fields solution 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.

sequenceDiagram
    participant M as Merchant
    participant GW as Gateway

    rect rgba(0, 81, 194, 0.4)
        Note over M: 1. Checkout page loads the form with Hosted Fields
        Note over M: 2. Customer enters and submits their payment details
        M->>GW: 3. Hosted Fields sends the payment details to the gateway
        Note over GW: 4. Gateway creates a single-use token
        GW-->>M: 5. Gateway returns the single-use token
        Note over M: 6. Use the single-use token in follow-on actions
    end

Your integration journey

1. Authenticate your session - Create a session token to authenticate your integration each time you load Hosted Fields on a webpage.
2. Create a payment form - Use our HTML and our Hosted Fields JavaScript Library to create a payment form.
3. Run a sale - Use the single-use token to run a sale.

Extend your integration

After you integrate with Hosted Fields to run a sale, you can extend your integration with additional features, for example:

• Customize your payment form.
• Close a session.
• Save a customer's payment details.

For more information about how to add these features to your integration, go to Extend your integration.