SDK Overview
The Revup SDK provides the client-side components you need to integrate Revup payments into your checkout.
It allows you to securely collect customer payment details and submit payments using an order created through the Revup API.
The SDK provides two ways to build your payment form:
- Revup Form — a complete payment form that you can customize to match your checkout.
- Revup Frames — individual payment fields that you can place and style independently within your own checkout UI.
Both approaches use the same Revup payment flow and can be used for different payment scenarios, including one-off payments, token-based payments, and subscription creation.
How the SDK works
The SDK is used after your backend has created an order through the Revup API.
The general flow is:
The orderId returned by the Revup API identifies the order that the SDK will use to process the payment.
For more information about creating orders, see Create an order.
Load the SDK
Before using Revup Form or Revup Frames, you must load the Revup SDK in your checkout page.
Once the SDK has been loaded, you can initialize the payment integration using the configuration required by your chosen SDK component.
The configuration includes information such as:
orderId— the Revup order associated with the payment.apiKey— your Revup API key.env— the Revup environment where the payment is processed.
The exact initialization depends on whether you are using Revup Form or Revup Frames.
The SDK handles the secure collection of payment details. Your application should not collect or store raw card details directly.
Choose your integration
Revup Form
Revup Form provides a complete payment form that you can render inside your checkout.
It is suitable when you want Revup to provide the payment form structure while still allowing you to customize its appearance and behavior.
With Revup Form, you can configure options such as:
- Language
- Layout
- Theme
- Tooltips
- Styles
- Input states
See Revup Form for the implementation and configuration options.
Revup Frames
Revup Frames provides individual payment fields that you can integrate into your own checkout.
Instead of rendering a complete form, you create and mount the individual fields you need, such as:
- Cardholder
- Card number
- Expiration date
- CVC
This approach gives you more control over the structure and layout of your checkout.
See Revup Frames for the implementation and styling options.
Form vs Frames
Both integrations allow you to collect payment details through the Revup SDK. The main difference is how much control you want over the checkout UI.
| Revup Form | Revup Frames | |
|---|---|---|
| Payment form | Complete form | Individual fields |
| Checkout structure | Provided by Revup | Controlled by your application |
| UI customization | Configurable | Fully integrated into your UI |
| Field placement | Managed by the form | Controlled by your application |
| Best suited for | Standard checkout integrations | Custom checkout experiences |
Choose Revup Form when you want a complete payment form with configurable styling.
Choose Revup Frames when you need to build the checkout UI yourself and control where each payment field appears.
Payment flow
The SDK is responsible for collecting the customer's payment details and submitting the payment for the order.
It does not replace the Revup API. Your backend is still responsible for creating the order and handling the resulting payment state.
A typical integration therefore has two parts:
- Backend — creates the order through the Revup API.
- Frontend — loads the SDK and collects the customer's payment details.
For more information about the complete payment flow, see:
Next steps
Choose the SDK integration that best fits your checkout:
For the complete API and SDK technical reference, see the API Reference and SDK Reference.