Before integrating Phoenix, you need to obtain an access token from your backend.
Copy
// Example function to fetch access token from your backendasync function getAccessToken() { try { const response = await fetch('/api/token'); const data = await response.json(); return data.access_token; } catch (error) { console.error('Error fetching access token:', error); return null; }}
See the Obtaining Access Token page for detailed instructions on setting up the backend endpoint.
This is example code for obtaining an access token. You will need to adapt the endpoint URL and request format based on your specific backend implementation. Refer to the Obtaining Access Token page for a complete example of setting up a backend service.
When an order is created, the data object will contain:
order_id: Unique identifier for the order
data: Object containing additional order details:
created_at: Timestamp of order creation
buyer_address: The buyer’s wallet address
seller_address: The seller’s wallet address
send_amount: The amount to be sent
receive_amount: The amount to be received
uniqueness_amount: The amount of cents added to the order for uniqueness
receiving_chain_id: The chain ID where the payment will be received
zelle_address: The Zelle address for payment
Copy
// Function to get access token from your backendasync function getAccessToken() { try { const response = await fetch('/api/token'); const data = await response.json(); return data.access_token; } catch (error) { console.error('Error fetching access token:', error); return null; }}// Function to show payment iframe with parametersasync function showPayment(walletAddress, amount, theme) { const iframe = document.getElementById('phoenix-payment-iframe'); const container = document.getElementById('payment-container'); // Get the access token from your backend const accessToken = await getAccessToken(); if (!accessToken) { alert('Unable to obtain access token. Please try again later.'); return; } // Build iframe URL with all parameters let url = `https://app-partner.phoenix.market/?address=${walletAddress}&amount=${amount}&access_token=${accessToken}`; if (theme) { url += `&theme=${theme}`; } // Set iframe src iframe.src = url; // Display the container that holds the iframe container.style.display = 'block'; // Set up event listener for messages from the iframe window.addEventListener('message', handlePaymentMessage); // Set up cancel button functionality document.getElementById('cancel-payment-button').onclick = hidePayment;}// Function to handle messages received from the iframefunction handlePaymentMessage(event) { // IMPORTANT: Verify origin for security if (event.origin !== 'https://app-partner.phoenix.market') return; // Handle order created message if (event.data?.type === 'ORDER_CREATED') { const { order_id, ...data } = event.data.data; console.log('Order created:', event.data.data); // Handle the order creation event as needed // You should store order details in your database, especially the order_id } // Handle transaction success message else if (event.data?.type === 'TRANSACTION_SUCCESS') { const { amount, token, chain, walletAddress, sendAmount, transactionHash, basescanLink } = event.data.data; console.log('Transaction successful:', transactionHash); // You should store transaction details in your database // and update your UI to show the payment was successful // Uncomment the following line if you want to close the window after transaction success // hidePayment(); } // Handle cancel message else if (event.data?.type === 'CANCEL') { console.log('Payment canceled by user'); hidePayment(); } // Handle open explorer URL message else if (event.data?.type === 'OPEN_EXPLORER_URL') { const url = event.data.url; console.log('Opening explorer URL:', url); // Open the URL in a new tab window.open(url, '_blank'); } // Handle done message else if (event.data?.type === 'USER_DONE') { console.log('Payment process completed'); hidePayment(); } // Handle payment failure or cancellation else if (event.data?.type === 'PAYMENT_FAILED' || event.data?.type === 'PAYMENT_CANCELLED') { console.log('Payment failed or cancelled'); // Uncomment the following line if you want to close the window after payment failure/cancellation // hidePayment(); }}// Function to hide the payment iframefunction hidePayment() { document.getElementById('payment-container').style.display = 'none'; // IMPORTANT: Remove event listener to prevent memory leaks window.removeEventListener('message', handlePaymentMessage);}
Add this script to connect your form to the payment flow:
Copy
// Set up the button click handler to start the payment processdocument.getElementById('start-payment').addEventListener('click', function() { // Get values from form inputs const walletAddress = document.getElementById('wallet').value; const amount = document.getElementById('amount').value; const theme = document.getElementById('theme').value; // Get selected theme // Validate inputs (basic validation) if (!walletAddress || !amount) { alert('Please enter both wallet address and amount'); return; } // Start payment process with collected values showPayment(walletAddress, amount, theme);});
