Embedded Checkout

📘

This feature is in beta

Embedded checkouts are in beta. Please contact your Neon representative if you'd like to try them out.

By default, when you start a Neon checkout, the user is redirected to a Neon-hosted page. This helps ensure that you can remain PCI-compliant, since no sensitive data is entered on your site. However, if you prefer, you can also embed Neon in your app using Neon.js, the Neon frontend SDK. See here for a guide to creating embedded checkouts.

Including Neon.js

npm (Recommended)

The recommended approach to including Neon.js in your project is by using the module loader provided as an npm package. The package makes it easy to load the script tag in your application and includes TypeScript definitions. See the package documentation for details.

# npm
npm install --save @neonpay/js

# yarn
yarn add @neonpay/js

<script> Tag

Alternatively, you can include the script tag directly on your site.

<script src="https://js.poweredbyneon.com/v1/neon.js"></script>
<script>
  const neon = new window.Neon("{{client key}}");
  console.log(neon);
</script>

In general, we recommend loading neon.js asynchronously, by adding async or defer to the <script> tag. However, note that doing so will mean that the Neon global may not be immediately available (since it's loaded only after Neon.js fully loads), so your scripts will need to handle the possibility that it's not yet defined.

Redirect-based payment methods

Certain alternative payment methods (APMs) like PayPal require performing a full-screen redirect from your site to the APM's website. Neon.js handles the redirection logic on your behalf. However, if the user fails to complete the payment on the APM's site, either because they were declined or because they abandoned the flow, we need to redirect back to your site to seamlessly restart the payment flow.

When creating an embedded checkout on your server, you'll need to pass in an additional returnUrl field that specifies the URL of the page on your site that hosts the Neon checkout iframe. Then, when calling startEmbeddedCheckout, rather than passing in a new checkout ID, you'll instead want to pass in the checkout ID attached to the URL as checkout_id, along with fromRedirect: true. See here for an example implementation.