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:
javascript
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:
- Validate and save product data
- Redirect to RAKUFUN website
- Automatically fill in product information
Minimal Example
html
<!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:
javascript
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:
javascript
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:
javascript
// 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: [email protected]