The Neptune Payment Element is a custom element that allows you to accept payments in your web application. It is a wrapper around the Neptune Payment API.
Learn how to embed the Neptune Payment Element in your web application and customize the payment flow.
If you don't have a Neptune account, sign up for one.
If you don't have a Merchant, create one in your Neptune account.
Add Neptune Payment Element to your web application by including the Neptune Payment Element script in your HTML.
<script src="https://neptunepayments.com/payment-element.js"></script>
or by using a package manager:
npm install neptune-payment-element
yarn add neptune-payment-element
Add Neptune Payment Element to your react application by importing the Neptune Payment Element component.
import NeptunePaymentElement from 'neptune-payment-element';
Start using Neptune Payment Element by adding the NeptunePaymentElement component to your react application.
const merchantPubKey = <<merchantPubKey>>
const [tokenizer, setTokenizer] = useState<Tokenizer>();
<NeptunePaymentElement merchantPubKey={merchantPubKey} setTokenizer={setTokenizer}/>
Customize Neptune Payment 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. |
isFluidPayDevMode |
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. |