Ready-to-Use Checkout Screens

Ready-to-Use Checkout Screens

To speed up your development process, we provide ready-to-use checkout screens. This takes away the burden of having to design and implement your own checkout screens. These screens define a customizable checkout flow which integrates nicely into your application.

There are two ways you can use our checkout screens. The following table will help you choose the solution that works best for you.

Drop-In Checkout Drop-In Forms and Payment Buttons
Integration steps 1. Set list of supported payment methods
2. Present checkout screens
Integration guide
1. Create payment button
2. Present checkout for specific payment method
Integration guide
First presented screen List of payment methods
and stored cards (optionally)
Depends on specific payment method:
  • Payment form (Credit cards)
  • Web page (PayPal)
  • Modal view (Apple Pay)
Benefits 1. Ready screen with list of payment methods
2. Ready UI for payments with stored cards, that can be received authomatically from server (see screenshots below)
1. More flexible solution, use drop-in buttons or any other controls to display payment methods
2. The best way to add specific payment method to your app


Payment methods

Synchronous payments

In case of synchronous payments, shopper's payment details are collected only in the app. No redirects for additional checks and authentication are needed.
You can test synchronous payments with credit cards (not enrolled for 3D Secure) and SEPA direct debit.

To learn how to integrate SDK with our prebuilt checkout forms, follow the First Integration guide.

Asynchronous payments

For some payment methods additional shopper verification (3D Secure) or account authentication (SOFORT Banking) is required. In this case the shopper will be redirected from the payment form to the issuer page to verify his identity.

See how to configure your app to return from app switches in Asynchronous payments guide.

Checkout Screens Customization

UI Customization

We built the Checkout project so that from the default theme that we provide you can define your own appearance and apply the attributes you want to customize.

Full reference can be found in the Customization guide.

Internationalization

Our prebuilt checkout UI currently supports 5 languages (English, German, Russian, Thai and Japanese).
You are also able to add your own translations or change text for existing ones.

You can find detailed instructions in the Internationalization guide.

Credit card scanning

You can scan your credit card to enter your payment information for a purchase, saving you from having to key in your digits manually.
Tap the camera icon in the card number field to scan the card. For the first time the app will request access to the camera. Then position your card and it will scan card number and expiration date. You will still need to manually enter card holder and CVV code.

Store payment details

You can enable option to store payment details, it is supported for credit card and bank account details (SEPA direct debit).
Shopper's payment details are stored with unique identifier (token), which can be used for future payments.

You can find more details in the Tokenization guide.

Skipping CVV

Checkout project provides an opportunity to skip CVV request for all cards or only for stored ones.