Customizing the Embedded Checkout

Make the checkout form match your brand perfectly!

The myPOS Embedded Checkout comes with a clean default design, but you can easily customize it to match your website's look and feel.

Prefer the default style? No problem! The original myPOS design works great out of the box.

What You Can Customize

Parameter	Type	Description
`formBackgroundColor`	String	Background color of the form
`labelFontSize`	String	Label text size (12px - 16px)
`labelColor`	String	Label text color
`inputBorderRadius`	String	Rounded corners on input fields
`payButtonBorderColor`	String	Pay button border color
`payButtonBackgroundColor`	String	Pay button background color
`payButtonBorderColorHover`	String	Border color when hovering
`payButtonBackgroundColorHover`	String	Background color when hovering
`payButtonColor`	String	Button text color
`payButtonColorHover`	String	Text color when hovering
`payButtonFontSize`	String	Button text size

🔷 Blue Theme Example

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,
);

🌑 Dark Theme Example

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,
);

Pro Tip: Use these examples as starting points and adjust the colors to match your brand perfectly!