@amazon-pay/react NPM

Amazon pay React

Un-official implementation of Amazon pay in React.

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