Skip to main content

Revup Form

Revup Form provides a complete payment form that you can render inside your checkout.

It allows you to collect the customer's payment details while giving you control over the form's appearance and configuration.

Before using Revup Form, 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 Form​

After loading the SDK, you can access the global Revup class.

Create a configuration object with the order and environment information, then create a new Revup instance.

You can then use initForm() to render the payment form.


const config = {
orderId: 'e99b5ce0-6495-4cf3-b1f9-31cbabad72f9',
apiKey: 'aLxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
env: 'live'
};

const revup = new Revup(config);

revup.initForm({
containerId: '<Your html container element id>',
onSubmit: <A callback function>,
formOptions: { … }
});

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.

The initForm() method accepts the options used to configure and render the form.

Form options​

The formOptions object allows you to customize the form's behavior and appearance.

Available options include:

  • Language
  • Theme
  • Layout
  • Tooltips
  • Style overrides

For detailed information about the available options, see Form Options Overview.

Form Options Overview​

The formOptions object contains the configuration used to customize the payment form.

Language​

You can configure the language used by the payment form.

Theme​

Themes allow you to customize the visual appearance of the form.

Layout​

Configure the layout of the payment fields within the form.

Tooltips​

Configure the tooltips displayed by the payment form.

Style overrides​

You can override the default styles to match the form with your checkout design.

Customization​

Revup Form allows you to customize the look and feel of the checkout form.

Using the configuration passed to initForm(), you can customize aspects such as:

  • Colors
  • Size
  • Spacing
  • Input states
  • Labels
  • Tooltips
  • Focused states
  • Hover states
  • Validation states

Revup also provides themes that can be used to override the default styling partially or completely.

For detailed styling options, see the Styling Documentation.

Handling form submission​

The onSubmit callback allows your application to react when the customer submits the payment form.

The payment result should be handled according to the transaction status returned by Revup.

A payment can result in different states, including:

  • success
  • failed
  • in_process
  • waiting_user_interaction

Not every payment is completed immediately. For example, some payment flows may require additional customer interaction before the transaction reaches a final state.

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

Styling​

The Revup Form styling options allow you to adapt the form to your checkout design without having to build the payment fields yourself.

You can configure the form through its available themes and style options.

For detailed styling configuration, see the Styling Documentation.

When to use Revup Form​

Revup Form is a good fit when:

  • You want a complete payment form.
  • You want Revup to manage the structure of the payment fields.
  • You want to customize the appearance without building each payment field yourself.
  • You want a simpler integration than building the checkout fields individually.

If you need complete control over the checkout structure and the placement of individual payment fields, consider using Revup Frames.