Most settings of the Embedded checkout can be customized and adapted if needed. To do that, please refer to the Customization properties below.

 

To keep the original design of the payment forms, you can use the default settings.

 

Customization Properties

Property

Typical value

Type

Unit

Description
formBackgroundColor #555d60

String

Color hex code

 Background color
labelFontSize 12px

String

Unit pixels

 Font size of the labels (min: 12px, max: 16px)
labelColor #ffffff

String

Color hex code

 Label color
inputBorderRadius 20px

String

Unit pixels or presents

 Border radius of the inputs
payButtonBorderColor #f8be37

String

Color hex code

 Pay button border color
payButtonBackgroundColor #f8be37

String

Color hex code

 Pay button color
payButtonBorderColorHover #007ff5

String

Color hex code

 Pay button border color hover
payButtonBorderColorFocus #007ff5

String

Color hex code

 Pay button border color focus
payButtonBackgroundColorHover #007ff5

String

Color hex code

 Pay button color hover
payButtonBackgroundColorFocus  #007ff5

String

Color hex code

Pay button color hover
payButtonColor #ffffff

String

Color hex code

Pay button text color
payButtonColorHover #007ff5

String

Color hex code

Pay button text color on hover
payButtonColorFocus #007ff5

String

Color hex code

Pay button text color on focus
payButtonFontSize 14px

String

Color hex code

 Pay button font size (min: 12px, max: 16px)

 
You can check the examples below for alternative designs.

 

Blue

import * as MyPOSEmbedded from 'mypos-embedded-checkout';

var paymentParams = {...};

var callbackParams = {...};

var customization = {
    formBackgroundColor: '#e5f2fe',
    labelFontSize: '13px',
    labelColor: '#007ff5',
    inputBorderRadius: '6px',
    payButtonBorderColor: '#007ff5',
    payButtonBackgroundColor: '#007ff5',
    payButtonColor: '#fff',
    payButtonFontSize: '15px',
}

MyPOSEmbedded.createPayment(
    'embeddedCheckout',
    paymentParams,
    callbackParams,
    customization,
);
<div id="myPOSEmbeddedCheckout"></div>
<script src="https://developers.mypos.com/repository/mypos-embedded-sdk.js" type="text/javascript"></script>
<script>
    var paymentParams = {...};

    var callbackParams = {...};

    var customization = {
	formBackgroundColor: '#e5f2fe',
        labelFontSize: '13px',
        labelColor: '#007ff5',
        inputBorderRadius: '6px',
        payButtonBorderColor: '#007ff5',
        payButtonBackgroundColor: '#007ff5',
        payButtonColor: '#fff',
        payButtonFontSize: '15px',
    }

    MyPOSEmbedded.createPayment(
        'embeddedCheckout',
        paymentParams,
        callbackParams,
        customization,
    );
</script>

Dark

import * as MyPOSEmbedded from 'mypos-embedded-checkout';

var paymentParams = {...};

var callbackParams = {...};

var customization = {
    formBackgroundColor: '#555d60',
    labelFontSize: '12px',
    labelColor: '#fff',
    inputBorderRadius: '0px',
    payButtonBorderColor: '#f8be37',
    payButtonBackgroundColor: '#f8be37',
    payButtonColor: '#fff',
    payButtonFontSize: '14px',
}

MyPOSEmbedded.createPayment(
    'embeddedCheckout',
    paymentParams,
    callbackParams,
    customization,
);
<div id="myPOSEmbeddedCheckout"></div>
<script src="https://developers.mypos.com/repository/mypos-embedded-sdk.js" type="text/javascript"></script>
<script>
    var paymentParams = {...};

    var callbackParams = {...};

    var customization = {
	formBackgroundColor: '#555d60',
	labelFontSize: '12px',
	labelColor: '#fff',
	inputBorderRadius: '0px',
	payButtonBorderColor: '#f8be37',
	payButtonBackgroundColor: '#f8be37',
	payButtonColor: '#fff',
	payButtonFontSize: '14px',
    }

    MyPOSEmbedded.createPayment(
        'embeddedCheckout',
        paymentParams,
        callbackParams,
        customization,
    );
</script>