@amazon-pay/react

Amazon Pay React wrapper

Usage no npm install needed!

<script type="module">
  import amazonPayReact from 'https://cdn.skypack.dev/@amazon-pay/react';
</script>

README

Amazon pay React

Un-official implementation of Amazon pay in React.

CircleCI

npm version

GitHub issues

GitHub license

Table of Contents

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

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