React Installation

npm i amwal-checkout-button-react

import { AmwalCheckoutButton } from 'amwal-checkout-button-react'
import React, { useEffect, useRef, useState } from 'react';

const ReactPage = () => {
    const amwalRef = useRef<any>();
    const [shippment, setShippment] = useState<any>([
        { "id": "1", "label": "Free shipping", "price": 0 }
    ]);

    return (
        <AmwalCheckoutButton 
            ref={amwalRef}
            merchantId="sandbox-amwal-4e876d00-a50e-482c-a6e1-a1a9df400ce5" 
            amount="20" 
            countryCode="SA"
            locale="ar" 
            darkMode="auto"
            addressRequired={true}
            emailRequired={false}
            shippingMethods={shippment}
            addressHandshake
            
            // Address update event (you already have this)
            onAmwalAddressUpdate={(event) => {
                console.log('Address updated:', event.detail);
                setShippment([{ "id": "1", "label": "Free shipping", "price": 0 }])
                setTimeout(() => {
                    amwalRef.current.dispatchEvent(new Event('amwalAddressAck'))
                }, 1000)
            }}
            
            // Country selection event
            onAmwalAddressCountryUpdate={(event) => {
                console.log('Country selected:', event.detail);
                // Handle country change
            }}
            
            // State selection event
            onAmwalAddressStateUpdate={(event) => {
                console.log('State selected:', event.detail);
                // Handle state change
            }}
            
            // Payment success event
            onAmwalCheckoutSuccess={(event) => {
                console.log('Payment successful!', event.detail);
                const orderId = event.detail.orderId;
                // Handle successful payment
            }}
            
            // Modal dismissed event
            onAmwalDismissed={(event) => {
                console.log('Modal dismissed, success:', event.detail);
                // Handle modal dismissal
            }}
            
            // Pre-checkout trigger (requires enablePreCheckoutTrigger prop)
            onAmwalPreCheckoutTrigger={(event) => {
                console.log('Pre-checkout triggered:', event.detail);
                // Perform validation or pre-checkout logic
                // Then acknowledge or error:
                // amwalRef.current.dispatchEvent(new Event('amwalPreCheckoutTriggerAck'))
                // or
                // amwalRef.current.dispatchEvent(new Event('amwalPreCheckoutTriggerError'))
            }}
            
            // Pre-pay trigger (requires enablePrePayTrigger prop)
            onAmwalPrePayTrigger={(event) => {
                console.log('Pre-pay triggered:', event.detail);
                // Perform final validation before payment
                // Then acknowledge or error:
                // amwalRef.current.dispatchEvent(new Event('amwalPrePayTriggerAck'))
                // or
                // amwalRef.current.dispatchEvent(new Event('amwalPrePayTriggerError'))
            }}
            
            // Alternative payment success event
            onUpdateOrderOnPaymentsuccess={(event) => {
                console.log('Order updated on payment success:', event.detail);
                const orderId = event.detail.orderId;
                // Handle order update
            }}
        />
    );
}