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 @@

↑ Back to top

Todo list:

+

* caveats apply

@@ -71,20 +73,47 @@

1. Configuration

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',
+            }]
+        }
       

read more →

2. Button code

-

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'
+            },
+        });
       

read more →

3. Test it!

The following connect to the sandbox where test credit cards are accepted:

+

Some subscription examples:

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) {