3. (Optional) Customise and control the payment page
If needed, you can customize the look and feel of the payment page. You can change the colors, shapes, and fonts to match the look and feel of your mobile shop application. The Android Checkout SDK interface is built using
material.io. You can find more information on how material.io works
here.
If you don't theme the page, we automatically apply the default theming.
Page theming
The theming of the Android Checkout SDK screens, dialogs, and views is done using the PaymentTheme
class. In order for theming to take effect, set the the customized PaymentTheme
instance in the PaymentUI
class before showing the payment page.
The
PaymentTheme
class contains a set of parameters defining the customized theming for the
PaymentList
and
ChargePayment
screens. You can find the default theming of the android-sdk in the
themes.xml and
styles.xml files.
Theming the PaymentList screen
To change the theme of the PaymentList
screen:
1 Create a new theme in your themes.xml file and add material settings like primaryColor
in this newly created theme.
2. When the theme is in your themes.xml file, set it in the PaymentTheme
. The PaymentList
screen contains a toolbar with back button, so use a custom theme including theming of the toolbar.
Code sample of how to create and set a custom PaymentList theme:
PaymentTheme.Builder builder = PaymentTheme.createBuilder();
builder.setPaymentListTheme(R.style.CustomTheme_Toolbar);
The examplecheckout-sdk app contains a
themes.xml file that contains the custom theme for the PaymentList screen.
PaymentList fonts
You can change the font style of labels in the PaymentList
screen by modifying the settings of the corresponding material typography attributes.
Theming ChargePayment screen
Similarly to the theming of the PaymentList
screen, you can also theme the ChargePayment
screen by creating a custom theme and setting it in the PaymentTheme
. Unlike the PaymentList
screen, the ChargePayment
screen doesn't contain a toolbar and the custom theme should not contain the theming of a toolbar.
Code sample of how to create and set a custom ChargePayment theme:
PaymentTheme.Builder builder = PaymentTheme.createBuilder();
builder.setChargePaymentTheme(R.style.CustomTheme_NoToolbar);
The
themes.xml file in the example-sdk app also contains the custom theme without toolbar.
Page orientation
By default, the orientation of the payment page will be locked based on the orientation in which the payment page was opened. For example if the mobile app is shown in the landscape mode the payment page will also be opened in the landscape mode. This can't be changed anymore by rotating the phone.
Code sample of how to set the fixed orientation mode:
//
// Orientation modes supported by the Payment Page
// ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
// ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
// ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE
// ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT
//
PaymentUI paymentUI = PaymentUI.getInstance();
paymentUI.setOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
paymentUI.showPaymentPage(this, PAYMENT_REQUEST_CODE);