Step 1. Add iFrame and Integrate ReadyRemit Helper Instance

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ReadyRemit Helper Instance -->
    <script>
    	!function(a){a.rremit=a.rremit||{},a.rremit.txnCallback=null,a.rremit.unloadCallback=null,a.rremit.getIFrame=()=>document.getElementById("readyremit-iframe"),a.rremit.postMessage=e=>{a.rremit.getIFrame().contentWindow.postMessage(e,"REPLACE_WITH_WEB-SDK_URL")},a.rremit.init=(e,r,t)=>{a.rremit.getIFrame().style="",a.rremit.postMessage({type:"readyremit-initiate",payload:e}),a.rremit.txnCallback=r,a.rremit.unloadCallback=t},a.rremit.unload=()=>{a.rremit.unloadCallback();const e=a.rremit.getIFrame();e.style="display: none;",e.src=e.src},a.rremit.failed=e=>{a.rremit.postMessage({type:"readyremit-transfer-failed",payload:{error:e.response.data}})},a.rremit.completed=e=>{a.rremit.postMessage({type:"readyremit-transfer-completed",payload:{transferId:e}})},a.addEventListener("message",async function(e){var r=e&&e.data&&e.data.type;return"readyremit-unload-iframe"===r?a.rremit.unload():"readyremit-create-transfer"===r?a.rremit.txnCallback(e.data.payload):void 0})}(window,document);
    </script>
    <!-- End ReadyRemit Helper Instance  -->

    <title>Example Webpage</title>
  </head>
  <body>
    <!-- Content of your website -->
    <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>
  </body>
</html>

const initializeReadyRemitIFrame = () => {
  window.rremit.init(
    {
	    sdkCore: {
      	baseURL: "https://sandbox-api.readyremit.com/v1",
        sdkURL: "REPLACE_WITH_WEB_SDK_URL",
        token: "REPLACE_WITH_AUTH_TOKEN"
      },
      sdkColors: {
      	brandPrimary: "#934ae0"
      },
      sdkFeatures: {
        darkMode: true // DEFAULT false
      }
    },
    async (eventPayload) => {
    	try {
        // TODO: Post the transfer (eventPayload) 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
        window.rremit.completed(transferId);
      } catch (error) {
      	window.rremit.failed(error);
      }
    }
  )
}

Let's see what's happening in the code sample above (JavaScript Tab):

Line 4: The ReadyRemit API URL is defined based on the environment (Sandbox, or Production)
Line 5: The ReadyRemit iFrame URL is defined based on the environment (Sandbox, or Production), and is the same as the one that we replaced earlier on the provided script.
Lines 10 and 13: Initialize the ReadyRemit iFrame. Parameter descriptions can be found in the spec below.
Line 17: This is your custom callback function. This callback is fired 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 that contains transfer and language.
Line 29: Once your server has completed the transfer with the ReadyRemit API it will receive a Transfer ID in response. Here, we will post a message back to the iFrame with the ID of the completed transfer.
Line 31: In the event of an error while attempting to post the transfer, your server should return an error (do not modify or alter it, we'll take care of that on our end).
Here, a message is sent back to the iFrame with the error object so it can be handled appropriately.

❗️
Token Security
In the wrong hands, the ReadyRemit API Access Token generated for the C2C use case can be used to see personal information about your users or create fraudulent transfers. Be sure to only store the access token on your secure server and never expose it in the front-end.

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	Type	Required
sdkCore	SDKCoreOptions	Yes
sdkColors	SDKColorsOptions	Yes
sdkFeatures	SDKFeaturesOptions	Yes

SDKCoreOptions

Property	Description	Type	Required
baseURL	The URL of the ReadyRemit API that the SDK will connect to	string	Yes
sdkURL	The URL of the ReadyRemit SDK (Sandbox or Production)	string	Yes
token	Authorization token acquired by your server. 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 of the remittance transfer flow.	string	No

SDKColorsOptions

Property	Description	Type	Required
background	The background color of the entire remittance flow	string	Yes
darkBackground	Dark version of the background	string	Yes
foreground	The foreground color of the entire remittance flow	string	Yes
darkForeground	A dark version of the foreground	string	Yes
buttonBackground	Represents the main background color for all buttons	string	Yes
darkButtonBackground	Dark version of buttonBackground	string	Yes
buttonFontColor	Represents the font color for buttons	string	Yes
darkButtonFontColor	Dark version of the button font color	string	Yes
danger	Visible when there's an API error on a fetch call	string	Yes
darkDanger	Dark version of danger	string	Yes
divider	Horizontal rule that separates certain sections	string	Yes
darkDivider	Dark version of Divider	string	Yes
icon	Fill and stroke colors for SVG icons	string	Yes
darkIcon	A dark version of the icon	string	Yes
inputLine	Represents the border color of input fields	string	Yes
darkInputLine	Dark version of inputLine	string	Yes
brandPrimary	Primary brand color applied to primary buttons and links	string	Yes
darkBrandPrimary	Dark version of brandPrimary	string	Yes
textPrimary	Primary font color of the entire sdk	string	Yes
darkTextPrimary	Dark version of textPrimary	string	Yes
textSecondary	Secondary font color for the entire sdk	string	Yes
darkTextSecondary	Dark version of textSecondary	string	Yes

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

Step 1. Add iFrame and Integrate ReadyRemit Helper Instance

❗️Token Security

Step 2: Configuration & Styling

FORM_SUBMISSION Payload

SDKCoreOptions

SDKColorsOptions

SDKFeaturesOptions

❗️
Token Security