button style not working as expected

[ghost]

I am trying to use specific button styles as described in the doc ... but the label, locale, size , color and shape are not taken in account script

  `
  <script>
import TopNavTwo from '@/components/TopNavTwo'
import PageHeader from '@/components/PageHeader'
import PayPal from 'vue-paypal-checkout'
export default {
  mounted () {
    document.body.scrollTop = document.documentElement.scrollTop = 0
  },
  data () {
    return {
      credentials: {
        sandbox: '<sandbox client id>',
        production: '<production client id>'
      },
      aStyle: { label: 'pay', locale: 'fr_FR', size: 'small', shape: 'rect', color: 'blue' },
      bStyle: { label: 'pay', locale: 'fr_FR', size: 'small', shape: 'rect', color: 'gold' }
    }
  },
  components: { PageHeader, TopNavTwo, PayPal }
}
</script>

` html

  `<PayPal :buttonStyle="aStyle" :client="credentials" amount="10.00" currency="EUR" env="sandbox" invoice-number="john@whitehouse.com"></PayPal>
    <PayPal :buttonStyle="bStyle" :client="credentials" amount="10.00" currency="EUR" env="sandbox" invoice-number="john@whitehouse.com"></PayPal>`

[cocoastorm]

Hey @erwin16,

Thanks for the catch! I seemed to mess up and not include the buttonStyle for a recent release. It should be fixed now.

I'll publish a new version soon :+1:

EDIT: Published v2.3.2

[ghost]

thanks a lot... working better ! What about language ? setting locale: 'fr_FR' does not chnage the button label as it should ?

[koddr]

Hello.

Why :buttonStyle is not working at 2.3.5 version? I try to do this:

// ./js/script.js

// Include libraries
import Vue from 'vue'
import PayPal from 'vue-paypal-checkout'

// Vue
const app = new Vue({
  el: '#app',
  components: {
    PayPal
  },
  data: {
    paypal_api_keys: {
      sandbox: '<sandbox client id>',
      production: '<production client id>'
    },
    paypal_button_style: {
      label: 'pay',
      size: 'medium',
      shape: 'pill',
      color: 'blue'
    },
    // ... other data
  },
  // ... other methods and else
})

On template:

<!-- ./index.html -->

<div id="app">
  <pay-pal
    amount="10.0"
    currency="USD"
    :client="paypal_api_keys"
    :buttonStyle="paypal_button_style"
    env="sandbox">
  </pay-pal>
</div>

<!-- I'm using Webpack 3.11 for minify -->
<script src="./dist/js/script.min.js"></script>

...and alway get gold button with small size! How to solve this? Please.

[cocoastorm]

Hey, @koddr

How are you importing the button component? Additionally, are you using webpack with vue-loader?

I can't seem to reproduce this. If you're still experiencing this after checking the package version, and etc, I'll take a closer look later if you want!

JSFiddle with your styles.

Cheers!

EDIT: Can you try using :button-style instead of :buttonStyle https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

<!-- ./index.html -->

<div id="app">
  <pay-pal
    amount="10.0"
    currency="USD"
    :client="paypal_api_keys"
    :button-style="paypal_button_style"
    env="sandbox">
  </pay-pal>
</div>

<!-- I'm using Webpack 3.11 for minify -->
<script src="./dist/js/script.min.js"></script>

[koddr]

Yes, kebab-case save lives 👍