Stripe Broken UI

[jamols09]

I'm trying to implement Stripe on VueJs project but it seems that the UI is broken. What are the steps I am missing here?

template

<b-form-group>
    <card class='stripe-card'
      :class='{ complete }'
      stripe='pk_test_51HIFAKLsPtHyA4EUs0h2cwi6WK1GvmtnY4bfbRGhZfeI00aT73G4h1'
      :options='stripeOptions'
      @change='complete = $event.complete'
/>
<button class='pay-with-stripe' @click='pay' :disabled='!complete' variant="primary">Submit</button>
</b-form-group>

Styles

<style lang="stylus" scoped>
.stripe-card {
  width: 300px;
  border: 1px solid grey;
}
.stripe-card.complete {
  border-color: green;
}

.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
</style>

For the script I just copied it same on the displayed example.

[jamols09]

It seems that there is no default ui. So instead to fix my issue. I have used the bootstrap classes.
'form-control' for the form & 'btn btn-primary' for button

<b-form-group>
<card class='form-control'
    :class='{ complete }'
    stripe='pk_test_51HIFAKLsPtHyA4EUs0hY4bfbRGhZfeI00aT73G4h1'
    :options='stripeOptions'
    @change='complete = $event.complete'
/>
</b-form-group>
<button class='btn btn-primary' @click='pay' :disabled='!complete' variant="primary">Submit</button>