ApplicationView.java

package gwt.material.design.test.client.application;

import com.google.gwt.dom.client.Style;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Widget;
import com.gwtplatform.mvp.client.ViewImpl;
import gwt.material.design.client.ui.MaterialLabel;
import gwt.material.design.client.ui.MaterialProgress;
import insclix.core.ui.beanstream.client.payfields.PayFields;

import javax.inject.Inject;

public class ApplicationView extends ViewImpl implements ApplicationPresenter.MyView {
    interface Binder extends UiBinder<Widget, ApplicationView> {
    }

    @UiField
    PayFields payFields;

    @UiField
    MaterialLabel status, fieldType, error, valid, token, code, message, success;

    @UiField
    MaterialProgress progress;

    @Inject
    ApplicationView(
            Binder uiBinder) {
        initWidget(uiBinder.createAndBindUi(this));

        payFields.addLoadedHandler(event -> {
            status.setText("Status : Loaded");
        });

        payFields.addInputValidityChangedHandler(event -> {
            status.setText("Status : Input Validity Changed");
            fieldType.setText("Field Type : " + event.getFieldType());
            error.setText("Error : " + event.getError());
            valid.setText("Valid : " + event.isValid());
            fieldType.setVisible(true);
            error.setVisible(true);
            valid.setVisible(true);
        });

        payFields.addTokenRequestedHandler(event -> {
            status.setText("Status : Token Requested");
            fieldType.setVisible(false);
            error.setVisible(false);
            valid.setVisible(false);
            progress.setVisible(true);
        });

        payFields.addTokenUpdatedHandler(event -> {
            Timer t = new Timer() {
                @Override
                public void run() {
                    status.setText("Status : Token Updated ");
                    token.setText("Token : " + event.getToken());
                    code.setText("Code : " + event.getCode());
                    message.setText("Message : " + event.getMessage());
                    success.setText("Success " + event.isSuccess());
                    progress.setVisible(false);
                }
            };
            t.schedule(2000);

        });

        payFields.getSubmit().setLayoutPosition(Style.Position.ABSOLUTE);
        payFields.getSubmit().setBottom(12);

        payFields.getCardNumber().setMarginTop(20);
        payFields.getExpiry().setMarginTop(20);
        payFields.getCvv().setMarginTop(20);
    }
}

ApplicationView.ui.xml

<!--
  #%L
  GwtMaterial
  %%
  Copyright (C) 2015 - 2017 GwtMaterialDesign
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns:g='urn:import:com.google.gwt.user.client.ui'
        xmlns:m="urn:import:gwt.material.design.client.ui"
        xmlns:ma="urn:import:gwt.material.design.addins.client"
        xmlns:b="urn:import:insclix.core.ui.beanstream.client.payfields">

    <ui:with field="res" type="gwt.material.design.test.client.resources.AppResources"/>
    <ui:style gss="true">
        @external footerPanel;
        .footerPanel {
            border-top: 1px solid #e9e9e9;
        }
        body {
            background: #e9e9e9;
        }
    </ui:style>
    <m:MaterialPanel>
        <m:MaterialRow>
            <m:MaterialCard backgroundColor="WHITE" grid="s12 m8 l6" height="400px" offset="m2 l3" marginTop="120">
                <m:MaterialColumn grid="s12 m6 l4" backgroundColor="BLUE" height="100%"  padding="40" textColor="WHITE" textAlign="CENTER">
                    <m:MaterialLabel fontSize="2em" fontWeight="LIGHTER" text="PayFields" />
                    <m:MaterialLabel text="Simple demo for Beanstream PayFields" fontWeight="LIGHTER" />
                    <m:MaterialPanel textAlign="LEFT" paddingTop="60">
                        <m:MaterialLabel ui:field="status" />
                        <m:MaterialLabel ui:field="fieldType" />
                        <m:MaterialLabel ui:field="error" />
                        <m:MaterialLabel ui:field="valid" />
                        <m:MaterialLabel ui:field="token" />
                        <m:MaterialLabel ui:field="code" />
                        <m:MaterialLabel ui:field="message" />
                        <m:MaterialLabel ui:field="success" />
                    </m:MaterialPanel>
                </m:MaterialColumn>
                <m:MaterialColumn padding="0" grid="s12 m6 l8" height="100%" layoutPosition="RELATIVE">
                    <b:PayFields ui:field="payFields" padding="40"/>
                    <m:MaterialPanel  ui:field="footerPanel" height="60px" width="100%" layoutPosition="ABSOLUTE" bottom="0" addStyleNames="footerPanel">
                        <m:MaterialProgress ui:field="progress" visible="false" type="INDETERMINATE"/>
                    </m:MaterialPanel>
                </m:MaterialColumn>
            </m:MaterialCard>
        </m:MaterialRow>
    </m:MaterialPanel>
</ui:UiBinder>