Integration Examples
This page demonstrates how to integrate the RAKUFUN SDK into your website with practical examples.
🎯 Live Demo
Below is a complete e-commerce product page integration example, including IP recognition and experience optimization. You can interact with it directly below:
📱 Live Demo - Click button to experience purchase flow
The following example shows the complete integration effect of RAKUFUN SDK
🎧 Authentic Japanese Products · International Shipping
RAKUFUN provides safe and reliable Japanese product purchasing services
Sony WH-1000XM5 Wireless Noise Canceling Headphones
54,800円62,800円
🌟 Product Features
- Industry-leading active noise cancellation technology
- 30-hour ultra-long battery life
- Quick Attention mode for instant environmental awareness
- Multipoint connection, connect two devices simultaneously
- Authentic Japanese import with manufacturer warranty
🌟 Feature Highlights
- 🌍 Smart Region Detection - Automatically identify user IP, differentiate experiences for Japan and overseas users
- 🛡️ Comprehensive Error Handling - Complete error capture and notification mechanism
- 🔗 One-Click Purchase - Jump to RAKUFUN purchase page with one click
📋 Code Example
You can copy the following code to your site:
html
<!DOCTYPE html>
<html lang="en">
<body>
<button id="buy-button" class="buy-button" onclick="handlePurchase()">
<span id="button-text">🛒 Buy Now with RAKUFUN</span>
</button>
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
// Product data
const productData = {
url: window.location.href,
title: "Sony WH-1000XM5 Wireless Headphones",
price: "54800",
description: "Industry-leading noise cancellation technology, 30-hour battery life.",
images: ["https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800"],
condition: "New",
brand: "Sony",
minQuantity: "1",
maxStock: "50",
shippingInfo: "0",
deliveryTime: "2-4 days",
precautions: "1-year manufacturer warranty included.",
productParameters: "Weight: 250g, Battery Life: 30 hours",
timestamp: new Date().toISOString()
};
// Handle purchase
async function handlePurchase() {
const button = document.getElementById('buy-button');
const buttonText = document.getElementById('button-text');
try {
button.disabled = true;
buttonText.textContent = 'Processing...';
// Call RAKUFUN SDK
await rakufun.quickBuy(productData);
buttonText.textContent = 'Redirecting to RAKUFUN...';
} catch (error) {
console.error('Purchase failed:', error);
alert('Purchase failed, please try again');
button.disabled = false;
buttonText.textContent = '🛒 Buy with RAKUFUN';
}
}
</script>
</body>
</html>🌍 Advanced: Region Detection
If you need to provide differentiated experiences based on geographic location:
javascript
// Detect user region
const regionResult = await rakufun.detectUserRegion();
console.log('User region:', regionResult);
// Check if user is from Japan
if (rakufun.isJapanUser()) {
// Execute custom business logic
console.log('Japan user detected');
// For example: show specific messages, adjust business flow, etc.
}
// API calls work normally for all users
await rakufun.quickBuy(productData);Core Capabilities
1. RAKUFUN SDK Integration
- Use official SDK:
https://sdk.rakufun.com/rakufun-universal.min.js - Automatic region detection:
rakufun.detectUserRegion() - User region check:
rakufun.isJapanUser() - One-click purchase:
rakufun.quickBuy(productData)
2. Error Handling
- Complete error handling mechanism
- Friendly error messages
- Automatic button state recovery
3. Product Data Structure
- Uses complete 13-field data structure
- Supports all necessary product information
- Seamlessly integrates with existing sites
Next Steps
Learn more integration methods:
- API Reference - Complete API documentation
- Getting Started - Beginner's guide