@neptune_payments/neptune-card-elements
v1.0.0
Published
The Neptune Card Element is a custom element that allows you to accept payments in your web application. It is a wrapper around the Neptune Payment API.
Downloads
9
Readme
Neptune Card Element
The Neptune Card Element is a custom element that allows you to accept payments in your web application. It is a wrapper around the Neptune Payment API.
Custom payment flow
Learn how to embed the Neptune Card Element in your web application and customize the payment flow.
Step 1: Create a Neptune account
If you don't have a Neptune account, sign up for one.
Step 2: Create a Merchant
If you don't have a Merchant, create one in your Neptune account.
Step 3: Add Neptune Card Element to your web application
Add Neptune Card Element to your web application by using a package manager.
npm install neptune-payment-element
yarn add neptune-payment-element
Step 4: Add Neptune Card Element to your react application
Add Neptune Card Element to your react application by importing the Neptune Card Element component.
import NeptunePaymentElement from 'neptune-payment-element';
Step 7: Start using Neptune Card Element
Start using Neptune Card Element by adding the NeptunePaymentElement component to your react application.
const merchantPubKey = <<merchantPubKey>>
const [tokenizer, setTokenizer] = useState<Tokenizer>();
<NeptunePaymentElement merchantPubKey={merchantPubKey} setTokenizer={setTokenizer}/>
Step 8: Customize Neptune Card Element
Customize Neptune Card Element by passing the following props to the NeptunePaymentElement component.
| Prop | Type | Description |
| --- | --- | --- |
| merchantPubKey
| string
| The public api key of the Merchant. |
| setTokenizer
| function
| The setter for the tokenizer state. |
| isDevMode
| boolean
| Defines whether to use sandbox or not. |
| onSuccess
| function
| The callback function that is called when the payment is successful. |
| onError
| function
| The callback function that is called when the payment is unsuccessful. |
| settings
| object
| Addition setup using fluidPay https://sandbox.fluidpay.com/docs/tokenizer/#paay-integration |