Step 1: Add the iframe and Integrate ReadyRemit Helper Instance

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- ReadyRemit Helper Instance -->
    <script>
      ((w,d)=>{w.rremit||(w.rremit={sdkUrl:void 0,prevListener:void 0,getIFrame:function(){return d.getElementById("readyremit-iframe")},postMessage:function(m){w.rremit.getIFrame().contentWindow.postMessage(m,w.rremit.sdkUrl)},init:function(payload,onCreateCallback,onUnloadCallback){var iframe=w.rremit.getIFrame(),originAllowed=(w.rremit.sdkUrl=iframe.src,new URL(w.rremit.sdkUrl).origin),initSent=(w.rremit.prevListener&&w.removeEventListener("message",w.rremit.prevListener),!1);w.rremit.prevListener=function(e){if(e.origin===originAllowed){var _a=null==(_a=null==e?void 0:e.data)?void 0:_a.type;switch(_a){case"readyremit-unload-iframe":onUnloadCallback&&onUnloadCallback();break;case"readyremit-create-transfer":onCreateCallback&&onCreateCallback(e.data.payload);break;case"readyremit-ready":initSent||(iframe.style="",w.rremit.postMessage({type:"readyremit-initiate",payload:payload}),initSent=!0)}}},w.addEventListener("message",w.rremit.prevListener)},failed:function(e){w.rremit.postMessage({type:"readyremit-transfer-failed",payload:{error:e.response.data}})},completed:function(transferId){w.rremit.postMessage({type:"readyremit-transfer-completed",payload:{transferId:transferId}})}})})(window,document);
    </script>
    <!-- End ReadyRemit Helper Instance  -->

    <title>ReadyRemit Example</title>
  </head>
  <body>
    <!-- Content of your website -->
    <!-- The iframe's id attribute must be set to "readyremit-iframe" -->
    <iframe 
      id="readyremit-iframe" 
      src="https://sandbox-sdk.readyremit.com"
      allow="clipboard-read; clipboard-write; camera"    
      width="100%" 
      height="100%" 
      style="display: none;"
      title="International & Domestic Transfers"
		></iframe>
    <script>
      const customerId = "<this will be provided by ReadyRemit>";
      const resources = "<encrypted resources, this should be generated in the customer backend>";
      window.rremit.init(
        {
          sdkCore: {
            customerId,
            resources,
          },
          sdkColors: {
            brandPrimary: "#934ae0"
          },
          sdkFeatures: {
            darkMode: true // DEFAULT false
          }
        },
        async (eventPayload) => {
          try {
            // eventPayload: {
            //   language: string; // en-US | es-MX
            //   transfer: {
            //     quoteBy: string;
            //     quoteHistoryId: string;
            //     recipientId: string;
            //     recipientAccountId: string;
            //     fields: [{
            //       id: "VIRTUAL_SENDER_ACCOUNT_ID",
            //       type: "TEXT",
            //       value: string;
            //     }]
            //   };
            // }
            // TODO: 
            // 1. Post the transfer (eventPayload) to your server
            // 2. In your backend, retrieve the quote details using the quoteHistoryId from the eventPayload
            // 3. Post the transfer using the ReadyRemit API with the data from eventPayload + the quote details from step 2
            // 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, resources)
            // let transferId = transferResponse.transferId;

            // This message back to the iframe with the TransferId will render the confirmation screen
            window.rremit.completed(transferId);
          } catch (error) {
              // The error object should match this structure
              //{
  						//	"response": {
              //    "data": {
              //      "code": 400,
              //      "message": "Insufficient funds"
              //    },
              //  }
              //}
              window.rremit.failed(error);
          }
        }
      );
    </script>
  </body>
</html>

Here's what's happening in the code sample above:

Line 6: The ReadyRemit code snippet functions as a helper to facilitate communication between your application and the ReadyRemit SDK loaded in the iframe.
Line 15: The iframe that loads the ReadyRemit SDK. The iframe must have an id attribute set to "readyremit-iframe".
Line 17: The ReadyRemit iframe URL is defined based on the environment (Sandbox or Production) and matches the URL provided in the script.
Line 25: This value will be provided by ReadyRemit technical support during onboarding.
Line 26: This is a string containing encrypted resources that should be encrypted in your backend and provided to the frontend to initialize the iframe. Technical support will provide examples of how to encrypt this data and which resources to include.
Line 27: Initializes the ReadyRemit iframe. Parameter descriptions can be found in the specification below.
Line 40: This is your custom callback function that fires from the iframe when the user completes the transfer flow and wants to submit the transfer. For security purposes, the iframe does not complete the transfer but relies on your server to make the final API call to the ReadyRemit API. For more information, see Step 6 in the C2C via SDK guide. Here you'll receive an eventPayload containing transfer and language data.
Line 48: When calling your backend to complete the transfer, you'll also need to send the encrypted resources (Line 26) so your backend can call the ReadyRemit API.
Line 52: Once your server completes the transfer with the ReadyRemit API, it will receive a Transfer ID in response. Here, we post a message back to the iframe with the ID of the completed transfer.
Line 52: If an error occurs while attempting to post the transfer, your server should return the error without modification (we'll handle it on our end). Here, a message is sent back to the iframe with the error object, allowing it to be handled appropriately.

❗️
Resources/Token Security
In the wrong hands, the ReadyRemit API Access Token generated for the C2C use case can be used to view personal information about your users or create fraudulent transfers. Be sure to encrypt the token in your backend and only send it to the frontend for iframe configuration after encryption.

Step 2: Configuration & Styling

To initialize the ReadyRemit SDK, a message containing a payload is posted to the iframe. The specification for that payload is as follows:

FORM_SUBMISSION Payload

Property	Description	Type	Required
sdkCore	Core configuration options	SDKCoreOptions	Yes
sdkColors	Color theme customization options	SDKColorsOptions	No
sdkFeatures	Feature toggle options	SDKFeaturesOptions	No
virtualSenderAccounts	Virtual sender account configuration	VirtualSenderAccounts	No

SDKCoreOptions

Property	Description	Type	Required	Supported
resources	An encrypted string containing the auth token to connect to the ReadyRemit API. This token should be scoped to the current Sender. For more information, see the Authentication guide.	string	Yes
idleTimeout	Timeout in milliseconds before the remittance session is canceled	int	No
language	Language for the remittance transfer flow	string	No	en-US \| es-MX

SDKColorsOptions

Property	Description	Type	Required	Default
background	Background color for the entire remittance flow	hex	No	`#F3F4F6`
darkBackground	Dark mode version of the background	hex	No	`#111111`
foreground	Foreground color for the entire remittance flow	hex	No	`#FFFFFF`
darkForeground	Dark mode version of the foreground	hex	No	`#1F1F1F`
buttonBackground	Main background color for all buttons	hex	No	`#934AE0`
darkButtonBackground	Dark mode version of buttonBackground	hex	No	`#A26FD8`
buttonFontColor	Font color for buttons	hex	No	`#FFFFFF`
darkButtonFontColor	Dark mode version of the button font color	hex	No	`#FFFFFF`
danger	Color displayed when there's an API error	hex	No	`#AA220F`
darkDanger	Dark mode version of danger	hex	No	`#ED7083`
divider	Color for horizontal rules separating sections	hex	No	`#E2E2E2`
darkDivider	Dark mode version of divider	hex	No	`#313131`
icon	Fill and stroke colors for SVG icons	hex	No	`#444444`
darkIcon	Dark mode version of the icon	hex	No	`#7E7E7E`
inputLine	Border color for input fields	hex	No	`#858585`
darkInputLine	Dark mode version of inputLine	hex	No	`#505050`
brandPrimary	Primary brand color for buttons and links	hex	No	`#934AE0`
darkBrandPrimary	Dark mode version of brandPrimary	hex	No	`#A26FD8`
textPrimary	Primary font color for the entire SDK	hex	No	`#0E0F0C`
darkTextPrimary	Dark mode version of textPrimary	hex	No	`#E3E3E3`
textSecondary	Secondary font color for the entire SDK	hex	No	`#454545`
darkTextSecondary	Dark mode version of textSecondary	hex	No	`#B0B0B0`
success	Color for success states	hex	No	`#008761`
darkSuccess	Dark mode version of success	hex	No	`#008761`

SDKFeaturesOptions

Property	Description	Type	Required
darkMode	Forces the iframe into dark mode regardless of browser settings	bool	No
confetti	Enables a confetti animation when a transaction is submitted	bool	No
useUnloadEvent	Enables the 'unloadEvent' when pressing the back button from the Home screen, causing the iframe to trigger an unload of itself through the parent application. In scenarios where the Web SDK is loaded within a parent application, you may want to use the built-in navigation to return to the host app.	bool	No
defaultCountry	When a valid ISO3 code is provided and the sender has missing fields, the initial "Start a Transfer" screen is auto-filled with that country's code. A quote is automatically fetched, resulting in a filled transfer screen upon load.	string	No

VirtualSenderAccounts

Virtual Sender Accounts provide the web SDK with a list of accounts from which funds will be debited. The web SDK will not initiate any fund transfers or money movement on its own.

When enabled, the SDK displays a dropdown menu showing the accounts and their balances. After a user selects an account, the SDK sends back a reference to that account, allowing you to identify which account to deduct funds from in your system.

Expected Payload for virtualSenderAccounts

The virtualSenderAccounts property expects an array of objects. Each object must match the following schema:

Property	Description	Type	Required
alias	A user-friendly name for the account (e.g., "Main Checking")	string	Yes
last4	The last four digits of the account number, used to distinguish between accounts with the same alias	number	Yes
balance	The current balance of the account. The SDK uses this to check if there are sufficient funds for a transfer	number	Yes
srcProviderId	Your internal reference for the account, which you'll use to perform any necessary money movement	string	Yes

Handling Money Movement

Since the web SDK doesn't handle money movement, it will include a new field called VIRTUAL_SENDER_ACCOUNT_ID in the fields array within the eventPayload. This field provides the srcProviderId of the selected account, indicating which account needs to be updated or debited on your end.