Drop-in JavaScript Library (rch.js) Guide
Usage
You must load the Drop-In App first, then initialize it. 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. The table below defines this object.
parameter | type | description |
---|---|---|
id | string | Session ID generated by API |
target | string or HTMLElement | Element or selector for app placement |
hideSubmitButton | boolean | Set the value to true to hide the submit button. |
onSuccess | function | A callback was executed on card payment success. When you use a payment option that does not redirect, you will use this method to manipulate the DOM or redirect to a success page when the Drop-In triggers it on session completion. |
onFailure | function | A callback is 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 | A callback receives a submit allowed boolean when the 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
If your using the sandbox, the script URL is: 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 that 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 parent's width in a responsive fashion. Allowing the Drop-In to scale to full-screen width on larger displays is not recommended since this may cause some components to look unusual.
Updated 14 days ago