Neptune Payment Element

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.

Custom payment flow

Learn how to embed the Neptune Payment 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 Payment Element to your web application

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

Step 4: Add Neptune Payment Element to your react application

Add Neptune Payment Element to your react application by importing the Neptune Payment Element component.

import NeptunePaymentElement from 'neptune-payment-element';

Step 7: Start using 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}/>

Step 8: Customize Neptune Payment Element

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