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>
