2015-05-04 18:36:57 +03:00
<!DOCTYPE html>
< html >
2015-08-11 02:58:21 +03:00
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< meta name = "format-detection" content = "telephone=no" >
< meta name = "viewport" content = "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
< link rel = "stylesheet" href = "css/index.css" >
2015-08-11 20:53:46 +03:00
< title > Mozilla Payments< / title >
2015-08-11 02:58:21 +03:00
< / head >
< body >
2015-08-13 21:27:35 +03:00
< nav class = "navbar navbar-default" role = "navigation" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#nav" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "/" > Mozilla Payments< / a >
< / div >
< div class = "navbar-collapse collapse" id = "nav" >
< ul class = "nav navbar-nav" >
< li role = "presentation" > < a href = "#features" > Features< / a > < / li >
< li role = "presentation" > < a href = "#drop-in" > Client Library< / a > < / li >
< li role = "presentation" > < a href = "#full-api" > Full API< / a > < / li >
< li role = "presentation" > < a href = "#management" > Management< / a > < / li >
< li role = "presentation" > < a href = "#contact" > Contact Us< / a > < / li >
< / ul >
< / div >
< / div >
< / nav >
2015-08-11 02:58:21 +03:00
< div class = "callout" >
2015-08-13 21:27:35 +03:00
< div class = "container" >
< p > < a href = "https://payments.readthedocs.org" > Mozilla Payments< / a > is a unified payments interface to Mozilla sites and properties. We provide a wrapper around < a href = "https://www.braintreepayments.com/" > Braintree< / a > . Consider us a replacement for
using Stripe, Braintree and others.< / p >
< p > Are you looking to accept payments on a Mozilla Foundation or Mozilla Corporation site? This is for you.< / p >
2015-08-20 21:50:53 +03:00
< button type = "button" class = "btn btn-lg btn-success donation" > Donate $5 now< / button > or
2015-08-21 19:17:12 +03:00
< button type = "button" class = "btn btn-lg btn-success brick" > Subscribe now< / button > and < a href = "#test" > more →< / a >
2015-08-13 21:27:35 +03:00
< / div >
2015-08-11 02:58:21 +03:00
< / div >
< div class = "container" >
< section >
2015-08-11 20:53:46 +03:00
< h2 id = "features" > Features< / h2 >
2015-08-11 02:58:21 +03:00
< p > < a href = "#top" > ↑ Back to top< / a > < / p >
< ul >
2015-08-12 02:12:53 +03:00
< li > Secure credit card processing< / li >
2015-08-20 21:50:53 +03:00
< li > Optional authentication through Firefox Accounts< / li >
< li > Unauthenticated one off purchases *< / li >
< li > Subscriptions for authenticated users (including handling of failures and retries)< / li >
2015-08-11 02:58:21 +03:00
< li > Management interface< / li >
2015-08-11 20:53:46 +03:00
< li > Emails and receipts< / li >
< li > Localisations< / li >
2015-08-20 21:50:53 +03:00
< li > One off purchases of fixed or variable amounts< / li >
2015-08-11 02:58:21 +03:00
< / ul >
< p > Todo list:< / p >
< ul >
< li > Paypal< / li >
< / ul >
2015-08-20 21:50:53 +03:00
< p > * caveats apply< / p >
2015-08-11 02:58:21 +03:00
< / section >
< section >
2015-08-11 20:53:46 +03:00
< h2 id = "drop-in" > Client Library< / h2 >
2015-08-11 02:58:21 +03:00
< p > < a href = "#top" > ↑ Back to top< / a > < / p >
< p > The drop-in UI presents as an iframe popup, following the style of Firefox Accounts. To integrate you need to do a couple of simple steps.< / p >
< p > Using "Mozilla Concrete" we set up two demo products:< / p >
< h3 > 1. Configuration< / h3 >
< p > < a href = "http://payments.readthedocs.org/en/latest/design/api/configuration.html" > Configuration< / a > is done through a simple Python file:< / p >
< pre >
2015-08-20 21:50:53 +03:00
'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',
}]
}
2015-08-11 02:58:21 +03:00
< / pre >
< p > < a href = "http://payments.readthedocs.org/en/latest/design/api/configuration.html" > read more →< / a > < / p >
< h3 > 2. Button code< / h3 >
2015-08-20 21:50:53 +03:00
< p > Add in the < a href = "http://payments.readthedocs.org/en/latest/design/api/client.html" > button code< / a > to trigger the payments flow. In the above example, it listens to click events on a button.< / p >
2015-08-21 19:17:12 +03:00
< p > To subscribe to the "mortar" product, which requires authentication:< / p >
2015-08-11 02:58:21 +03:00
< pre >
2015-08-20 21:50:53 +03:00
var client = new window.PaymentsClient({
accessToken: firefox_accounts_access_token,
product: {
id: 'mozilla-concrete-mortar',
image: 'http://bit.log/mortar-png'
},
});
< / pre >
2015-08-21 19:17:12 +03:00
< p > To donate to the "foundation", without authentication:< / p >
2015-08-20 21:50:53 +03:00
< pre >
var client = new window.PaymentsClient({
product: {
id: 'mozilla-foundation-donation',
amount: '5.00'
},
});
2015-08-11 02:58:21 +03:00
< / pre >
< p > < a href = "http://payments.readthedocs.org/en/latest/design/api/client.html" > read more →< / a > < / p >
2015-08-21 19:17:12 +03:00
< h3 id = "test" > 3. Test it!< / h3 >
< p > < a href = "#top" > ↑ Back to top< / a > < / p >
2015-08-11 02:58:21 +03:00
< p > The following connect to the sandbox where < a href = "https://developers.braintreepayments.com/ios+ruby/reference/general/testing#credit-card-numbers" > test credit cards< / a > are accepted:< / p >
2015-08-21 19:17:12 +03:00
< h4 > Subscription examples:< / h4 >
2015-08-13 21:27:35 +03:00
< p >
< button type = "button" class = "btn btn-lg btn-primary brick" > Brick for $10 a month< / button >
< / p >
< p >
< button type = "button" class = "btn btn-lg btn-primary mortar" > Mortar for $5 a month< / button >
< / p >
2015-08-21 19:17:12 +03:00
< h4 > Donation example:< / h4 >
< p > With a variable amount:< / p >
< form class = "donation-variable" >
< div class = "form-group" >
< label for = "donation-amount" > Amount< / label >
< input type = "text" placeholder = "5" class = "form-control" id = "donation-amount" / >
< / div >
< div class = "form-group" >
2015-09-01 01:47:18 +03:00
< button data-product-id = "mozilla-foundation-donation" type = "submit" class = "donation-variable btn btn-success form-control" > Donate once< / button >
< button data-product-id = "mozilla-foundation-recurring-donation" class = "donation-variable btn btn-success form-control" > Donate monthly< / button >
2015-08-21 19:17:12 +03:00
< / div >
< / form >
2015-08-11 02:58:21 +03:00
< / section >
< section >
2015-08-11 20:53:46 +03:00
< h2 id = "full-api" > Full API< / h2 >
2015-08-11 02:58:21 +03:00
< p > < a href = "#top" > ↑ Back to top< / a > < / p >
< p > Don't want to use the drop-in API, but control the full flow? That's fine there is a full API to use.< / p >
< p > TODO< / p >
< / section >
< section >
2015-08-11 20:53:46 +03:00
< h2 id = "management" > Management< / h2 >
2015-08-11 02:58:21 +03:00
< p > < a href = "#top" > ↑ Back to top< / a > < / p >
< p > If users log in to complete a payment, then they can access the management interface. This allows them to:< / p >
< ul >
< li > add, edit and remove new payment methods< / li >
< li > see a list of transactions< / li >
< li > see a list of active subscriptions< / li >
< li > cancel active subscriptions< / li >
< / ul >
2015-08-13 21:27:35 +03:00
< p >
< button type = "button" class = "btn btn-lg btn-primary management" > Management interface< / button >
< / p >
2015-08-11 20:53:46 +03:00
< / section >
< section >
2015-08-13 21:27:35 +03:00
< h2 id = "contact" > Contact Us< / h2 >
< p > < a href = "#top" > ↑ Back to top< / a > < / p >
< p > Find us: #payments on IRC, at < a href = "https://mail.mozilla.org/listinfo/dev-payments" > dev-payments< / a > or on < a href = "https://github.com/mozilla/payments" > github< / a > . You could also contact Andy McKay or Lindsay Saunders.< / p >
2015-08-11 02:58:21 +03:00
< / section >
2015-05-27 16:37:17 +03:00
< script src = "lib/js/jquery.min.js" > < / script >
2015-08-12 02:12:53 +03:00
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > < / script >
2015-05-27 16:37:17 +03:00
< script src = "lib/js/fxa-relier-client.min.js" > < / script >
< script src = "lib/js/payments-client.js" > < / script >
2015-05-09 01:22:48 +03:00
< script src = "js/index.js" > < / script >
2015-08-11 02:58:21 +03:00
< / body >
2015-08-13 21:27:35 +03:00
2015-05-04 18:36:57 +03:00
< / html >
