ember-braintree-components

Braintree's Drop-In Payment UI and Braintree Auth button as Ember components.

Usage no npm install needed!

<script type="module">
  import emberBraintreeComponents from 'https://cdn.skypack.dev/ember-braintree-components';
</script>

README

ember-braintree-components

This addon includes Braintree's Drop-In Payment UI and Auth Connect button as Ember components.

Installation

# From within your ember-cli project
ember install ember-braintree-components

Usage

Drop-In UI

// template.hbs
<form>
  {{!-- Must be inside of a <form> --}}
  {{braintree-dropin
    token=braintreeClientToken
    onSubmit=(action 'submit')
  }}
  <button type="submit">Submit</button>
</form>

// controller/component.js
actions: {
  submit(response) {
    // Do something with the nonce
    return this.get('ajax').post('[YOUR URL]', {
      data: {
        paymentNonce: response.nonce
      }
    });
  }
}

drop-in ui

  • token(required) - the token generated by your server
  • onReady - action fired when the UI is ready
  • onSubmit - action fired when the form is submitted (called with payment nonce)
  • onError - action fired when an error occurred
  • options - a hash containing additional options

See the documentation for more information on these options.

Braintree Auth Connect button

// template.hbs
{{braintree-connect-button
  connectUrl=connectUrl
  onError=(action 'onError')
}}
Connect with Braintree

Options

  • connectUrl(required) - the url generated by your server
  • onError - action fired when an error occurred
  • options - a hash containing additional options

See the documentation for more information on these options.