@payoneer/op-payment-widget-v3
v3.53.0
Published
This project contains source code to build Hosted Payment Page including demonstration HTML templates.
Downloads
180
Readme
OP PAYMENT WIDGET V3
Our Web SDK provides a way to integrate the Payoneer platform into your e-commerce webstore. You can use it with the embedded integration ( for more information, see Integrate embedded payment page). The SDK has the following functionalities:
- Rendering a payment method list in one of the supported payment flows.
- Interacting with the end customer and handling all required communication with Payoneer Checkout until the requested operation or transaction is complete.
This way you don't need to worry about the front-end integration and dealing with the complexity of handling support for different payment methods, dealing with sensitive payment information, handling payment processing responses, and more.
Documentation and examples can be found in the Payoneer web SDK docs
Installation
npm install @payoneer/op-payment-widget-v3Usage
Import styles from PPv3 library
import "@payoneer/op-payment-widget-v3/build/op-payment-widget-v3.css"Import checkoutList from the PPv3 library
import checkoutList from "@payoneer/op-payment-widget-v3";
// Or
const checkoutList = require("@payoneer/op-payment-widget-v3");
To load via the script tag
<head>
<script src="https://checkout.payoneer.com/paymentpage/v3/op-payment-widget-v3.min.js"></script>
<link rel="stylesheet" href="https://checkout.payoneer.com/paymentpage/v3/op-payment-widget-v3.min.css" />
</head>In the checkout page, add HTML tags with the selector IDs in places where you want to display payment methods and the payment button.
<div id="paymentNetworksId" className="payment-networks-container"></div>
<div id="submitBtnContainerId" className="submit-buttons-container">
<button id="submitBtnId" type="button" className="submit-button"></button>
</div>Call the checkoutList function to display the payment methods.
checkoutList("paymentNetworksId", {
payButton: "submitBtnId",
payButtonContainer: "submitBtnContainerId"
});Create an endpoint on your server that your frontend application can call to initiate a payment session (for example POST /initiate-payment) when the customer lands on the checkout page. This could include details about the user, their cart contents, or others depending on how your shop system works. Using the data provided in the frontend and any other backend data, create an authenticated backend call to the Payoneer POST /lists endpoint to initialize the payment session.
Methods
The library exposes following method
checkoutList
checkoutList function is used to display the payment methods. As the method parameters, it requires a container id and
an object of some inputs which are used to load the widget.
During the initialization process, library reads the inputs and generates a widget of available payment methods.
Method Parameters
| NAME | TYPE | REQUIRED | DESCRIPTION |
| :------------------ | :----------- | :----------- | :--------------------------------------------------------------------------|
| elementId | String | true | DOM element ID of the container where the widget should be loaded |
| inputConfig | Object | true | keys - listUrl, payButton ID, payButtonContainer ID, listUrl, listId, onBeforeCharge, onBeforeServerError, More...|
Basic example (usage)
checkoutList("paymentNetworksId", {
payButton: "submitBtnId",
payButtonContainer: "submitBtnContainerId"
});destroyWidget
destroyWidget function is used to delete
- the DOM elements that are created in the widget
- any iframes already created by that instance of the payment widget
- event listeners
Basic example (usage)
destroyWidget()If you want to rerender the widget after it has been destroyed, you can call the checkoutList function again using the same or different listId
License
op-payment-widget-v3 is licensed under Payoneer