Payment widget

sequenceDiagram
  participant Customer
  participant Merchant
  participant PSP

    rect rgb(191, 223, 255)
      note right of Merchant: Embedded or modal payment widget
  end
   Customer ->> Merchant: 1. Go to checkout page
   Merchant ->> Merchant : 2. Place widget on the page
   Customer ->> Merchant:3.Entercard data in widget
   alt In case of modal or embedded display mode 
   Merchant ->> PSP:4. Customer submit payment
else In case of secure mode (only card input fields)
   Merchant ->> Merchant:4. Catch the event form iFrame with the card encrypted object
   Merchant ->> PSP:5. Send /payments or /payouts request with encrypted card data
   end

How to place widget on the page

A widget has 2 display modes:

• Standard view mode (classic payment form in modal or embedded mode)
• Secure view mode (only fields for card data input, e.g. for payouts, or merchants who have PCI DSS)

First of all you should include the widget JavaScript file in the head section of your page:

<script charset="utf-8" src="{PAYFORM_URL}/widget/payform.js" id="psp-widget-loader"></script>

For simple static pages

Just paste the following code into the page:

<script charset="utf-8">
PSP.Widget.init({
  "display": {
   "mode": "modal"
   },
  "payUrl": {payUrl_from_/orders_response} }
);
</script>

For more complex cases

Add a div element to the page where you want to place the widget:AS

<div id="mywidget"></div>

Initialize the widget:

<script script charset="utf-8">
PSP.Widget.init({
  "display": {
  "mode": "modal",
   "params": {
    "container": "mywidget",
    "pcidss": "full",
   },
   "theme": {
  "name": "dark",
    "colors": {
    "bg": "#4a5b5b",
   "primary": "#313337",
   "secondary": "#009D8C",
    "info": "#fff",
    "label": "#fff",
    "danger": "#FF592C",
    "success": "#17BD98",
    "inactive": "#fff"
   }
   }
  },
  "payUrl": {payUrl_from_/orders_response}
});
</script >

Notice the container — parameter — it accepts either the DOM element id or the DOM element itself. This method is useful for more complex cases where you need to create a dynamic widget after opening the page (by clicking a button, etc.).

Widget parameters Init method parameters

Events

This widget generates events that can be subscribe to.This allows to execute some functions when something occurs to the widget.

Widget notification example

{   "transaction":{
   "token": TOKEN,
   "status": STATUS
  }
}

Meanings of the transaction statuses