Usage

The Drop-In App must be loaded first, then initialized. To do this, load the JavaScript library using a script tag and pass an initialization method that will execute after the library has finished loading.

The library adds RCH_CC to the global namespace, and allows initialization through RCH_CC.rchInit.

RCH_CC.rchInit expects an object as a parameter. This object is defined in the table below.

parameter	type	description
`id`	`string`	Session ID generated by API
`target`	`string` or `HTMLElement`	Element or selector for app placement
`hideSubmitButton`	`boolean`	set to true to hide the submit button
`onSuccess`	`function`	Callback executed on card payment success. When a payment option is used that does not redirect, you will use this method to manipulate the DOM or redirect to a success page when it is triggered by the Drop-In on session completion.
`onFailure`	`function`	Callback executed on any payment failure that can't be recovered within the session. A JSON object containing an `errorCode` and `errorMessage` will be passed into the callback function.
`onSubmitEnabledChange`	`function`	Callback, receives submit allowed `boolean` when state changes
`customizationOptions`	`{[key: string]: string}`	(optional) Key-value definition of custom style properties
`text`	`{[key: string]: string}`	(optional) Key-value definition of custom text
`locale`	`string`	(optional) Supports `en` or `en-US`. Is not case sensitive

Example

Note for Sandbox, our Script URL is as follows: https://asset.sandbox.withreach.com/dist/rch.js.

<script defer src="https://asset.withreach.com/dist/rch.js" onload="init()"></script>

<script>
  function init() {
    // provide session id
    const id = "26de814e-137d-4233-b8f5-c7b80fc8055f";

    // define target element
    const target = document.querySelector("#rch-cc");
    // - or - pass the document selector only
    const target = "#rch-cc";

    // define callback method that will be executed on payment success
    const onSuccess = () => {
      console.log("great success 👍");
    };

    // define callback method that will be executed on payment failure
    const onFailure = error => {
        console.log("failure occurred ❌ Error code: " + 
                     error.errorCode + ", Error message: " +
                     error.errorMessage + " ❌");
    };
    
    // define object of style parameters 
    const customizationOptions = {
      '--color-app': '#f3f3f3',
      '--color-primary': '#6158fb',
      '--color-focus': '#5047ff',
      '--color-hover': '#5047ff',
      '--font': 'Inter',
    };

    // initialize library
    RCH_CC.rchInit({ target, id, onSuccess, onFailure, customizationOptions });
  }
</script>

<style>
  .cc {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
  }
</style>

<div id="rch-cc"></div>

<script defer src="https://asset.sandbox.withreach.com/dist/rch.js" onload="init()"></script>

<script>
  function init() {
    // provide session id
    const id = "26de814e-137d-4233-b8f5-c7b80fc8055f";

    // define target element
    const target = document.querySelector("#rch-cc");
    // - or - pass the document selector only
    const target = "#rch-cc";

    // define callback method that will be executed on payment success
    const onSuccess = () => {
      console.log("great success 👍");
    };

  	// define callback method that will be executed on payment failure
    const onFailure = error => {
        console.log("failure occurred ❌ Error code: " + 
                     error.errorCode + ", Error message: " +
                     error.errorMessage + " ❌");
    };

    // define object of style parameters 
    const customizationOptions = {
      '--color-app': '#f3f3f3',
      '--color-primary': '#6158fb',
      '--color-focus': '#5047ff',
      '--color-hover': '#5047ff',
      '--font': 'Inter',
    };

    // initialize library
    RCH_CC.rchInit({ target, id, onSuccess, onFailure, customizationOptions });
  }
  }
</script>

<style>
  .cc {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
  }
</style>

<div id="rch-cc"></div>

Housing the App

In the above example, a lone div element is provided to house the iframe which contains the Drop-In. The Drop-In will grow automatically to fill the width of any container that holds it. It contains no padding or margins, so it will sit tight within its parent component.

An 'optimal' max-width for the container of 540px is provided in the example. Most elements within the Drop-In, like buttons and form inputs, will scale automatically with the width of the parent in a responsive fashion. It is not recommended to allow the Drop-In to scale to full-screen width on larger displays, since this may cause some components to look unusual.