Amazon pay React

Un-official implementation of Amazon pay in React.

Table of Contents

• Usage
  • Install
  • Getting started
  • Components
  • Documentation
• Contributing
  • Development
  • Versioning
• TODO

Usage

Install

• yarn

  yarn add amazon-pay-react

• npm

  npm install amazon-pay-react

Getting started

Single page

For using all widgets on a single page importing AmazonPay should be enough:

import AmazonPay from 'amazon-pay-react';
 
<AmazonPay
        clientId='your-cliendId'
        sellerId='your-sellerId'
        agreementType={'BillingAgreement'}
        scope='profile payments:widget'
        btnType='PwA'
        btnColor='Gold'
        btnSize='medium'
        onConsentChange={(hasConsent) => ...handle}
        handleBillingAgreementId={(billingAgreementId) => ...handle}
        billingAgreementId={this.state.billingAgreementId}
        useAmazonAddressBook={true}
/>

Additional options to AmazonPay component:

Attribute	Description	Type
isSandbox	Sandbox or production env	boolean
region	Defines region, default 'us' (you can use REGION constant)	string
onAmazonLoginReady	Function callback	function
onAddressSelect	Function callback	function
onPaymentSelect	Function callback	function
onOrderReferenceCreate	Function callback	function
handleAddressBookError	Function callback	function
handleWalletOnPaymentSelect	Function callback, argument orderReference	function
handleWalletError	Function callback	function
handleConsentError	Function callback	function
handleButtonError:	Function callback	function

Multi page

When you want to have component per view, you must wrap each widget/component individually with the following wrapper in order to not try and render without having the script previously loaded.

import {AmazonPayButton, amazonBootstrapComponent} from 'amazon-pay-react';
 
const BootstrappedAmazonPayButton = amazonBootstrapComponent(AmazonPayButton);

Note that BootstrappedAmazonPayButton version will require additional attributes:

Attribute	Description	Type
isSandbox	Sandbox or production env	boolean
region	Defines region, default 'us' (you can use REGION constant)	string
amazonScriptLoaded	True if amazon library has loaded via onAmazonLoginReady	boolean
onAmazonLoginReady	Function callback	function

Check this example implementation for a quick start.

Components

• AmazonPayButton

  AmazonPayButton.propTypes = {
    sellerId:             PropTypes.string.isRequired,
    scope:                PropTypes.string.isRequired,
    type:                 PropTypes.string.isRequired,
    color:                PropTypes.string.isRequired,
    size:                 PropTypes.string.isRequired,
    useAmazonAddressBook: PropTypes.bool.isRequired,
    onAuthorization:      PropTypes.func.isRequired,    // When user authorizes, callback with response object
    onError:              PropTypes.func,               // callback err object
  };

  onAuthorization response object:

  {
    "status": "complete",
    "access_token": "your-token",
    "token_type": "bearer",
    "expires_in": 3226,
    "scope": "profile payments:widget"
  }

• AmazonAddressBook

  AmazonAddressBook.propTypes = {
    sellerId:               PropTypes.string.isRequired,
    agreementType:          PropTypes.string.isRequired,
    style:                  PropTypes.object,
    onReady:                PropTypes.func,               // Callback that provides orderReference
    onError:                PropTypes.func,               // Callback that provides err object
    onAddressSelect:        PropTypes.func,               // Callback that provides orderReference
    onOrderReferenceCreate: PropTypes.func,               // Callback that provides orderReference
  };

  Error object usage: console.log(err.getErrorCode() + ': ' + err.getErrorMessage()); Order reference usage: orderReference.getAmazonOrderReferenceId();

• Consent Widget

  ConsentWidget.propTypes = {
    amazonBillingAgreementId: PropTypes.string.isRequired,
    sellerId:                 PropTypes.string.isRequired,
    style:                    PropTypes.object,
    onReady:                  PropTypes.func,             // First load callback that provides hasConsent (true|false)
    onConsent:                PropTypes.func,             // On consent change, callback that provides hasConsent status
    onError:                  PropTypes.func,             // Callback that provides error object
  };

Documentation

• Amazon widget docs
• Amazon pay JavaScript SDK

Contributing

If you want to contribute to the library feel free to create an issue and/or a PR with a prefix of feature/your-feature-name or bugfix/your-bug-name

Development

• Running the example locally with watch

  yarn dev

• Testing

  yarn test

Note that you can swap between single page and React router version at examples/src/index.js

If you want to quick test library implementation locally you can use yarn link. Just don't forget to build it before that with yarn build.

Versioning

https://semver.org/

TODO

• Update documentation
• Add more tests (need personal AWS central access)
• Add more flexibility
• Specify goals