How to Style Dwolla-Card.js Form

API Support Funding Sources
1

Hi!

I’m trying to better understand how I can style the dwolla-cards.js form. In particular my form fields are entirely un-styled like the sample in the docs, even though I applied the same style options object.

I expected something like this:

image
image1306×848 103 KB

But I get this:

image
image3480×1278 294 KB

My code is:
<//template>
</div class=“container-fluid” id=“app”>
</div class=“dwolla-form-container row”>
</div class=“action”>
</div style=“padding-bottom: 25px”>
</div id=“cardContainer”>
<//div>
<//div>
<//div>
<//div>
<//template>

<script>
const options = {
  stylesheets: ["styles.css"],
  styles: {
    // most CSS properties can be supplied to these objects
    default: {
      // placeholder text
      fontWeight: "normal",
    },
    success: {
      // valid input text
      color: "#1176BC",
      fontWeight: "bold",
    },
    error: {
      // invalid input text
      color: "#d9534f",
      // fontFamily: fontFamily,
      // fontSize: fontSize,
      fontWeight: "bold",
    },
    buttonText: "Submit",
  },
};

export default {
  methods: {
    getDwollaCardEntryToken(requestHeader) {
      let that = this;
      axios
        .get(
          "http://localhost:8080/api/profiles/get_dwolla_card_entry_token",
          requestHeader
        )
        .then(function(response) {
          let dwollaToken = response.data;
          that.launchDwollaDebitCardEntry(dwollaToken);
        })
    },
    launchDwollaDebitCardEntry(token) {
      console.log("Reached launchDwolla. Token: " + token);
      dwolla.configure("sandbox");
      dwolla.cards.start(
        "cardContainer",
        token,
        options
      )((err, res) => {
        document.getElementById("cardContainer").style.display = "none";
        document.getElementById("result").style.display = "block";
      });
    },
  },
};
</script>

<style>
.dwolla-form-container {
  height: 75vh;
  justify-content: center;
  align-items: start;
}
</style>

(note: I had to add “//” to my template fields so the forum’s web code would actually display that text and not think I’m trying to format the response. lol)

Can anyone provide some sample code on how to correctly style the dwolla-card.js form like the example?

2

Hi @Cody_Eddings! We’ve a blog post that goes over just that; styling the debit card form.

You can also find a CodePen within the blog where I’ve included an example code for adding custom styles to your form!

Hope that helps! Let me know if you have any questions!

1 Like
3

@shreya The blog post is super helpful, thanks.

I’m having trouble changing the text and cursor color of the form fields for everything besides the card nickname field though.

I’m trying this CSS to change the color of the Cardholder name field to black, but it seems to be green for some reason:
#field-wrapper-name {
color: #000000;
}

It looks like setting the color field works for the card nickname though. What do I need to do differently?

image
image2621×542 33.2 KB

4

Ah, the placeholder text for the card fields (except for the nickname) cannot be styled using an external stylesheet. Those styles must be passed in via the options object in the dwolla.cards.start() function like so -

 const options = {
    stylesheets: ["styles.css"],
    styles: {
      default: {
        fontFamily: "Verdana, Geneva, sans-serif"
      },
      success: {
        color: "#000000",
        fontFamily: "Verdana, Geneva, sans-serif"
      },
      error: {
        color: "#d9534f",
        fontFamily: "Verdana, Geneva, sans-serif"
      },
      buttonText: "Submit"
    }
  };


  dwolla.cards.start("cardsContainer", token, options)((err, res) => {
    ...  
  });
1 Like
5

Ah okay.

Is there a way to remove the nickname field entirely?

6

I’m afraid it’s a required field and cannot be omitted. You can the list of required fields in this table in our docs!