Skip to main content

Revup Frames

Revup Frames allows you to integrate individual payment fields into your own checkout.

Unlike Revup Form, which provides a complete payment form, Frames lets you control the structure and layout of your checkout while Revup provides the secure payment fields.

Before using Revup Frames, make sure you have:

  • Created an order through the Revup API.
  • Received the orderId.
  • Loaded the Revup SDK.

For more information about the general SDK integration, see SDK Overview.

Initialize Revup Frames​

Once the SDK is loaded, you can access the global RevupFrames class.

Create a configuration object and use RevupFrames.init() to initialize the Frames integration.


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

RevupFrames.init(config);

Configuration​

The main configuration properties are:

PropertyDescription
orderIdThe Revup order that will be used for the payment.
apiKeyYour Revup API key.
envThe Revup environment where the payment is processed.
versionThe Frames version to use.
optionsAdditional Frames configuration options.

Create the payment fields​

After initializing Frames, create the containers in your DOM where the payment fields will be mounted.

Each container should have its own identifier.

You can then use RevupFrames.create() to create a CreditCardElement for each payment field.

The available input types include:

  • CARD_HOLDER
  • CARD_NUMBER
  • EXP_DATE
  • CVC

For example:


const cn_Field = RevupFrames.create(
RevupFrames.INPUT_TYPES.CARD_NUMBER
);

const ch_Field = RevupFrames.create(
RevupFrames.INPUT_TYPES.CARD_HOLDER
);

const ed_Field = RevupFrames.create(
RevupFrames.INPUT_TYPES.EXP_DATE
);

const cv_Field = RevupFrames.create(
RevupFrames.INPUT_TYPES.CVC
);

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

Each field is created separately and then mounted into the corresponding container in your checkout.

Mounting the fields​

The typical integration flow is:

  1. Create the container for the field in your HTML.
  2. Create the corresponding CreditCardElement using RevupFrames.create().
  3. Mount the element using .mount().
  4. Apply your own styling to the field container.

This allows you to control the layout of your checkout while keeping the payment fields integrated with Revup.

Styling the field containers​

The field containers are controlled by your application, so you can style them according to your checkout design.

Revup interacts with these containers by applying and removing CSS classes based on the state of each field.

For example, the card number container can use the revup-card-number class.


.revup-card-number {
border: 0;
border-bottom: 1px solid #5e74ed;
border-radius: 4px;
width: calc(100% - 18px);
height: 19px;
text-align: center;
background-color: #f2f5fb;
padding: 8px;
}

Revup can also apply state-specific classes.

For example:

  • revup-card-number--focused when the field is focused.
  • revup-card-number--error when the field contains an error.

You can use these classes to provide visual feedback to the customer.

For detailed styling options, see the Styling Documentation.

Styling Documentation​

Because Frames only provides the payment fields, your application is responsible for the surrounding checkout UI.

You can therefore control:

  • Field containers
  • Spacing
  • Labels
  • Layout
  • Responsive behavior
  • Field states
  • Checkout structure

Revup provides CSS classes that allow you to adapt the appearance of the fields to your application.

When to use Revup Frames​

Revup Frames is a good fit when:

  • You need complete control over your checkout layout.
  • You want to place payment fields individually.
  • You have an existing checkout UI that you want to integrate with Revup.
  • You need to customize the position and structure of each payment field.

If you prefer a complete payment form with configurable styling, use Revup Form.

Payment result​

Frames is responsible for rendering and collecting the payment fields, but your application must still handle the resulting payment state.

A transaction can have different statuses, including:

  • success
  • failed
  • in_process
  • waiting_user_interaction

For more information about handling payment results, see Handle the payment result.