PAYONEER CHECKOUT WEB

Payoneer Checkout Web is a tool which 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 -S @payoneer/checkout-web

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

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

License

@payoneer/checkout-web is licensed under Payoneer

Contributing

Requirements

• Node.js version: >=20
• Package manager: npm

Environment Variables

For API code generation, you need to set up environment variables. Create a .env file in the project root with the following variables:

# Swagger API credentials
SWAGGER_USER=your_username # Necessary for API code generation
SWAGGER_PASS=your_password # Necessary for API code generation
TESTMERCHANT_PAYMENT_TOKEN=your_payment_token # Necessary for Playwright tests
TESTMERCHANT_CODE=your_code # Necessary for Playwright tests
BASE_URL=base_url # Necessary for Playwright tests

Refer to the example file for more details.

Running the app

  npm install

Start the app with

  npm run dev # It will run the application in development mode and open your browser on `localhost:8700`

API Code Generation

To generate TypeScript API types from the latest Swagger schema, run:

  npm run codegen

This will:

1. Download the latest schema from the authenticated Swagger endpoint
2. Generate TypeScript API types
3. Save the generated files to ./src/generated/

Note: Make sure you have set up the environment variables in your .env file before running the codegen script.

Testing the app

Tools used for writing tests are:

• Vitest - For running the tests and assertions
• Playwright - For running the tests and assertions

You can run unit tests with:

  npm run test

You can run playwright tests with:

  npm run playwright

Or with UI:

  npm run playwright:ui