Modules

Revup Frames

This is the main static class added to your DOM via SDK. It is globally accessible since the SDK is loaded, and these are the main methods exposed by this class:

Methods Table

METHOD	ARGUMENTS	TYPE	DESCRIPTION
init	config	Object	This function will render the form and receive a config object as a parameter.
create	inputType	String	Method that creates a credit card element. Check the MacropayFrames global constants section.
	styles	Object	Object to customize the input style values. Check the styling section.
addEventHandler	eventName	String	Check the MacroPayFrames global constants section.
	handler	Function	Callback function.
submit	-	-	Submit the input values to the payment API endpoint.
destroy	-	-	Unmount input fields.

---

Create Method Example

The create method creates and returns a CreditCardElement attached to its container. To create a CreditCardElement, add a container in the DOM with inputType as id.

/* Check styling guide to know more about macropay class names */
<div
    className="macropay-card-number"
    id="card-number"
    data-qa="card-number" />

/* Check styling guide to know more about style object */
const style = {
    base: {
        color: '#5e74ed'
    }
};

const cc_Field = MacropayFrames.create(MacropayFrames.INPUT_TYPES.CARD_NUMBER, style);

---

addEventHandler Method Example

The addEventHandler subscribes a callback handler to an event in order to execute your actions when this event is dispatched. Check the MacropayFrames global constants section to know more about events.

MacropayFrames.addEventHandler(
    MacropayFrames.EVENTS.CC_FIELD_BLURRED,
    event => {
        const { detail } = event;
        const { field, error, isValid } = detail;
        setCC_Field_State(prevState => ({
            ...prevState,
            [field]: { error, isValid }
        }));
    }
);

---

submit Method Example

This is an example of the submit method in use:

const [ submitting, setSubmitting ] = useState();

const submitHandler = () => {
    setSubmitting(true);
    MacropayFrames.submit();
};

MacropayFrames.addEventHandler(
    MacropayFrames.EVENTS.ON_SUBMITTED,
    event => {
        const { detail } = event;
        onResponseHandler(detail.response);
        setSubmitting(false)
    }
);

<Button
    loading={submitting}
    className="your-css-class"
    onClick={submitHandler}>  Pay  </Button>

---

CreditCardElement

This class is related to each credit card field in the form. The fields CardNumber, CardHolder, ExpirationDate and CVC are all required so you will need to create each of them; the field ZipCode is optional though, and you must enable it if you want its content to be added to the submit payment request. These are the available methods in the CreditCardElement class:

Methods Table

METHOD	ARGUMENTS	TYPE	DESCRIPTION
mount	-	-	Mounts the create cc_field in your DOM.
unmount	-	-	Unmounts the cc_field.
updateConfig	styles	Object	Object to customize the input style values. Check the styling section.

const cc_Field = MacropayFrames.create(
    MacropayFrames.INPUT_TYPES.CARD_NUMBER, style);

cc_Field.mount();