Skip to main content

Introduction

Use our Checkout Components to collect payments directly on your website. The Checkout Components allow for a customized payment experience that is secure and does not affect your PCI scope. The Checkout Components are made available through Rootline.js. Your customers enjoy an uninterrupted checkout process, staying on your page throughout their payment journey while their payment data flows securely to Rootline.

This guide explains how to integrate the SDK into your checkout to accept payments. It covers the basic concepts, implementation steps, and technical details you'll need to get started.

Available Components​

The SDK provides components for different payment methods:

  • Card Form — A form with secure input fields for card payments (number, expiry, CVC, cardholder name).
  • Wallet Buttons — Apple Pay and Google Pay buttons. These components emit a click event when pressed, which you must handle to complete the payment flow.
  • Payment Method List — A list of all available payment methods, which can include the card component, wallet payments, and alternative payment methods, such as iDEAL and Bancontact.

How It Works​

The Checkout Components inject secure iframes into your checkout page. The content of these iframes is hosted on Rootline's servers, keeping sensitive payment data completely isolated from your website's environment. All data is encrypted before it touches your website, ensuring raw payment details remain protected within your customer's browser and never reach your servers.

Before using the SDK, you need to add the domain(s) you want to use the SDK on to your account or your sellers' accounts.

The SDK supports two integration patterns:

  • Standard — Create the payment first, then render the component(s) with a paymentSessionSecret you receive from the Payment API.
  • Deferred — Render the form first, create the payment after the customer submits the component. You will need an accountPublishableKey to identify your account.

See Choose your integration for details on which approach fits your use case.

Browser Compatibility​

The Checkout Components supports the following browser versions and later:

  • Chrome 66
  • Edge 79
  • Safari 15.4
  • Firefox 57
  • Opera 53

Content Security Policy (CSP)​

If you use a Content Security Policy, allow our domain for loading the SDK and injecting secure fields:

Content-Security-Policy:
   script-src *.rootline.com;
   frame-src *.rootline.com;

Testing​

Use our staging environment to test your integration before going live.

  • Card payments — Use test card numbers to simulate different scenarios such as successful payments, 3DS authentication, and declined transactions. See Test cards for a complete list.
  • Local payment methods — For iDEAL, Bancontact, and other local payment methods, a simulator is provided to test the payment flow without using real bank accounts.
  • Apple Pay and Google Pay — In the staging environment, use an Apple Sandbox account or a Google account with a card attached to test wallet payments.