How to Style Dwolla-Card.js Form

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:

But I get this:

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?

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

@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?

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

Ah okay.

Is there a way to remove the nickname field entirely?

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!