Skip to main content

Customize and embed the deets checkout form

Create a customized payment experience that matches your brand by using the visual checkout customizer. This approach provides an intuitive interface for styling and configuring payment forms without requiring any coding.

Looking for programmatic control? If you need API-based form generation for dynamic scenarios, check out our API generation guide.

Overview​

You'll learn how to:

  • Access the visual checkout customization panel
  • Configure form appearance and styling with real-time preview
  • Set up example transaction data for testing
  • Generate and embed payment forms using the visual interface
  • Handle advanced customization options through the UI

Best for: Testing, prototyping, one-time setups, and visual customization

Time to complete: ~15 minutes

1
Access the customization panel

Navigate to the deets checkout customization page:

Open Checkout Customizer

You can provide your credentials in two ways:

Option 1: Enter credentials in the interface

  1. Open the checkout customizer URL above
  2. Click the "Enter Merchant Credentials" button
  3. In the dialog that appears, enter your credentials:
    • Merchant ID: Your unique merchant identifier
    • API Key: Used to authenticate the merchant with the deets API
    • App Key: Used to authenticate the merchant with the deets API
  4. Click "Save" to proceed

Option 2: Use URL parameters Add your credentials directly to the URL:

https://sandbox.prod.digitzs.com/checkout/customize?
  merchant_id=YOUR_MERCHANT_ID&
  api_key=YOUR_API_KEY&
  app_key=YOUR_APP_KEY&
  generateForm=true

Important: These credentials are typically provided by your technical team or deets account manager. Keep your API key secure and never expose it in client-side code.

2
Configure example transaction information

Set up sample transaction fields that will be used to generate your example form:

  1. Navigate to the "Required Transaction Information" tab
  2. Fill in example transaction details for your demo form:
    • Transaction amount (converted to cents)
    • Customer contact information (email, mobile, zip code)
    • Order item details (products, quantities, prices)
  3. Click "Save Transaction Fields" to save your configuration

How this works: These sample fields are used to generate two different URLs for you:

  • Complete Example URL: Includes all the sample transaction data you configure here
  • Base Styling URL: Contains only your styling configuration without transaction details

This allows you to test with pre-filled data or add transaction parameters dynamically in your code.

3
Customize your checkout form

Click "Appearance" tab to access styling options:

  • Colors: Customize buttons, background, and text colors
  • Typography: Choose font styles that match your brand
  • Layout: Adjust spacing and form structure
  • Preview: See changes in real-time
4
Get the URL with configured UI parameters

After completing the required transaction information and customizing your form's appearance, get your URLs:

  1. Navigate to the "Use My Form" tab

    • You'll see two URL options available for each environment:

    Production URLs:

    • Embed Payment Form URL: Complete URL with transaction fields pre-filled
    https://digitz-iq-ui-iframe-content.s3.us-west-2.amazonaws.com/content-delivery/...
    • Base URL: Basic URL with only styling configuration
    https://digitz-iq-ui-iframe-content.s3.us-west-2.amazonaws.com/...

    Staging URLs (for testing):

    • Embed Payment Form URL: Complete URL with transaction fields pre-filled
    https://checkout.staging.digitzs.com/content-delivery/...
    • Base URL: Basic URL with only styling configuration
    https://checkout.staging.digitzs.com/...

  2. Copy the appropriate URL

    • Use "Copy URL" for the complete URL with transaction fields
    • Use "Copy Base URL" if you want to add transaction parameters dynamically
    • Start with staging URLs for testing, then switch to production for live transactions

Choose the right URL: Use the Embed Payment Form URL for testing or when transaction details are static. Use the Base URL when you need to add transaction parameters dynamically in your code. Start with staging URLs for development and testing, then switch to production URLs for live transactions.

5
Embed on your website

Embed the payment form using an iframe with your payment parameters:

<!DOCTYPE html>
<html>
<head>
    <title>Checkout - Your Store</title>
    <style>
        .checkout-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 2rem;
        }
        .checkout-frame {
            border: 1px solid #e3e8ee;
            border-radius: 8px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="checkout-container">
        <h1>Complete your payment</h1>
        <div class="checkout-frame">
            <iframe 
                src="https://checkout.staging.digitzs.com/content-delivery/hppgdigitzs-paolomercha-718643500-3230807-1732171363.html?
                     amount=1000&
                     email=customer@example.com&
                     zipCode=12345&
                     invoice=INV-001&
                     cardHolderName=John Doe&
                     mobileNumber=1234567890"
                width="100%" 
                height="600px" 
                frameborder="0">
            </iframe>
            <!-- For production, use: https://digitz-iq-ui-iframe-content.s3.us-west-2.amazonaws.com/content-delivery/... -->
        </div>
    </div>
</body>
</html>
6
Configure advanced parameters

You can personalize the checkout experience by adding URL query parameters:

ParameterTypeRequiredDescription
amountInteger✅Amount in cents (e.g., 1000 for $10.00)
emailString✅Customer's email address
zipCodeString✅Customer's ZIP code
invoiceString✅Unique invoice number for the transaction
cardHolderNameString✅Cardholder's name
mobileNumberString✅Customer's phone number
orderPayloadJSON✅Order information containing orderItems array
isEmailEnabledBoolean❌Show or hide email field in the UI (true/false)
isZipCodeEnabledBoolean❌Show or hide ZIP code field in the UI (true/false)
stylesJSON❌Custom styling configuration for the form

Note: Even if isEmailEnabled or isZipCodeEnabled are set to false, you should still pass the actual email and ZIP code values using the email and zipCode parameters, as they're required for payment processing.

Advanced configuration​

Order items structure
{
  "orderItems": [
    {
      "type": "string (optional)",
      "description": "string (optional)", 
      "quantity": "number (required)",
      "price": "number (required)",
      "sku": "string (required)"
    }
  ]
}
Split payment configuration

For marketplace scenarios where payments need to be split between multiple recipients:

{
  "splitConfig": {
    "recipients": [
      {
        "merchant_id": "recipient_merchant_id",
        "amount": 750,
        "description": "Seller payment"
      },
      {
        "merchant_id": "platform_merchant_id", 
        "amount": 250,
        "description": "Platform fee"
      }
    ]
  }
}

Handle payment responses​

Once your checkout form is embedded, you'll need to listen for payment events to capture tokens and handle responses.

Next step: Set up event listeners to capture payment tokens and handle checkout responses. See our comprehensive guide: Listening to Checkout Page Events

The event listener will capture:

  • Credit card payment tokens - For processing card payments
  • ACH payment data - For processing bank transfers
  • Payment errors - For handling failed transactions

Success! Your embedded checkout form is now ready. The form will automatically handle security, validation, and compliance requirements.

Next steps​

Now that your checkout form is embedded:

Get support​

If you're unsure about a setting or something isn't working: