<iframe 
    id="readyremit-iframe" 
    src="https://sandbox-sdk.readyremit.com" 
    width="100%" 
    height="1000px" 
    style="border:none"
    title="International & Domestic Transfers">
</iframe>

// TODO: Set ReadyRemit SDK URL based on environment
// Sandbox: https://sandbox-sdk.readyremit.com
// Production: https://sdk.readyremit.com
const readyRemitSdkUrl = "https://sandbox-sdk.readyremit.com";

// The associated Sender record for this user should should have been created in the ReadyRemit system server side
// See Step 3 in the SDK guide
// https://developer.readyremit.com/docs/c2c-via-sdk#step-3-create-sender-records-to-associate-with-your-user
const senderId = "[SENDER ID]";

const iframe = document.getElementById("readyremit-iframe");

window.addEventListener(
    "message",
    async (event) => {
        // We only want to  handle events from the ReadyRemit iFrame
        if (event.origin != readyRemitSdkUrl) {
           return;
        }

        if (event.data?.type === "readyremit-unload-iframe") {
            // TODO: Handle user timeout
          	// This can be a notification message and refreshing the auth token / screen
        }

        if (event.data?.type === "readyremit-create-transfer") {
            try {
                // TODO: Post the transfer to your server, to be sent to ReadyRemit for completion
                // The completed TransferID should be returned
                // For more information, see Step 6 in the C2C via SDK guide
                // https://developer.readyremit.com/docs/c2c-via-sdk#step-6-submit-the-transfer
                //
              	// Example:
                // let transferResponse = postTransferToServer(event.data.payload)
                // let transferId = transferResponse.transferId;
              
              	// This message back to the iFrame with the TransferID will render the confirmation screen
                iframe.contentWindow.postMessage({
                    type: "readyremit-transfer-completed",
                    payload: {
                        transferId: transferId,
                    },
                }, event.origin);
            } catch (error) {
                // TODO: Log the error
              
              	// This message back to the iFrame will render the error message or handle the exception gracefully
                iframe.contentWindow.postMessage({
                    type: "readyremit-transfer-failed",
                    payload: {
                        error: error.response.data,
                    }
                }, event.origin);
            }
        }
    },
    false
);

// TODO: Fetch ReadyRemit auth token from your server.
// See steps 1 & 2 in the SDK integration guide
// https://developer.readyremit.com/docs/c2c-via-sdk#step-1-securely-store-api-credentials
//
// Example:
// let authTokenResponse = fetchAuthTokenFromServer();
const authToken = "[AUTH_TOKEN]";

// Initialize SDK settings and styles
// TODO: Wire this up to some action
const initializeReadyRemitIFrame = () => {
    // Initialize iFrame settings and styles
    iframe.contentWindow.postMessage({
        type: "readyremit-form-submission",
        payload: {
            formCore: {
                baseURL: "https://sandbox-api.readyremit.com/v1",
                sdkURL: readyRemitSdkUrl,
                senderId: senderId,
                token: authToken
            },
            formColors: {
                brandPrimary: "#934ae0"
            },
            formFeatures: {
                darkMode: false
            }
        }
    }, readyRemitSdkUrl);
}