DEV Community

holdi
holdi

Posted on

Stop Building APIs for Digital Products: How to Deliver Files Instantly with Just Frontend

#productivity #freelancing #ai #business

You are trying to sell a PDF guide, a code snippet pack, or a set of assets. You have a Stripe checkout page. You have a landing page. But you don't have a backend server, a database, or an API key management system.

You hit "pay," and then what? You have to log in, go to your email, download the file, and re-upload it to a cloud storage service so the customer can get it.

That is a manual workflow. It is slow. It is prone to human error. And it will kill your conversion rate because the buyer has to wait for an email.

You can build a fully automated digital storefront with zero backend code. It uses two things: a reliable payment gateway and a cloud storage service that supports direct access URLs.

Here is the practical workflow and the exact tools to make it work.

1. The Architecture: Frontend Only

The core problem is how to give a user a file they paid for without your server touching it. The solution is to store the file on a third-party service and use that service’s "direct link" feature.

When a payment succeeds, the third-party payment gateway sends a webhook (or a success callback) to your website. Your website takes the file URL and the user's email address and passes them to your cloud storage.

The cloud storage service generates a unique, time-sensitive download link. Your frontend code replaces the payment button with that download link. The user clicks, and the file downloads instantly.

2. The Payment Gateway: Stripe

Stripe is the industry standard for a reason. It has a robust "Connect" system, but for a simple frontend store, you only need the standard Checkout flow.

You do not need a backend server to handle the payment details; Stripe handles the encryption, tokenization, and security compliance.

Setup:

  • Create a Stripe account.
  • Go to Products and create a "Digital Product."
  • In the Checkout settings, select "Send the customer a download link."

This is the crucial step. Stripe will handle the "download link" delivery to the customer’s email after they pay. If you want to trigger a custom action on your own site, you use the webhooks feature.

3. The Storage: Cloudinary (Or Imgix/S3)

You need a place to host the file. Cloudinary is excellent for this specific use case because it creates pre-signed URLs.

Setup:

  • Create a free account.
  • Upload your digital product (the PDF, the ZIP, etc.).
  • Get your API key and Secret.
  • Important: Get the "Direct Upload" URL from their dashboard.

This "Direct Upload" URL is the key. It allows your frontend code to talk directly to Cloudinary without your backend acting as a middleman.

4. The Implementation: Frontend Logic

We will use JavaScript (Node.js or Browser) to connect these two services. You do not need a server. You can run this logic directly in the client-side code of your website or landing page.

Step A: Create the Webhook Endpoint
You need a public URL where Stripe can send the "payment.success" event.

  1. In Stripe Dashboard, go to Develop > Webhooks.
  2. Click "Add endpoint."
  3. Select the event checkout.session.completed.
  4. Enter a public URL where your frontend can listen (e.g., https://yoursite.com/api/payment-success).

Step B: The Client-Side Listener
When your page loads, listen for a message from Stripe.

// Frontend Code
window.addEventListener('message', function(event) {
  // Verify the origin for security
  if (event.origin !== 'https://checkout.stripe.com') return;

  const data = event.data;

  if (data.type === 'checkout.session.completed') {
    const fileId = data.metadata.fileId; // We'll set this in Stripe
    const userEmail = data.customer_details.email;

    // Call your frontend function to get the link
    initiateDownload(fileId, userEmail);
  }
});

function initiateDownload(fileId, userEmail) {
  // 1. Call your storage provider
  // This assumes you have a small function (or a serverless function) 
  // that generates a temporary link using your API credentials.
  fetch(`https://api.cloudinary.com/v1_1/YOUR_NAME/resources/upload/${fileId}`, {
    headers: {
      'Authorization': 'Basic ' + btoa('API_KEY:API_SECRET')
    }
  })
  .then(response => response.json())
  .then(data => {
    const directUrl = data.resource.secure_url;

    // 2. Update the UI
    const paymentButton = document.getElementById('payment-button');
    paymentButton.innerText = 'Get Instant Access';
    paymentButton.onclick = () => window.open(directUrl, '_blank');
  });
}
Enter fullscreen mode Exit fullscreen mode

Step C: Passing the Metadata
In the Stripe Checkout Session configuration, include a field named metadata.

// Creating the checkout session
const session = await stripe.checkout.sessions.create({
  line_items: [{ price: 'price_1234', quantity: 1 }],
  mode: 'payment',
  success_url: 'https://yoursite.com/success',
  // Pass the ID of your file in Cloudinary
  metadata: { fileId: 'v123456789abcdef' }
});
Enter fullscreen mode Exit fullscreen mode

When the webhook fires, data.metadata.fileId gives you the specific asset to deliver.

5. Managing Permissions

The biggest risk with frontend-only delivery is the URL being shared. If you send the link to your friend, they can share it with the world.

To prevent this, you must enforce permissions on the file itself.

  • Cloudinary: Set the upload preset to "unsigned" for frontend uploads, but restrict the file to a specific folder. You can set the file visibility to "Private." Cloudinary provides a method to generate a temporary, time-limited URL for that specific user. You must generate this link on the fly or use a proxy to validate the request before sending the file.
  • Google Drive / Dropbox: These services allow you to set the file to "Specific People" or invite users. You would then generate the link dynamically when the payment succeeds.

For the most robust security without a backend, use a simple link expiration logic. Cloudinary supports expiration timestamps. You can generate a link that is valid for only 24 hours.

Summary

You can create a digital storefront that works like magic without writing a single line of backend code.

  1. Stripe handles the payment and notifies your frontend via a webhook.
  2. Cloudinary (or similar) handles the storage and generates the direct download link.
  3. Your Frontend listens for the success signal and swaps the "Pay" button for a "Download" button using the generated URL.

This reduces your development time from days to hours, removes your infrastructure costs, and delivers a slicker experience to your customers.

I sell these kinds of digital packs in a tiny automated Telegram store - instant USDT delivery. Check it: https://t.me/m3lmhermes_bot

Top comments (0)