Enable adding custom elements to paystack button.

toksdotdev commented 6 years ago

A user should be allowed to include custom html elements into the button, e.g. a glyphicon etc.

A solution: is to use the <slot> ... </slot> available in VueJS as follows:

<button v-if="!embed" v-text="text" class="payButton" @click="payWithPaystack">
      <slot></slot>
</button>

Although this would mean two things:

To support backward compatibilty, props text can still remain, but users will have to pass in an empty string to it (Although, notice: if a user doesn't, it will use the default string you set which is Make Payment. This can then conflict somehow with the html a user might include inside the button)
We can completely remove out the text props, and allow users to add any text to the button by including whatever html they want into the paystack button. e.g.

<paystack-button> // add props except from `:text`
    <i class="clock icon"></i> // add some icons
    Make Payment
</paystack-button>

This can work using the solution I proferred above.

Based on what you decide, I could submit a PR implementing this small change.

iamraphson commented 6 years ago

@TNkemdilim Good point. you PR is always welcome.

iamraphson commented 6 years ago

iamraphson / vue-paystack