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