diff --git a/public/index.html b/public/index.html index 9e6dcb3..9ff1572 100644 --- a/public/index.html +++ b/public/index.html @@ -39,7 +39,8 @@
Mozilla Payments is a unified payments interface to Mozilla sites and properties. We provide a wrapper around Braintree. Consider us a replacement for using Stripe, Braintree and others.
Are you looking to accept payments on a Mozilla Foundation or Mozilla Corporation site? This is for you.
- + or + @@ -49,18 +50,19 @@Todo list:
* caveats apply
Configuration is done through a simple Python file:
- 'mozilla-concrete': { 'email': 'support@concrete.mozilla.org', 'name': _('Mozilla Concrete'), 'url': 'http://pay.dev.mozaws.net/', 'terms': 'http://pay.dev.mozaws.net/terms/', 'products': [{ 'id': 'mortar', 'description': _('Mortar'), 'amount': '5.00', - 'img': 'http://bit.ly/mortar-png', }] } + 'mozilla-concrete': { + 'email': 'support@concrete.mozilla.org', + 'name': _('Mozilla Concrete'), + 'url': 'http://pay.dev.mozaws.net/', + 'terms': 'http://pay.dev.mozaws.net/terms/', + 'products': [{ + 'id': 'mortar', + 'description': _('Mortar'), + 'amount': '5.00', + 'img': 'http://bit.ly/mortar-png', + }] + }
Add in the button code to trigger the payments flow. In the above example, it listens to click events on a button and trigger the following:
+Add in the button code to trigger the payments flow. In the above example, it listens to click events on a button.
+To subscribe to the 'mortar' product, which requires authentication:
- var client = new window.PaymentsClient({ accessToken: firefox_accounts_access_token, product: { id: 'mozilla-concrete-mortar', image: 'http://bit.log/mortar-png' }, }); + var client = new window.PaymentsClient({ + accessToken: firefox_accounts_access_token, + product: { + id: 'mozilla-concrete-mortar', + image: 'http://bit.log/mortar-png' + }, + }); ++
To donate to the 'foundation', without authentication::
++ var client = new window.PaymentsClient({ + product: { + id: 'mozilla-foundation-donation', + amount: '5.00' + }, + });
The following connect to the sandbox where test credit cards are accepted:
+diff --git a/public/js/index.js b/public/js/index.js index c43564a..0dbd13a 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -53,7 +53,7 @@ oauthHost: 'https://oauth-stable.dev.lcip.org/v1', }); - function purchase(product) { + function purchaseWithAuth(product) { console.log('signing in for purchase'); fxaSignIn() @@ -70,6 +70,17 @@ }); } + function purchaseWithoutAuth(product) { + console.log('starting purchase without auth'); + + var client = new window.PaymentsClient({ + httpsOnly: false, // This is an example don't use this in prod. + product: product, + paymentHost: config.paymentUrl, + }); + client.show(); + } + function fxaSignIn() { return new Promise(function(resolve, reject) { fxaRelierClient.auth.signIn({ @@ -115,19 +126,27 @@ // buy buttons on this one page, we'll use a function to avoid // copying and pasting the code. $('button.brick').on('click', function(event) { - purchase({ + purchaseWithAuth({ 'id': 'mozilla-concrete-brick', 'image': 'http://bit.ly/default-png' }); }); $('button.mortar').on('click', function(event) { - purchase({ + purchaseWithAuth({ 'id': 'mozilla-concrete-mortar', 'image': 'http://bit.ly/mortar-png' }); }); + $('button.donation').on('click', function(event) { + purchaseWithoutAuth({ + 'id': 'mozilla-foundation-donation', + 'image': 'http://bit.ly/default-png', + 'amount': 5, + }); + }); + $('button.management').on('click', function(event) { fxaSignIn() .then(function(result) {