E-commerce Integration: Adding Crypto Payments to Your Online Store

Adding cryptocurrency payments to your e-commerce store opens new revenue streams and reaches customers worldwide. This guide shows you how to integrate crypto payments into popular e-commerce platforms.

Why Add Crypto Payments?

Benefits for E-commerce

  • Global Reach: Accept payments from customers worldwide
  • Lower Fees: Save on payment processing costs
  • Faster Settlement: Receive funds in minutes, not days
  • No Chargebacks: Reduce fraud and chargeback costs
  • New Customer Base: Attract crypto-savvy customers

Integration Options

1. Shopify Integration

Shopify doesn't natively support crypto, but you can add it:

// Custom payment method
const cryptoPayment = {
  name: 'Pay with USDT',
  checkout: async (amount, orderId) => {
    // Create invoice via API
    const invoice = await createInvoice({
      amount,
      description: `Order #${orderId}`
    });

    // Redirect to payment page
    return {
      redirectUrl: `/pay?invoice=${invoice.id}`,
      qrCode: invoice.qrCode
    };
  }
};

2. WooCommerce Integration

WooCommerce plugin example:

<?php
// WooCommerce payment gateway
class WC_Crypto_Payment_Gateway extends WC_Payment_Gateway {

  public function __construct() {
    $this->id = 'crypto_payment';
    $this->method_title = 'Cryptocurrency Payment';
    $this->method_description = 'Accept USDT payments';
  }

  public function process_payment($order_id) {
    $order = wc_get_order($order_id);

    // Create invoice
    $invoice = $this->create_invoice($order);

    // Store invoice ID
    $order->update_meta_data('crypto_invoice_id', $invoice->id);
    $order->save();

    // Return payment page
    return array(
      'result' => 'success',
      'redirect' => $invoice->payment_url
    );
  }

  private function create_invoice($order) {
    // Call payment gateway API
    $response = wp_remote_post('https://api.fromchain.plus/invoices', array(
      'headers' => array(
        'Authorization' => 'Bearer ' . $this->api_key,
        'Content-Type' => 'application/json'
      ),
      'body' => json_encode(array(
        'amount' => $order->get_total(),
        'currency' => 'USDT',
        'description' => 'Order #' . $order->get_id()
      ))
    ));

    return json_decode(wp_remote_retrieve_body($response));
  }
}

3. Custom Integration

For custom stores, integrate directly:

// Express.js example
app.post('/checkout', async (req, res) => {
  const { items, total } = req.body;

  // Create order
  const order = await createOrder(items, total);

  // Create payment invoice
  const invoice = await paymentGateway.createInvoice({
    amount: total,
    currency: 'USDT',
    description: `Order #${order.id}`,
    metadata: {
      orderId: order.id
    }
  });

  // Store invoice ID
  await order.update({ invoiceId: invoice.id });

  // Return payment details
  res.json({
    orderId: order.id,
    invoiceId: invoice.id,
    depositAddress: invoice.depositAddress,
    qrCode: invoice.qrCode,
    amount: invoice.amount
  });
});

Payment Flow

Step 1: Customer Initiates Payment

// Frontend: Checkout page
async function initiatePayment(orderId) {
  const response = await fetch('/api/checkout', {
    method: 'POST',
    body: JSON.stringify({ orderId })
  });

  const { invoiceId, depositAddress, qrCode, amount } = await response.json();

  // Display payment details
  showPaymentDetails({
    address: depositAddress,
    qrCode,
    amount
  });

  // Start polling for payment
  pollPaymentStatus(invoiceId);
}

Step 2: Monitor Payment

async function pollPaymentStatus(invoiceId) {
  const interval = setInterval(async () => {
    const status = await checkInvoiceStatus(invoiceId);

    if (status === 'CONFIRMED') {
      clearInterval(interval);
      handlePaymentConfirmed(invoiceId);
    } else if (status === 'EXPIRED') {
      clearInterval(interval);
      handlePaymentExpired(invoiceId);
    }
  }, 5000); // Poll every 5 seconds
}

Step 3: Fulfill Order

// Webhook handler
app.post('/webhooks', async (req, res) => {
  const { event, data } = req.body;

  if (event === 'invoice.confirmed') {
    const order = await findOrderByInvoiceId(data.invoiceId);

    // Update order status
    await order.update({ status: 'paid' });

    // Fulfill order
    await fulfillOrder(order);

    // Send confirmation email
    await sendOrderConfirmation(order);
  }

  res.status(200).json({ received: true });
});

User Experience Best Practices

1. Clear Instructions

Provide clear payment instructions:

  • Show QR code prominently
  • Display deposit address clearly
  • Include amount and currency
  • Add countdown timer for expiration
  • Show payment status updates

2. Payment Status

Keep customers informed:

const paymentStatus = {
  PENDING: 'Waiting for payment...',
  DETECTED: 'Payment detected, confirming...',
  CONFIRMED: 'Payment confirmed! Processing order...',
  EXPIRED: 'Payment expired. Please try again.'
};

3. Mobile Optimization

Ensure mobile-friendly payment:

  • Large QR codes
  • Copy-to-clipboard buttons
  • Mobile wallet deep links
  • Responsive design

Handling Edge Cases

Payment Expiration

function handleExpiredPayment(invoiceId) {
  // Cancel order
  cancelOrder(invoiceId);

  // Notify customer
  sendEmail({
    to: customer.email,
    subject: 'Payment Expired',
    body: 'Your payment window has expired. Please try again.'
  });

  // Offer to create new invoice
  offerNewPayment(invoiceId);
}

Overpayment

function handleOverpayment(invoiceId, receivedAmount, expectedAmount) {
  const excess = receivedAmount - expectedAmount;

  if (excess > 0.01) { // More than 1 cent over
    // Refund excess
    refundExcess(invoiceId, excess);

    // Notify customer
    notifyCustomer({
      message: `You paid ${excess} USDT extra. Refund processing...`
    });
  }

  // Still fulfill order
  fulfillOrder(invoiceId);
}

Testing

Test Scenarios

  • ✅ Successful payment
  • ✅ Payment expiration
  • ✅ Overpayment
  • ✅ Underpayment
  • ✅ Network delays
  • ✅ Webhook failures
  • ✅ Multiple payment attempts

Testnet Testing

Use testnet for development:

const testnetConfig = {
  network: 'BSC Testnet',
  apiUrl: 'https://testnet-api.fromchain.plus',
  testTokens: true
};

Analytics and Reporting

Track important metrics:

  • Conversion Rate: % of customers who complete crypto payment
  • Average Payment Time: Time from invoice creation to confirmation
  • Abandonment Rate: % of customers who don't complete payment
  • Payment Methods: Which cryptocurrencies are most popular

Conclusion

Adding crypto payments to your e-commerce store is straightforward with modern payment gateways. The benefits include lower fees, faster settlement, and access to a global customer base.

Start accepting crypto payments today and grow your e-commerce business!