ShopDrop — Payment Integration Guide

🏦

1. Payment Processor Comparison

Choose the processor that fits your business. Most dropshippers use Stripe as the primary processor.

Provider	Transaction Fee	Setup	Cards	PayPal	Apple/Google Pay	Best For
🟣 Stripe	2.9% + $0.30	Easy	✓	✗	✓	Most dropshippers
🔵 PayPal	3.49% + $0.49	Easy	✓	✓	✓	Buyer trust / global
🟡 Square	2.9% + $0.30	Medium	✓	✗	✓	Physical + online
⚫ Shopify Payments	2.4–2.9%	Included	✓	✗	✓	Shopify stores only

💡

Recommendation: Use Stripe as your main processor and add PayPal as a secondary option. Together they cover 95%+ of customers and increase conversion significantly.

🟣

2. Stripe Integration

Recommended

1

Create a Stripe Account

Go to stripe.com → click Start now → fill in your business info. You can start in Test Mode (no real money moves) and go live when ready.

🔑

After signing up, go to Developers → API Keys. Copy your Publishable Key (starts with pk_test_) and your Secret Key (starts with sk_test_). Keep the secret key private — never put it in frontend code.

2

Add Stripe.js to Your Store

Paste this script tag inside the <head> of your store.html:

<!-- Add to <head> in store.html -->
<script src="https://js.stripe.com/v3/"></script>

3

Initialise Stripe & Mount the Card Element

Replace the plain payment dropdown in your checkout form with a real Stripe card field. Add this to your checkout modal HTML:

<!-- Replace the <select id="payment"> block with this -->
<div class="form-group">
  <label>Card Details *</label>
  <div id="card-element"
    style="border:1.5px solid #e0e0e0;border-radius:10px;padding:12px 14px;background:#fff;"></div>
  <div id="card-errors" style="color:#e94560;font-size:0.82rem;margin-top:6px;"></div>
</div>

Then add this JavaScript (replace YOUR_PUBLISHABLE_KEY):

// ── Stripe Setup ──────────────────────────────────────
const stripe = Stripe('pk_test_YOUR_PUBLISHABLE_KEY_HERE');
const elements = stripe.elements();
const cardElement = elements.create('card', {
  style: {
    base: {
      fontSize: '15px',
      color: '#1a1a2e',
      '::placeholder': { color: '#aaa' }
    }
  }
});
cardElement.mount('#card-element');

// Show card validation errors in real time
cardElement.on('change', ({ error }) => {
  const el = document.getElementById('card-errors');
  el.textContent = error ? error.message : '';
});

4

Create a Payment Intent on Your Backend

Stripe requires a server-side step to create a Payment Intent. Here's a minimal Node.js / Express example:

// server.js — Node.js + Express backend
const express = require('express');
const stripe = require('stripe')('sk_test_YOUR_SECRET_KEY');
const app = express();
app.use(express.json());

app.post('/create-payment-intent', async (req, res) => {
  const { amount } = req.body; // amount in cents, e.g. 3999 = $39.99
  try {
    const intent = await stripe.paymentIntents.create({
      amount,
      currency: 'usd',
      automatic_payment_methods: { enabled: true }
    });
    res.json({ clientSecret: intent.client_secret });
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

app.listen(3000);

⚠️

Never put your Stripe Secret Key in frontend JavaScript. It must only live on your server (environment variable: process.env.STRIPE_SECRET_KEY).

5

Confirm Payment from the Frontend

Update your placeOrder() function to call Stripe's confirmCardPayment:

async function placeOrder() {
  // 1. Validate form fields first (keep your existing validation)

  // 2. Get total in cents
  const totalCents = Math.round(getTotal() * 100);

  // 3. Request a Payment Intent from your server
  const res = await fetch('/create-payment-intent', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ amount: totalCents })
  });
  const { clientSecret } = await res.json();

  // 4. Confirm the card payment
  const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: document.getElementById('fname').value + ' ' +
              document.getElementById('lname').value,
        email: document.getElementById('email').value
      }
    }
  });

  if (error) {
    showToast('❌ Payment failed: ' + error.message);
  } else if (paymentIntent.status === 'succeeded') {
    // 5. Show success screen + forward order to your supplier
    showSuccessScreen(paymentIntent.id);
    forwardOrderToSupplier(); // see Backend section below
  }
}

6

Go Live

When you're ready to accept real money, swap your test keys for live keys in the Stripe Dashboard under Developers → API Keys → Live Keys. Replace pk_test_... with pk_live_... and sk_test_... with sk_live_....

✅

Use Stripe's test card 4242 4242 4242 4242 (any future expiry, any CVV) to test payments without real money.

🔵

3. PayPal Integration

PayPal's Smart Payment Buttons are the easiest way to add PayPal, Venmo, and credit/debit card support in one widget.

1

Create a PayPal Developer App

Go to developer.paypal.com → Log In → My Apps & Credentials → Create App. Copy your Client ID.

2

Add PayPal SDK to Your Store

Add this to your <head> (replace YOUR_CLIENT_ID):

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>

3

Render PayPal Buttons in Checkout Modal

Add a container div in your checkout modal HTML, then render the buttons with JavaScript:

<!-- Add this above the place-order button -->
<div id="paypal-button-container" style="margin-bottom:14px;"></div>

// JavaScript — render buttons when checkout opens
paypal.Buttons({
  createOrder: (data, actions) => {
    return actions.order.create({
      purchase_units: [{
        amount: {
          value: getTotal().toFixed(2) // e.g. "39.99"
        }
      }]
    });
  },
  onApprove: async (data, actions) => {
    const order = await actions.order.capture();
    showSuccessScreen(order.id);
    forwardOrderToSupplier();
  },
  onError: (err) => {
    showToast('❌ PayPal error. Please try again.');
  }
}).render('#paypal-button-container');

💡

PayPal Sandbox accounts let you test with fake money. Create sandbox buyer/seller accounts at developer.paypal.com → Sandbox → Accounts.

📱

4. Apple Pay & Google Pay

Both are automatically included when you use Stripe's Payment Request Button — no extra setup needed.

1

Enable with Stripe (One-Time Setup)

In the Stripe Dashboard → Settings → Payment Methods → enable Apple Pay and Google Pay. Apple Pay requires domain verification (Stripe does this automatically for hosted domains).

2

Add the Payment Request Button

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: { label: 'ShopDrop Order', amount: getTotal() * 100 },
  requestPayerName: true,
  requestPayerEmail: true,
  requestShipping: true
});

const prButton = elements.create('paymentRequestButton', {
  paymentRequest
});

// Only mount if Apple/Google Pay is available on this device
paymentRequest.canMakePayment().then(result => {
  if (result) prButton.mount('#payment-request-button');
  else document.getElementById('payment-request-button').style.display = 'none';
});

paymentRequest.on('paymentmethod', async (e) => {
  // Confirm payment and call e.complete('success') or e.complete('fail')
});

⚙️

5. Backend Order Handling

After a payment is confirmed, your backend needs to save the order and notify your dropship supplier.

1

Save Orders to a Database

Use a simple service like Supabase (free tier), Firebase, or Airtable to store each order:

// After payment succeeds — save order to Supabase
async function saveOrder(paymentId) {
  const order = {
    payment_id: paymentId,
    customer_name: fname + ' ' + lname,
    customer_email: email,
    shipping_address: address + ', ' + city + ', ' + zip,
    items: cart.map(i => ({ id: i.id, name: i.name, qty: i.qty, price: i.price })),
    total: getTotal(),
    status: 'pending',
    created_at: new Date().toISOString()
  };
  // POST to your server, which saves to Supabase/Firebase/Airtable
  await fetch('/save-order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order)
  });
}

2

Send a Confirmation Email

Use SendGrid or Resend.com (free tier) to automatically email the customer after a successful order:

// Node.js — server-side email with Resend
const { Resend } = require('resend');
const resend = new Resend('YOUR_RESEND_API_KEY');

await resend.emails.send({
  from: 'orders@shopdrop.com',
  to: order.customer_email,
  subject: `✅ Order Confirmed — #${order.payment_id}`,
  html: `<h2>Thank you for your order!</h2>
    <p>Order ID: <strong>${order.payment_id}</strong></p>
    <p>We'll send a shipping update soon.</p>`
});

📦

6. Dropship Automation Flow

The core of your business — automatically forwarding orders to your supplier so they ship directly to your customer.

1

Option A: AliExpress / DSers (Most Common)

If your supplier is on AliExpress, use DSers to auto-place orders. You receive payment → DSers places the AliExpress order with your customer's address automatically.

🔗

Connect DSers at dsers.com. It has a free plan that handles 3,000 orders/month and integrates directly with AliExpress suppliers.

2

Option B: Supplier API (Advanced)

If your supplier has an API, forward orders programmatically from your backend:

// Forward order to supplier API after payment succeeds
async function forwardOrderToSupplier() {
  const supplierOrder = {
    ship_to: {
      name:    document.getElementById('fname').value + ' ' + document.getElementById('lname').value,
      address: document.getElementById('address').value,
      city:    document.getElementById('city').value,
      zip:     document.getElementById('zip').value,
      country: document.getElementById('country').value
    },
    items: cart.map(item => ({
      supplier_sku: item.supplierSku, // map your product IDs to supplier SKUs
      quantity: item.qty
    }))
  };

  // This call goes server-side to protect your supplier API key
  await fetch('/forward-to-supplier', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(supplierOrder)
  });
}

3

Option C: Email-to-Supplier (Simplest)

If your supplier takes orders by email, send an automated email with the order details using SendGrid or Resend every time a payment is confirmed. Quick to set up, works for low volumes.

💡

Many small dropshippers start with email orders to their supplier, then move to API automation once they hit 50+ orders per day.

✅

7. Go-Live Checklist

Before accepting real orders, make sure everything on this list is done:

✅
Stripe / PayPal live keys are in place (not test keys)Payment
✅
SSL certificate enabled (HTTPS) — required for card paymentsSecurity
✅
Stripe domain verification completed (for Apple Pay)Payment
✅
Test purchase completed end-to-end with real cardTesting
✅
Order confirmation email is being sent to customersEmail
✅
Supplier order forwarding is working correctlyDropship
✅
Refund / return policy page is visible to customersLegal
✅
Privacy Policy and Terms of Service pages are liveLegal
✅
Stripe webhook set up to handle failed / disputed paymentsPayment
✅
Mobile checkout tested on iPhone and AndroidTesting
✅
Orders are being saved to your databaseBackend
✅
Support email address is working and monitoredSupport

🛠️

Recommended Tools & Services

🟣 Stripe

2.9% + $0.30

Best-in-class payment infrastructure. Handles cards, Apple Pay, Google Pay, subscriptions, and more.

Instant payouts available
Powerful dashboard & analytics
No monthly fees

stripe.com →

🔵 PayPal

3.49% + $0.49

Trusted by 400M+ buyers. Increases conversion especially for international customers.

Buyer/seller protection
Pay Later / BNPL option
Easy setup

developer.paypal.com →

📧 Resend

Free up to 3,000/mo

Modern transactional email service. Send order confirmations in minutes with a clean API.

React email templates
Deliverability analytics
Free tier for small stores

resend.com →

🗄️ Supabase

Free up to 500MB

Open-source Firebase alternative. Store orders, customers, and inventory with a Postgres database.

Real-time order tracking
REST & JavaScript SDK
Free tier for starters

supabase.com →

📦 DSers

Free up to 3,000 orders

The #1 AliExpress dropshipping tool. Auto-places supplier orders and syncs tracking numbers.

Bulk order processing
Supplier mapping
Shopify / WooCommerce / API

dsers.com →

🌐 Vercel / Netlify

Free tier available

Host your store and backend serverless functions for free. Deploy in minutes from GitHub.

Automatic HTTPS / SSL
Serverless functions
CDN-powered globally

vercel.com →

💳 Payment Integration Guide

📋 Contents

1. Payment Processor Comparison

2. Stripe Integration

Create a Stripe Account

Add Stripe.js to Your Store

Initialise Stripe & Mount the Card Element

Create a Payment Intent on Your Backend

Confirm Payment from the Frontend

Go Live

3. PayPal Integration

Create a PayPal Developer App

Add PayPal SDK to Your Store

Render PayPal Buttons in Checkout Modal

4. Apple Pay & Google Pay

Enable with Stripe (One-Time Setup)

Add the Payment Request Button

5. Backend Order Handling

Save Orders to a Database

Send a Confirmation Email

6. Dropship Automation Flow

Option A: AliExpress / DSers (Most Common)

Option B: Supplier API (Advanced)

Option C: Email-to-Supplier (Simplest)

7. Go-Live Checklist

Recommended Tools & Services

🟣 Stripe

🔵 PayPal

📧 Resend

🗄️ Supabase

📦 DSers

🌐 Vercel / Netlify