Shopify结账页面强制文件上传功能开发需求问询

Hey Manuel, great question—since you're running a SIM card shop and need to enforce passport/EU ID uploads during checkout (without a ready-made app), let's break down how to implement this by modifying checkout.liquid (note: this requires Shopify Plus access, as regular Shopify plans no longer allow direct edits to this file).

Prerequisite #

• Ensure you're on a Shopify Plus plan (regular plans use Checkout Extensibility instead—reach out if you need guidance for that workflow)
• Back up your checkout.liquid file before making any changes (you can revert if something breaks)

Step 1: Add the File Upload Field to Checkout #

First, insert the file upload UI into your checkout flow. A good spot is right after the customer contact information section, or before the payment method step.

Open your checkout.liquid file and add this code where you want the upload field to appear:

<div class="field">
  <label for="id-document" class="field__label">
    * Mandatory ID Upload (Passport or EU Identity Card)
  </label>
  <div class="field__input">
    <input 
      type="file" 
      id="id-document" 
      accept="image/jpeg,image/png,application/pdf"
      required
      class="field__input"
    >
    <p class="field__note">Accepted formats: JPG, PNG, PDF (max 5MB)</p>
  </div>
</div>

This adds a required file input that only accepts common ID file types, with clear instructions for customers.

Step 2: Add Frontend Validation to Enforce Upload #

Next, add JavaScript to prevent checkout submission if no valid file is uploaded. Paste this code at the bottom of your checkout.liquid file, just before the closing </body> tag:

document.addEventListener('DOMContentLoaded', function() {
  const checkoutForm = document.querySelector('form[action="/checkout"]');
  const idFileInput = document.getElementById('id-document');
  const errorContainer = document.createElement('div');
  
  // Set up error message styling
  errorContainer.className = 'field-error';
  errorContainer.style.color = '#c41e3a';
  errorContainer.style.marginTop = '10px';
  errorContainer.style.display = 'none';
  idFileInput.parentNode.appendChild(errorContainer);

  // Listen for checkout submission
  checkoutForm.addEventListener('submit', function(e) {
    // Reset error message
    errorContainer.style.display = 'none';

    // Check if file is selected
    if (!idFileInput.files || idFileInput.files.length === 0) {
      e.preventDefault();
      errorContainer.textContent = 'Please upload a valid passport or EU ID document to proceed.';
      errorContainer.style.display = 'block';
      idFileInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }

    // Validate file type
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    const selectedFile = idFileInput.files[0];
    if (!allowedTypes.includes(selectedFile.type)) {
      e.preventDefault();
      errorContainer.textContent = 'Invalid file type. Please upload a JPG, PNG, or PDF.';
      errorContainer.style.display = 'block';
      return;
    }

    // Validate file size (5MB max)
    const maxSize = 5 * 1024 * 1024; // 5MB in bytes
    if (selectedFile.size > maxSize) {
      e.preventDefault();
      errorContainer.textContent = 'File too large. Please upload a file smaller than 5MB.';
      errorContainer.style.display = 'block';
    }
  });
});

This code checks for a valid file before allowing checkout, shows clear error messages, and scrolls the customer back to the upload field if there's an issue.

Step 3: Attach the File to the Order #

Frontend validation ensures the customer uploads a file, but you need to store it with the order for verification. Here are two options:

Option 1: Store as Base64 in Order Attributes (Simpler, for small files) #

Add this code inside the DOMContentLoaded listener (right after the validation code) to encode the file as base64 and save it to order attributes:

// Store file as base64 in order attributes
idFileInput.addEventListener('change', function() {
  const file = this.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    // Create hidden inputs to store file data in order attributes
    const base64Input = document.createElement('input');
    base64Input.type = 'hidden';
    base64Input.name = 'attributes[id_document_base64]';
    base64Input.value = e.target.result;
    checkoutForm.appendChild(base64Input);

    const nameInput = document.createElement('input');
    nameInput.type = 'hidden';
    nameInput.name = 'attributes[id_document_name]';
    nameInput.value = file.name;
    checkoutForm.appendChild(nameInput);
  };
  reader.readAsDataURL(file);
});

You'll see this data in the order's "Additional details" section in your Shopify admin. Note: This works best for files under 1MB—larger files may hit attribute length limits.

Option 2: Upload to Shopify Files API (More robust, for larger files) #

For larger files, use Shopify's Files API to upload the document directly to your Shopify store, then attach the file URL to the order. This requires adding an AJAX call:

// Upload file to Shopify Files API and attach URL to order
idFileInput.addEventListener('change', async function() {
  const file = this.files[0];
  if (!file) return;

  try {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const formData = new FormData();
    formData.append('file', file);
    formData.append('attachment[filename]', file.name);

    const response = await fetch('/admin/api/2024-01/files.json', {
      method: 'POST',
      headers: {
        'X-CSRF-Token': csrfToken,
        'Accept': 'application/json'
      },
      body: formData
    });

    const data = await response.json();
    if (data.file) {
      const urlInput = document.createElement('input');
      urlInput.type = 'hidden';
      urlInput.name = 'attributes[id_document_url]';
      urlInput.value = data.file.public_url;
      checkoutForm.appendChild(urlInput);
    }
  } catch (error) {
    console.error('File upload failed:', error);
    errorContainer.textContent = 'Failed to upload document. Please try again.';
    errorContainer.style.display = 'block';
  }
});

This will save the file to your Shopify Files library, and the URL will appear in the order's attributes.

Step 4: Test Thoroughly #

Before launching, test every scenario:

1. Try checking out without uploading a file (should show error)
2. Upload an invalid file type (e.g., .txt) (should show error)
3. Upload a file larger than 5MB (should show error)
4. Complete a checkout with a valid file and verify the document is attached to the order in your admin

Critical Notes #

• GDPR & Privacy Compliance: Collecting ID documents requires strict adherence to privacy laws (like GDPR for EU customers). Update your privacy policy to explain:
  • Why you're collecting the ID (SIM card verification)
  • How long you'll store it (delete after verification)
  • How you'll secure the data (encrypted storage, limited access)
• Server-Side Validation: Frontend validation can be bypassed. Add a Shopify Webhook or custom app to validate the file data on the server before fulfilling the order.
• Regular Plan Alternative: If you're not on Shopify Plus, use Shopify's Checkout Extensibility framework (via Shopify CLI or Admin) to build a custom checkout extension with file upload functionality.

内容的提问来源于stack exchange，提问作者Manuel