react-ecospend-payment-button

React Ecospend Button

This package adds an Ecospend button to your payment gateway.

Installation

Use the package manager of your choice to add it to your React project.

npm install react-ecospend-payment-button
yarn add react-ecospend-payment-button

Usage

import EcospendButton, { EcospendResponseCatcher } from 'react-ecospend-payment-button'

return (
  <EcospendButton
    authenticationUrl="https://myserver.com/authorizeEcospend"
    creditor_account={{
      type: 'SortCode',
      identification: '12345678910111',
      owner_name: 'John Doe'
    }}
    payment= {{
      amount: 3,
      currency: "GBP",
      description: "A cup of coffee",
      reference: "COFFEE_1234",
    }}
  />
  <EcospendResponseCatcher />
)

Explanation of the EcospendResponseCatcher

Ecospend works with Redirect URLs in their popups. To make sure that the payment flow is as smooth as possible, the EcospendResponseCatcher will catch any user coming back to the return URL and automatically closes the window. The main button will handle the processing. The EcospendResponseCatcher should be placed in the Route that the return URL will point to. Default: at the root.

Using this is optional. You can set your own redirectUrl prop to and choose not to include this component at all.

Configuration props

Key	Value	Comment
authenticationUrl	string	When set, a POST call will be made to this address to retrieve an access_token for Ecospend. Return format should be: {access_token: '1234'}. Using this method is highly recommended.
clientId	string	If you're not using an authenticationUrl, you have to set your Ecospend client id
clientSecret	string	If you're not using an authenticationUrl, you have to set your Ecospend client secret
buttonText	string	Change the text that will be displayed. Default: Pay with bank transfer
redirectUrl	string	If left empty, the redirect URL will be set to the domain root. The EcospendResponseCatcher can close it from here. Override here if necessary.
sandboxMode	bool	Whether the API calls and loaded banks should be in sandbox mode or not. Use for testing purposes only.

Ecospend props

The underlying fields correlate with the fields set in the ecospend documentation here

Key	Value	Comment
creditor_account	object	Fields type, identification and owner_name are required.
payment	object	Fields amount, currency and reference are required.

Methods

Key	Value	Comment
onSuccess	function	Callback function for when a transaction is complete. Returns with attribute paymentInfo, which holds all information regarding the payment.
onFailure	function	Callback function for when a transaction fails. Returns with an object in the format: {status: String, obj: paymentInfo}.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Disclaimer

This package was created by a lone programmer making this type of component for the first time. Any feedback, improvements or comments are very much welcome.

License

MIT