Norwegian Puffin Movies

    amazon-pay-react

    0.9.0 • Public • Published

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

    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

    Install

    npm i amazon-pay-react

    DownloadsWeekly Downloads

    1,223

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    39 kB

    Total Files

    16

    Last publish

    Collaborators

    • doppelganger113