Choose your integration
Our Checkout Components allow you to control the look-and-feel of your checkout, while Rootline takes on the complexity of payment authentication and authorization. Depending on your needs and preferences, you may use one of two flavours of the Checkout Components:
- Standard: Create a payment first and let Rootline handle the payment steps.
- Deferred: Create a payment through Rootline's Payments API only after collecting payment details first.
Standard
The Standard implementation is the fastest and simplest way to accept payments. Initializing Rootline.js in your checkout with a payment's paymentSessionSecret will load the payment component, allowing your customer to fulfill their payment. You set up the integration once and your checkout automatically adjusts to any future settings, like when you add a new payment method to your account configuration.
Deferred
The Deferred implementation is the most flexible way to accept payments. When a customer arrives at your checkout, you might not know the exact amount of the payment. For instance, you may have a discount or voucher input field for customers to use which impacts the amount you end up creating the payment for at Rootline. In this case you can have your customer fill out their payment information before creating the payment server-to-server with the final amount.
The information that you send into the Rootline Payment API will always be leading in processing the payment. For security, we strongly recommend validating payment details, such as the payment amount, on your server before forwarding to Rootline.
Standard vs Deferred
| Standard | Deferred | |
|---|---|---|
| When to use | The amount/currency is final before the checkout component is rendered. You want stricter server-led control and simpler backend logic | The customer can change totals or currency during the rendering of the payment UI. Taxes, shipping, discounts or credits are resolved after the checkout component is visible |
| Typical use cases | Simple checkouts, fixed pricing, pre-calculated totals | Dynamic shipping costs, last-minute cart modifications, coupons/giftcards |
| Implementation | Single backend call (/payments) before rendering form. Frontend steps are taken care of by Rootline | Deferred backend call for payment creation (/payments). You handle more frontend steps yourself. |
| Components Initializatation | Initialize with a paymentSessionSecret returned in the Payment API response | Initialize with accountPublishableKey, amount, and currency |
| Payment creation timing | Before your customer sees the payment form | After your customer chooses a payment method |