Skip to main content

Styling

BOPP Button is provided in 4 possible styles: DarkWide, DarkShort, LightWide, LightShort. If buttonStyle parameter is not passed, the default style will be 'DarkWide'. You can also set a Custom style where you can supply your own button design.

DarkWide
DarkShort
LightWide
LightShort
Parameter for the init function of the button should be:
const boppButton = BoppButton({
      key: 'cri:BDeMFufilAUaeAsc1aP1uMzFStttl5m2',
      container: boppBtn,
      buttonStyle: 'DarkShort'
});

Removing payer Launch screen​

To remove payer launch screen and immediately proceed with payment, set the showPayerLaunchScreen function parameter to 'false'.

boppButton.showPayerLaunchScreen(false)

Custom Button Styling​

To use custom button styling, set the buttonStyle parameter in the init function to 'Custom'.

buttonStyle: 'Custom'

Anything inside the <div> tag that has been assigned as the BOPP container will act as a button to launch the payment flow.

You can assign a callback that will allow you to modify the Button according the status of the payment process.

boppButton.setCallback(onPaymentStatusChange);

There are 5 possible status that can be returned:

  • Initiated,
  • ConnectingToBank,
  • PaymentInProcess,
  • PaymentCompleted,
  • PaymentFailed,
  • Abort
function onPaymentStatusChange(status) {
    console.log(status);
    bopp.innerHTML = getButtonForStep(status);
}

function getButtonForStep(status) {
    const desktop = window.screen.width > 1000;
    if(!desktop) {
        if(status === 'Initiated') {
            return `<div style="background-color: #3bfee1; padding: 5px">
                                <p>Button for step=Initiated</p>
                            </div>`;
        } else if(status === 'ConnectingToBank') {
            return `<div style="background-color: blue; padding: 5px">
                            <p>Button for step=connecting to bank</p>
                        </div>`;
        } else if(status === 'PaymentInProcess') {
            return `<div style='background-color: #ee00ff; padding: 5px'>
                            <p>Button for step=Payment In Process</p>
                        </div>`;
        } else if(status === 'PaymentCompleted') {
            return `<div style='background-color: #FEE600; padding: 5px'>
                            <p>Button for step=Payment Completed</p>
                        </div>`;
        } else if(status === 'PaymentFailed') {
            return `<div style='background-color: coral; padding: 5px'>
                            <p>Button for step=Payment Failed</p>
                        </div>`;
        } else {
            return bopp.innerHTML;
        } 
    }
}

In the example above, the desktop value

const desktop = window.screen.width > 1000;

is used to determine if the page is being viewed on a mobile device or desktop. By default, on the desktop the button does not change through the payment process as that is communicated on the payment overlay, whilst on mobile we update the button.