Complete E-commerce Crypto Payments Integration Guide

Why Add Crypto Payments to Your E-commerce Store?

Crypto payments offer several advantages for e-commerce businesses:

Shopify Integration

Adding crypto payments to your Shopify store is straightforward with VirdisPay's JavaScript SDK.

Step 1: Get Your API Credentials

First, sign up for a VirdisPay account and get your API key and merchant ID from the dashboard.

Step 2: Add the SDK to Your Theme

Add the VirdisPay SDK to your Shopify theme's layout file:

<script src="https://cdn.virdispay.com/sdk/VirdisPaySDK.js"></script>

Step 3: Initialize the Payment Button

Add this code to your checkout template:

<script>
const virdisPay = new VirdisPaySDK({
  apiKey: 'your-api-key',
  merchantId: 'your-merchant-id',
  baseUrl: 'https://api.virdispay.com',
  widgetUrl: 'https://checkout.virdispay.com'
});

// Add crypto payment option to checkout
const cryptoButton = virdisPay.createPaymentButton({
  text: 'Pay with Crypto',
  amount: {{ checkout.total_price | money_without_currency }},
  currency: 'USDC',
  orderId: '{{ checkout.order_number }}',
  customerEmail: '{{ checkout.email }}',
  onPaymentComplete: (paymentId) => {
    // Redirect to success page
    window.location.href = '/checkout/success?payment=' + paymentId;
  },
  onPaymentError: (error) => {
    alert('Payment failed: ' + error);
  }
});

// Add button to payment methods
document.getElementById('payment-methods').appendChild(cryptoButton);
</script>

<div data-virdispay
     data-api-key="your-api-key"
     data-amount="{{ checkout.total_price | money_without_currency }}"
     data-currency="USDC"
     data-order-id="{{ checkout.order_number }}">
</div>

WooCommerce Integration

For WordPress/WooCommerce stores, we provide a complete plugin that handles everything automatically.

Step 1: Install the Plugin

Download and upload the VirdisPay WooCommerce plugin to your WordPress site:

// Upload virdispay-woocommerce.php to /wp-content/plugins/
// Activate in WordPress admin
// Configure your API credentials

Step 2: Configure Payment Gateway

In your WordPress admin, go to WooCommerce → Settings → Payments and enable "VirdisPay Crypto".

Step 3: Set Up API Credentials

Enter your VirdisPay API key and merchant ID in the plugin settings.

Custom Website Integration

For custom websites, VirdisPay offers flexible integration options that work with any technology stack.

Basic HTML Integration

The simplest way to add crypto payments to any website:

<!-- Include the SDK -->
<script src="https://cdn.virdispay.com/sdk/VirdisPaySDK.js"></script>

<!-- Add payment container -->
<div id="virdispay-container"></div>

<script>
const virdisPay = new VirdisPaySDK({
  apiKey: 'your-api-key',
  merchantId: 'your-merchant-id'
});

// Initialize payment widget
virdisPay.init({
  containerId: 'virdispay-container',
  amount: 99.99,
  currency: 'USDC',
  orderId: 'order-123',
  customerEmail: 'customer@example.com',
  onPaymentComplete: (paymentId) => {
    console.log('Payment completed:', paymentId);
    // Handle successful payment
  },
  onPaymentError: (error) => {
    console.error('Payment failed:', error);
    // Handle payment error
  }
});
</script>

Server-Side Integration

For more control, integrate directly with our API:

// Create payment
const response = await fetch('https://api.virdispay.com/api/payments/create-ecommerce', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-api-key'
  },
  body: JSON.stringify({
    amount: 99.99,
    currency: 'USDC',
    orderId: 'order-123',
    customerEmail: 'customer@example.com',
    merchantId: 'your-merchant-id'
  })
});

const payment = await response.json();
// Use payment.paymentUrl to redirect customer

Mobile Optimization

VirdisPay is designed mobile-first, with several features to enhance the mobile payment experience:

Best Practices

1. Offer Multiple Payment Options

Don't replace traditional payments entirely. Offer crypto as an additional option alongside credit cards and other methods.

2. Display Crypto Amounts Clearly

Show both USD and crypto amounts to help customers understand the conversion.

3. Provide Payment Instructions

Include clear instructions for customers who are new to crypto payments.

4. Test on Mobile Devices

Always test your integration on mobile devices to ensure a smooth experience.

5. Monitor Payment Status

Implement webhook handlers to automatically update order status when payments are confirmed.

Troubleshooting Common Issues

Payment Widget Not Loading

Solution: Check that your API key is correct and your domain is whitelisted in the VirdisPay dashboard.

QR Code Not Scanning

Solution: Ensure the QR code is displayed at sufficient size and resolution for mobile scanning.

Wallet Connection Failing

Solution: Verify that the customer has a compatible wallet installed and is on the correct network.

Price Conversion Issues

Solution: Check that your API is receiving real-time price data and handling currency conversions correctly.