PAYONEER CHECKOUT WEB

Payoneer Checkout Web is a tool that makes online payments easier and better for businesses. Our Checkout Web is here to help you create a smooth and fast payment process on your website. The SDK is designed to help you get more sales by making the integration simpler and providing payment flows that are more trustworthy and professional-looking for your customers.

What it offers

Enhance your website's shopping experience effortlessly with our checkout library. Just plug and play to integrate it into your site for a secure, user-friendly and customizable checkout process. It is designed to be light, to ensure the performance of your website is maintained. You can add it to your site using npm or a UMD script, making it flexible for different types of websites. You can use it with the embedded integration (for more information, see embedded integration payment page).

Key features

• Easy to Use Payment Components: You can add payment options exactly where you need them on your site. Our SDK automatically takes care of technical details, making integration easy.
• Manages Payment Process: Our SDK looks after the entire payment process, from start to finish, ensuring everything works smoothly.
• Customizable: You can change how the SDK looks and works to match your website's design and your specific needs. This includes custom functions, styles, and more.

Installation

npm install @payoneer/checkout-web

The npm package ships ES modules, CommonJS, and TypeScript type declarations. A UMD build for use via a <script> tag is delivered through Payoneer's CDN (it is not part of the npm package).

Basic Example

import { CheckoutWeb } from "@payoneer/checkout-web";

const configs = {
    env: "live", // Use "test" | "live"
    longId: "{LONG ID}" // an identifier for a generated payment session
    // Add other optional configuration options as needed
};

const checkout = await CheckoutWeb(configs);

const container = document.getElementById("cards-container"); // ensure you have an element with id 'cards-container' on the page

const cards = checkout.dropIn("cards").mount(container); // container is a reference to an HTML element

TypeScript

The package ships type declarations. Import the public types directly from the package root:

import { CheckoutWeb } from "@payoneer/checkout-web";
import type {
    CheckoutConfigurationProps,        // config accepted by CheckoutWeb(...)
    Checkout,                          // the live checkout instance (callbacks receive this)
    DropIn, ExpressDropIn,             // drop-in handles returned by checkout.dropIn(...)
    ListDataProps, ListDataErrorProps, // the /list payload and its error shape
    ChargeError, SubmitErrorSeverity,  // failure callback payloads
    TAvailableDropInComponent,         // what getComponentInfo() / availableDropInComponents() return
} from "@payoneer/checkout-web";

Configuration callbacks (OnBeforeErrorCallback, OnValidationInfoCallback, OnSubmitErrorCallback, OnReadyCallback, …) receive the live Checkout instance. It arrives as their first argument in the positional callbacks, or as the checkout property of the single argument in the object-form submit callbacks (OnSubmitSuccessCallback, OnSubmitErrorCallback). Derive your handler signatures from these types instead of re-declaring them.

Prefer the stable aliases (ListDataProps, ListDataPaymentProps, ListDataInteractionProps, TParam, …) over the raw generated names (ListResult, Payment, Interaction, Parameter); the generated names are an internal detail and can change when the API schema is regenerated.

Using the CDN (<script>) build

When you load Checkout Web from the CDN, the factory is exposed on window.Payoneer.CheckoutWeb. Opt in to the ambient typing so window.Payoneer is typed (it is not applied automatically, to avoid forcing a global on npm-import / SSR consumers). This is a types-only subpath. Reference it from a project .d.ts (or tsconfig types), not with a runtime import:

/// <reference types="@payoneer/checkout-web/global" />

const checkout = await window.Payoneer!.CheckoutWeb({ env: "live", longId: "{LONG ID}" });

Documentation

Documentation and examples can be found at New Web SDK Integrate Embedded Payment Components

Some of the main sections in the documentation are

• Getting Started
• Basic Integration
• More Use cases - Advanced customization and handling of specific scenarios in the payment process.
  • hidePaymentButton
  • onBeforeCharge
  • onBeforeError
  • onPaymentSuccess
  • onPaymentFailure
  • onBeforeProviderRedirect
• Integration Patterns - Different ways to integrate the SDK into your website.
• Interaction Codes & Callback Mapping - Reference for interaction codes and their corresponding callbacks.
• Troubleshooting - Common issues and how to resolve them.

License

@payoneer/checkout-web is licensed under Payoneer.