<div class="checkout-grid">
	<!-- Payment Form Section -->
	<div class="payment-section">
		<h2>Payment Method</h2>
		<p>Below is the payment capture form embedded in an iFrame.</p>
		<div class="iframe-container">
			<iframe
				name="payment_methods"
				title="Payment Methods"
				allow="payment"
				scrolling="no"
			></iframe>
		</div>
	</div>

	<!-- Order Summary Section -->
	<div class="order-summary">
		<h2>Order Summary</h2>
		<div class="summary-item">
			<span>Premium Package</span>
			<span>$199.00</span>
		</div>
		<!-- Additional summary items -->
	</div>
</div>

<iframe
	name="payment_methods"
	title="Payment Methods"
	src="https://main.d6x9wlghvzkti.amplifyapp.com/embed"
	allow="payment"
	scrolling="no"
	style="width: 100%; border: none;"
></iframe>

<iframe
	src="https://main.d6x9wlghvzkti.amplifyapp.com/embed?merchantId=YOUR_MERCHANT_ID&countryCode=AU&paymentMethods=VISA,MASTERCARD,BANK&showFeePricing=true&termsandconditions=https://your-domain.com/terms"
></iframe>

<iframe
	src="https://main.d6x9wlghvzkti.amplifyapp.com/embed?countryCode=AU&paymentMethods=VISA,MASTERCARD,BANK&showFeePricing=true&termsandconditions=https://your-domain.com/terms"
></iframe>

<iframe
	src="https://main.d6x9wlghvzkti.amplifyapp.com/embed?countryCode=AU&customerId=CUSTOMER_UUID&displayexistingpaymentmethods=true&paymentMethods=VISA,MASTERCARD,BANK&setasprimary=true"
></iframe>

<iframe
	src="https://main.d6x9wlghvzkti.amplifyapp.com/embed?countryCode=AU&customerId=CUSTOMER_UUID&paymentMethods=VISA,MASTERCARD,BANK&setasprimary2=true"
></iframe>

iframe.contentWindow.postMessage(
	{
		type: 'THEME_UPDATE',
		variables: {
			'--colorPrimary': '#FF5733',
			'--fontFamily': 'Inter',
		},
		classes: {
			'.InputField': {
				border: '1px solid #e0e0e0',
				'border-radius': '4px',
			},
			'.InputLabel': {
				'font-weight': '500',
				color: '#333',
			},
		},
	},
	'https://main.d6x9wlghvzkti.amplifyapp.com' // Ezypay's HPP URL
);

:root {
	--fontFamily: 'Inter', Arial, Helvetica, sans-serif;
	--fontSizeBase: 16px;
	--fontSizeHeading1: 1.25rem;
	--fontSizeHeading2: 1rem;
	--fontSizeHeading3: 0.875rem;
	--fontSizeHeading4: 0.75rem;
	--spacingUnit: 0.25rem;
	--borderRadius: 0.5rem;
	--borderWidth: 1px;
	--borderColor: #e5e7eb;
	--colorPrimary: hsl(24 91% 56%);
	--colorTextTitle: #111827;
	--colorTextGeneral: #52525b;
	--colorTextSubtle: #6b7280;
	--colorTextHeading1: #111827;
	--colorTextHeading2: #52525b;
	--colorBackgroundPage: hsl(0 0% 100%);
	--colorBackgroundContainerPrimary: #fafafa;
	--colorBackgroundContainerSecondary: #ffffff;
	--colorBackgroundContainerHover: #f4f4f5;
	--colorDanger: #dc2626;
}

window.addEventListener('message', function (e) {
	if (e.data && e.data.type === 'resize') {
		const iframe = document.querySelector('iframe');
		if (iframe) {
			iframe.style.height = `${e.data.height}px`;
		}
	}
});

{
  type: 'PAYMENT_METHOD_TOKEN',
  paymentMethodToken: 'token-value',
  card: {
    accountHolderName: 'Cardholder Name',
    expiryYear: 'YY',
    expiryMonth: 'MM',
    type: 'CARD',
    last4: '1234',  // Last 4 digits of card
    first6: '123456', // First 6 digits of card
    countryCode: 'AU', // Country code
    tokenDetails: null,
    tokenized: false
  },
  bank: null,
  payTo: null,
  wallet: null
}

{
  type: 'PAYMENT_METHOD_TOKEN',
  paymentMethodToken: 'token-value',
  card: null,
  bank: {
    accountHolderName: 'Account Holder Name'
    // Additional bank details may be included
  },
  payTo: null,
  wallet: null
}

{
  // Standard payment method properties as shown above
  // ...

  // Additional customer linking information
  customerID: 'customer-id', // Will be null if linking failed
  link_status: true  // Boolean indicating if linking was successful
}

window.addEventListener('message', (event) => {
	if (event.data && event.data.type === 'PAYMENT_METHOD_TOKEN') {
		// Handle the payment method token
		console.log('Payment method token:', event.data.paymentMethodToken);

		// If customer linking was requested, check the status
		if (event.data.hasOwnProperty('link_status')) {
			if (event.data.link_status) {
				console.log('Successfully linked to customer:', event.data.customerID);
			} else {
				console.log('Failed to link payment method to customer');
			}
		}
	}
});

// Create a logging utility for your payment integration
const PaymentLogger = {
	info: (message, data = {}) => {
		console.log(`[Payment Integration] ${message}`, {
			timestamp: new Date().toISOString(),
			level: 'info',
			...data,
		});
	},
	error: (message, error, data = {}) => {
		console.error(`[Payment Integration] ${message}`, {
			timestamp: new Date().toISOString(),
			level: 'error',
			error: error?.message || error,
			stack: error?.stack,
			...data,
		});
	},
};

// Usage in your payment form integration
window.addEventListener('message', (event) => {
	if (event.data && event.data.type === 'PAYMENT_METHOD_TOKEN') {
		PaymentLogger.info('Payment method token received', {
			paymentMethodToken: event.data.paymentMethodToken,
			paymentType: event.data.card ? 'CARD' : event.data.bank ? 'BANK' : 'OTHER',
		});

		// Handle customer linking
		if (event.data.hasOwnProperty('link_status')) {
			if (event.data.link_status) {
				PaymentLogger.info('Customer linking successful', {
					customerId: event.data.customerID,
					isPrimary: event.data.isPrimary,
				});
			} else {
				PaymentLogger.error('Customer linking failed', null, {
					customerId: event.data.customerID,
				});
			}
		}
	}
});

// Log iframe loading events
const iframe = document.querySelector('iframe[name="payment_methods"]');
iframe.addEventListener('load', () => {
	PaymentLogger.info('Payment form loaded successfully');
});

iframe.addEventListener('error', (error) => {
	PaymentLogger.error('Payment form failed to load', error);
});

// Enhanced error handling for payment integration
const handlePaymentError = (error, context = {}) => {
	PaymentLogger.error('Payment integration error', error, {
		context,
		userAgent: navigator.userAgent,
		url: window.location.href,
		timestamp: new Date().toISOString(),
	});

	// Show user-friendly error message
	showUserError('Payment form is temporarily unavailable. Please try again.');
};

// Usage examples
try {
	// Payment form operations
	iframe.contentWindow.postMessage(themeUpdate, targetOrigin);
} catch (error) {
	handlePaymentError(error, { operation: 'theme_update' });
}