Skip to main content

Revup Frames

Once loading the SDK in your site, you will have access to the global MacroPayFrames class. Create your configuration object and use the init() method to initialize the frames:

const config = {
   orderId: orderId || defaultOrderId,
   apiKey: 'aLxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
   env: 'live',
   version: '2',
   options : {
      language: MacropayFrames.LANGUAGES.SPANISH,
      textDirection: MacropayFrames.TEXT_DIRECTION.RIGHT_TO_LEFT
   }
};

MacropayFrames.init(config);

Once the frames initialize, you will be able to render the fields you created:

  1. Create the containers in your DOM where the fields will be embedded. Remember to assign the appropriate ID to each container.

  2. Use the create() method to create a new instance of the CreditCardElement class. You need to create each type of element separately: card-holder, card-number, exp-date, and CVC fields are the available and required input types.

  3. Use the mount() method provided by the CreditCardElement instance to mount the element in your DOM.

const cn_Field = MacropayFrames.create(MacropayFrames.INPUT_TYPES.CARD_NUMBER);
const ch_Field = MacropayFrames.create(MacropayFrames.INPUT_TYPES.CARD_HOLDER);
const ed_Field = MacropayFrames.create(MacropayFrames.INPUT_TYPES.EXP_DATE);
const cv_Field = MacropayFrames.create(MacropayFrames.INPUT_TYPES.CVC);

cn_Field.mount();
ch_Field.mount();
ed_Field.mount();
cv_Field.mount();

Styling the Field Containers​

Since field containers are under your control, you can style them as you need. We only interact with containers by applying/removing CSS classes. We use BEM class notation to give the style of the container and define them using the appropriate class names.

.macropay {
   &-card-holder,
   &-card-number,
   &-exp-date,
   &-cvc {
      border: 0;
      border-bottom: 1px solid #5e74ed;
      border-radius: 4px;
      width: calc(100% - 18px);
      height: 19px;
      text-align: center;
      background-color: #f2f5fb;
      padding: 8px;

      &:hover {
         border-color: #5ed0ed;
      }

      &--focused {
         border-color: green;
         background-color: #d9d9d9;
      }

      &--error {
         border-color: red;
         border-width: 2px;
         background-color: #ff1b1450;
         color: red;
      }
   }
}

As you can see above, to give style to the card number field, we add the macropay-card-number class to the card number container. When the input is focused, we will add a macropay-card-number–focused class on its container and remove it when the input’s blurred. Check the styling documentation to learn more about styling frames.