MaterializeCSS Payments for Braintree

Thank you

This package was created and is maintained by The Expert Box as a thank you to the open source community.

Installation - server side

Create settings-developement.json with your Braintree sandbox credentials and settings-production.json with your production credentials. Remember that these credentials should be protected, and thus not uploaded to your repo.

1{
2  "braintree": {
3    "environment": "Braintree.Environment.Sandbox",
4    "merchantId": "your merchant id",
5    "publicKey": "your public key",
6    "privateKey": "your private key"
7  }
8}

Installation - client side

This package makes use of lazy loading and supports dynamic imports, thus before using the buyButton template, it must be imported.

Static import

1import 'meteor/mozfet:materialize-payments'

Dynamic import

1FlowRouter.route('/', {
2  name: 'App.home',
3  action: async function(params, queryParams) {
4    await import('/imports/ui/pages/home/home')
5    BlazeLayout.render('App_body', { main: 'App_home' })
6  },
7})

Usage - client side

Create DynaView inside top level container html; this is used to anchor dialogs to. Create buyButtons anywhere in template code.

1<template name="App_home">
2  <div class="container">
3    <div class="row">
4      <div class="col s12">
5        <h1>Materialize Payment Demo</h1>
6        {{> loginButtons}}
7      </div>
8    </div>
9    <div class="row">
10      <div class="col s12">
11        {{> buyButton amount=3 currency='EUR'}}
12        {{> buyButton transactionBasic}}
13        {{> buyButton transactionIntermediate}}
14        {{> buyButton transactionAdvanced}}
15      </div>
16    </div>
17    {{> DynaView}}
18  </div>
19</template>

Define template helpers with transaction data to customise modal text and payment data.

1import { Template } from 'meteor/templating'
2import 'meteor/mozfet:materialize-payments'
3import './home.html'
4
5Template.App_home.helpers({
6  transactionBasic() {
7    const instance = Template.instance()
8    return {
9      amount: 14,
10      currency: 'EUR'
11    }
12  },
13  transactionIntermediate() {
14    const instance = Template.instance()
15    return {
16      amount: 7,
17      currency: 'EUR',
18      productCode: 'SUBSCRIPTION',
19      texts: {
20        'product-name': 'Professional Account',
21        'buy-button': 'Buy 1 year Subscription'
22      }
23    }
24  },
25  transactionAdvanced() {
26    const instance = Template.instance()
27    return {
28      amount: 5,
29      currency: 'EUR',
30      productCode: 'PREMIUM_ACCOUNT',
31      buyButtonClass: 'btn-large orange waves-dark black-text',
32      title: 'Pay for your stuff!',
33      texts: {
34        'product-name': 'Premium Account',
35        'buy-button': 'Buy Premium Account',
36        'modal-title': 'Time to pay the bill',
37        'modal-intro': 'You are buying a one year premium account subscription.',
38        'modal-submit-button': 'Pay the man',
39        'modal-cancel-button': 'Run away',
40        'toast-payment-cancelled': 'Cancelleroo',
41        'toast-payment-success': 'Okidoki',
42        'toast-payment-error-create': 'Crap',
43        'toast-payment-error-method': 'Other Crap',
44        'toast-payment-processing': 'Please wait',
45        'toast-payment-approved': 'You won!',
46        'toast-payment-cancelled': 'Chicken!',
47      }
48    }
49  }
50})

Usage - server side