Initialization

Controlled mode

In the default mode, a full form with a submit button and a card types component will be rendered. This is a basic implementation and form initialization example:

const macropay = new Macropay(config);
macropay.initForm({
   containerId: '<The HTML container ID>',
   onSubmit: <A callback function>
});

The form rendering is the main responsibility of the initForm method and it needs an object as parameter to be properly invoked. This method will append an iframe element as a child of the HTML element with an ID attribute equal to the specified in the “containerId” property, so this property needs to have a valid ID.

The iframe will point at the Revup hosted form URL and once the form is rendered inside the iframe with this basic configuration, all the validation and call logic will be handled there, so the merchant only needs to care about the result through the callback function provided in the onSubmit property in order to redirect or show something to the end user. This is an example of a callback function:

const onSubmitHandler = result => console.log(result);

Discreet mode

The idea of this custom mode is to render a more discreet form (only the inputs) and leave some space for customization to the merchant. This is a custom initialization example:

const macropay = new Macropay(config);
macropay.initForm({
   containerId: '<The html container element id>',
   formOptions: {
      showButton: false,
      language: 'es-ES'
   },
   onChange: <A callback function>
});

Passing the formOptions object to the initForm method like this will result in a form rendered in Spanish without the submit button. The onSubmit callback has been replaced with onChange, and through this one the merchant will receive real time information, such as the current form validation state in order to enable/disable a custom submit button.

In addition to the onChange callback the merchant will need a method to be called when the user clicks on his custom submit button. For this reason the SDK will expose the submit method and can be used by a merchant in this way:

const onClick = () => (
   macropay.submit()
      .then(doSomethingWithResponse)
      .catch(doSomethingWithError)
);