Braintree Custom UI - Input fields too big

@moere wrote:

Somehow I can't solve this problem with Braintree custom UI. It generates unexpected behaviour. For example The IFrames are way too big. I tried to disable all heights (aswell those from the body inside the iframe) but then the Iframe height stays. Only by setting a fix pixel height on the Iframe scales it down but that can't be the solution (It's ugly seriously).

My JS:

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
    var clientToken = "XXXXXXXXXXXXXXX....";

    braintree.setup(clientToken, "custom", {
        id: "payment-form",
        hostedFields: {
            number: {
                selector: "#card-number",
                placeholder: "Card Number"
            },
            cvv: {
                selector: "#cvv",
                placeholder: "CVV Number"
            },
            expirationDate: {
                selector: "#expiration-date",
                placeholder: "Date of Expiration"
            },
            styles: {
                // Style all elements
                "input": {
                    "font-size": "14pt",
                    "color": "#3A3A3A"
                },

                // Styling a specific field
                ".number": {
                    "font-family": "monospace"
                },

                // Styling element state
                ":focus": {
                    "color": "blue"
                },
                ".valid": {
                    "color": "green"
                },
                ".invalid": {
                    "color": "red"
                },

                // Media queries
                // Note that these apply to the iframe, not the root window.
                "@media screen and (max-width: 700px)": {
                    "input": {
                        "font-size": "14pt"
                    }
                }
            }
        }
    });
</script>

My View Code:

<ion-view view-title="My Debts">
<ion-content>
    <div data-ng-show="$state.includes('app.taxeslist')">
        List
    </div>
    <div data-ng-show="$state.includes('app.taxespay')">
            <form action="/checkout" id="payment-form" class="list">
                <label for="card-number" class="item item-input">Card Number</label>
                <div id="card-number"></div>

                <label for="cvv" class="item item-input">CVV Number</label>
                <div id="cvv"></div>

                <label for="expiration-date" class="item item-input">Date of Expiration</label>
                <div id="expiration-date"></div>

                <input type="submit" class="button button-block button-positive" value="Pay" />
            </form>
    </div>
  </ion-content>
</ion-view>

Pasted image470x738 36.3 KB

Posts: 1

Participants: 1

Read full topic