Custom Mode - Fully Independent Design

Completely skip built-in UI, use your own design and components, only call RAKUFUN's one-click purchase API. Perfect for scenarios requiring deep customization.

What is Custom Mode?

Custom mode allows you to:

• Fully control UI appearance and interaction
• Use your own buttons, forms, modals, etc.
• Call quickBuy() API only when needed
• Retain the convenience of automatic redirection and data injection

Core API: quickBuy()

This is the core method of custom mode:

await rakufun.quickBuy({
  title: 'Product Title',
  price: 'Price (numeric string)',
  url: window.location.href,
  images: ['Image URL array'],
  description: 'Product description'
});

After calling, it will:

1. Validate and save product data
2. Redirect to RAKUFUN website
3. Automatically fill in product information

Minimal Example

<!DOCTYPE html>
<html>
<head>
    <title>Custom Purchase Button</title>
</head>
<body>
    <h1>Featured Product</h1>
    <img src="product.jpg" alt="Product Image">
    <p class="price">¥26,800</p>
    
    <!-- Your custom button -->
    <button id="my-buy-button" class="custom-btn">
        🛒 Buy Now
    </button>

    <script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
    <script>
        document.getElementById('my-buy-button').addEventListener('click', async () => {
            try {
                await rakufun.quickBuy({
                    title: 'Bose QuietComfort Headphones',
                    price: '26800',
                    url: window.location.href,
                    images: ['product.jpg'],
                    description: 'Premium noise-canceling headphones'
                });
            } catch (error) {
                console.error('Purchase failed:', error);
                alert('Purchase failed, please try again');
            }
        });
    </script>
</body>
</html>

Complete Product Data

quickBuy() supports 13 fields, the more complete the better:

await rakufun.quickBuy({
  // Required fields
  title: "Nintendo Switch OLED",
  price: "37980",
  url: window.location.href,
  
  // Highly recommended
  images: [
    "https://example.com/switch-1.jpg",
    "https://example.com/switch-2.jpg"
  ],
  description: "7-inch OLED display, 64GB storage",
  
  // Optional fields
  brand: "Nintendo",
  condition: "New",
  minQuantity: "1",
  maxStock: "100",
  shippingInfo: "Free shipping",
  deliveryTime: "3-5 business days",
  precautions: "1-year warranty included",
  productParameters: "Size: 102mm × 242mm × 13.9mm, Weight: approx. 320g",
  
  // Auto-generated
  timestamp: new Date().toISOString()
});

Error Handling

Professional error handling pattern:

async function handlePurchase() {
  const button = document.getElementById('buy-btn');
  const originalText = button.textContent;
  
  try {
    button.disabled = true;
    button.textContent = 'Processing...';
    
    await rakufun.quickBuy({
      title: 'Product Name',
      price: '12800',
      url: window.location.href
    });
    
    // After success, auto-redirects; this line usually won't execute
    button.textContent = 'Redirecting...';
    
  } catch (error) {
    console.error('Purchase failed:', error);
    
    // Provide different messages based on error type
    switch (error.code) {
      case 'VALIDATION_ERROR':
        alert('Product information incomplete, please contact support');
        break;
      case 'NETWORK_ERROR':
        alert('Network error, please check connection and retry');
        break;
      default:
        alert('Purchase failed, please try again later');
    }
    
    // Restore button state
    button.disabled = false;
    button.textContent = originalText;
  }
}

Why Choose Custom Mode?

• ✅ Complete Control - UI and interaction fully autonomous
• ✅ Seamless Integration - Fits into existing systems
• ✅ Brand Consistency - Maintain your brand style
• ✅ Flexible Extension - Add any custom logic
• ✅ Lightweight Call - Only use core API

Comparison with Built-in Modes

Feature	Custom Mode	Built-in Modes
UI Control	Fully autonomous	Provided by SDK
Integration Difficulty	Medium	Very simple
Flexibility	Highest	Limited
Development Time	Longer	Shortest
Use Cases	Deep customization	Quick integration

Next Steps

• View Default Mode - Fastest integration method
• View Button Mode - Embedded purchase button
• View Banner Mode - Horizontal display component

FAQ

Does quickBuy refresh the page?

Yes, after successful call it redirects to RAKUFUN website. Make sure to save necessary state before redirection.

Can it be used in SPAs (Single Page Applications)?

Absolutely! Works fine in React, Vue, Angular, and other frameworks:

// React example
function BuyButton({ product }) {
  const handleBuy = async () => {
    await window.rakufun.quickBuy({
      title: product.title,
      price: product.price,
      url: window.location.href
    });
  };
  
  return <button onClick={handleBuy}>Buy</button>;
}

---

Questions? Contact us: service@rakufun.com