### Payment Widget (JS) - Basic Example

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This example demonstrates how to initialize the Paycore Payment Widget with basic order details.

```APIDOC
## Initialize Payment Widget (JS) - Basic

### Description
Initializes the Paycore Payment Widget to display a payment review page for a specific order.

### Method
JavaScript `window.widget.init()`

### Parameters
- **public_key** (string) - Required - Your Paycore commerce public key.
- **baseUrl** (string) - Required - The base URL for the Paycore COM API.
- **flow** (string) - Required - The payment flow type, e.g., "iframe".
- **selector** (string) - Required - The ID of the HTML element where the widget will be mounted.
- **reference_id** (string) - Required - The unique identifier for the order.
- **amount** (number) - Required - The total amount of the order.
- **currency** (string) - Required - The currency of the order (e.g., "USD").
- **description** (string) - Optional - A summary of the order to display on the payment review page.
- **expires** (number) - Optional - The payment expiration time in UNIX timestamp format.

### Request Example
```javascript
window.widget.init({
    public_key: "your_public_key", 
    baseUrl: "{BASE COM API URL}/hpp/",
    flow: "iframe",
    selector: "merchant-widget-mount-point",
    reference_id: "12345", 
    amount: 100.00, 
    currency: "USD", 
    description: "1 digital camera", 
    expires: 1602414000 
});
```

### Response
This method initiates the widget display. Success is indicated by the widget rendering correctly.
```

--------------------------------

### Payment Link (HTML Form) - Basic Example

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This example shows how to create a payment link using an HTML form with basic order details.

```APIDOC
## Create Payment Link (HTML Form) - Basic

### Description
Creates a payment link using an HTML form that submits order details to the Paycore payment gateway.

### Method
HTML Form (`<form method="get">`)

### Endpoint
`{BASE COM API URL}/hpp/`

### Parameters
- **public_key** (hidden input) - Required - Your Paycore commerce public key.
- **reference_id** (hidden input) - Required - The unique identifier for the order.
- **currency** (hidden input) - Required - The currency of the order (e.g., "USD").
- **amount** (hidden input) - Required - The total amount of the order.
- **description** (hidden input) - Optional - A summary of the order.
- **expires** (hidden input) - Optional - The payment expiration time in UNIX timestamp format.

### Request Example
```html
<form action="{BASE COM API URL}/hpp/" method="get">
    <input type="hidden" name="public_key" value="<your_public_key>" />
    <input type="hidden" name="reference_id" value="12345" />
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="amount" value="100" />
    <input type="hidden" name="description" value="1 digital camera" />
    <input type="hidden" name="expires" value="1602414000" />
    <input type="submit" value="Pay" />
</form>
```

### Response
Submitting the form redirects the user to the Paycore payment page.
```

--------------------------------

### Payment Widget (JS) - With Customer Details

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This example demonstrates initializing the Payment Widget including customer details.

```APIDOC
## Initialize Payment Widget (JS) - With Customer Details

### Description
Initializes the Paycore Payment Widget, including detailed customer information for the transaction.

### Method
JavaScript `window.widget.init()`

### Parameters
- **public_key** (string) - Required - Your Paycore commerce public key.
- **baseUrl** (string) - Required - The base URL for the Paycore COM API.
- **flow** (string) - Required - The payment flow type, e.g., "iframe".
- **selector** (string) - Required - The ID of the HTML element where the widget will be mounted.
- **reference_id** (string) - Optional - A unique identifier for the order if not provided at the customer level.
- **amount** (number) - Required - The total amount of the order.
- **currency** (string) - Required - The currency of the order (e.g., "USD").
- **description** (string) - Optional - A summary of the order.
- **language** (string) - Optional - The language for the widget interface.
- **customer** (object) - Optional - An object containing customer details:
    - **reference_id** (string) - Required - Unique identifier for the customer.
    - **email** (string) - Required - Customer's email address.
    - **name** (string) - Optional - Customer's full name.
    - **metadata** (object) - Optional - Additional key-value pairs for customer metadata.

### Request Example
```javascript
window.widget.init({
    public_key: "your_public_key", 
    baseUrl: "{BASE COM API URL}/hpp/",
    flow: "iframe",
    selector: "merchant-widget-mount-point",
    reference_id: "", // Can be empty if customer reference_id is used
    amount: 10,
    currency: "USD",
    description: "Simple description of your payment operation.",
    language: "en",
    customer: {
        reference_id: "cus_1234567",
        email: "somename@domain.com",
        name: "John Wick",
        metadata: {
            key1: "SomeValue1",
            key2: "SomeValue2"
         }
    }
});
```

### Response
This method initiates the widget display. Success is indicated by the widget rendering correctly.
```

--------------------------------

### Payment Widget (JS) - Editable Amount

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This example shows how to configure the Payment Widget for a scenario where the amount can be edited by the user.

```APIDOC
## Initialize Payment Widget (JS) - Editable Amount

### Description
Initializes the Paycore Payment Widget, allowing the payment amount to be dynamically set or edited.

### Method
JavaScript `window.payment_widget.init()`

### Parameters
- **public_key** (string) - Required - Your Paycore commerce public key.
- **reference_id** (string) - Required - A unique identifier for the order.
- **amount** (number) - Required - The total amount of the order. This can be dynamically fetched.
- **currency** (string) - Required - The currency of the order (e.g., "USD").
- **description** (string) - Optional - A summary of the order.

### Request Example
```javascript
function initPaymentWidget() {
    const amount = document.getElementById("amount").value;
    window.payment_widget.init( {
        public_key: "<your_public_key>",
        reference_id: "<your_unique_reference_id>",
        amount: amount, // Dynamically set from input
        currency: "USD",
        description: "Some goods",
    });
}
```

### HTML Setup
```html
Enter amount:<input type="number" id="amount" name="amount"/><br/>
<input type="button" value="init" onclick="initPaymentWidget()"/>
```

### Response
This method initiates the widget display. Success is indicated by the widget rendering correctly, potentially with an editable amount field.
```

--------------------------------

### Payment Link (HTML Form) - With Customer Details

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This example demonstrates creating a payment link using an HTML form, including customer details.

```APIDOC
## Create Payment Link (HTML Form) - With Customer Details

### Description
Creates a payment link using an HTML form that includes detailed customer information.

### Method
HTML Form (`<form method="get">`)

### Endpoint
`{BASE COM API URL}/hpp/`

### Parameters
- **public_key** (hidden input) - Required - Your Paycore commerce public key.
- **reference_id** (hidden input) - Required - A unique identifier for the order.
- **currency** (hidden input) - Required - The currency of the order (e.g., "USD").
- **amount** (hidden input) - Required - The total amount of the order.
- **description** (hidden input) - Optional - A summary of the order.
- **customer[reference_id]** (hidden input) - Required - Unique identifier for the customer.
- **customer[email]** (hidden input) - Required - Customer's email address.
- **customer[name]** (hidden input) - Optional - Customer's full name.
- **customer[metadata][key]** (hidden input) - Optional - Additional key-value pairs for customer metadata.

### Request Example
```html
<form action="{BASE COM API URL}/hpp/" method="get">
    <input type="hidden" name="public_key" value="<your_public_key>" />
    <input type="hidden" name="reference_id" value="<your_unique_reference_id>" />
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="amount" value="100" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="customer[reference_id]" value="cus_1234567" />
    <input type="hidden" name="customer[email]" value="somename@domain.com" />
    <input type="hidden" name="customer[name]" value="John Wick" />
    <input type="hidden" name="customer[metadata][key1]" value="value1" />
    <input type="hidden" name="customer[metadata][key2]" value="value2" />
    <input type="submit" value="Pay" />
</form>
```

### Response
Submitting the form redirects the user to the Paycore payment page.
```

--------------------------------

### Payment Link (HTML Form) - Editable Amount

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This example demonstrates creating a payment link using an HTML form where the amount can be edited.

```APIDOC
## Create Payment Link (HTML Form) - Editable Amount

### Description
Creates a payment link using an HTML form where the payment amount can be set or edited directly in the form.

### Method
HTML Form (`<form method="get">`)

### Endpoint
`{BASE COM API URL}/hpp/`

### Parameters
- **public_key** (hidden input) - Required - Your Paycore commerce public key.
- **reference_id** (hidden input) - Required - A unique identifier for the order.
- **currency** (hidden input) - Required - The currency of the order (e.g., "GBP").
- **amount** (text input) - Required - The total amount of the order. This field is visible and editable.
- **description** (hidden input) - Optional - A summary of the order.

### Request Example
```html
<form action="{BASE COM API URL}/hpp/" method="get">
    <input type="hidden" name="public_key" value="<your_public_key>" />
    <input type="hidden" name="reference_id" value="12345" />
    <input type="hidden" name="currency" value="GBP" />
    Amount: <input type="text" name="amount" value="100" />
    <input type="submit" value="Pay" />
</form>
```

### Response
Submitting the form redirects the user to the Paycore payment page with the specified or edited amount.
```

--------------------------------

### Generate Payment Link with HTML Form

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This HTML form facilitates a GET request to initiate a payment. It includes hidden input fields for essential payment details such as public key, description, and amount. This method is suitable for simple payment integrations where user input is not required.

```html
<form action="{BASE COM API URL}/hpp/" method="get">
    <input type="hidden" name="public_key" value="your_public_key" /> 
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="amount" value="100" />
    <input type="submit" value="Pay" />
</form>
```

--------------------------------

### Service Fields Example (JSON)

Source: https://merchant-docs.paycore.io/en/integration/payments/payment-page

This snippet shows an example of the `service_fields` object, which is required for certain services like `bank_transfer_usd_hpp`. It demonstrates how to provide service-specific credentials or identifiers.

```json
  "service_fields": {
    "account_number": "UA213223130000026007233566001"
  }


```

--------------------------------

### Payment Callback Request Example (JSON)

Source: https://merchant-docs.paycore.io/en/integration/callbacks

This example demonstrates the JSON structure of a payment callback request sent to the merchant's `callback_url`. It includes details about the payment status, amount, currency, and related transaction information. The request is a POST with the body in JSON API format.

```json
{
    "data": {
        "type": "payment-invoices",
        "id": "cpi_yv1RgJ2l8ty2AxIs",
        "attributes": {
        "status": "processed",
        "resolution": "ok",
        "moderation_required": false,
        "amount": 22,
        "payment_amount": 22,
        "currency": "USD",
        "service_currency": "USD",
        "reference_id": "da1b0b9d-c249-4f6e-9949-2a2f2d4b1758",
        "test_mode": true,
        "fee": 0,
        "deposit": 22,
        "processed": 1592232071,
        "processed_amount": 22,
        "refunded_amount": null,
        "processed_fee": 0,
        "processed_deposit": 22,
        "metadata": {
            "merchant_url": "https://yu.test.this"
        },
        "flow_data": {
            "action": "https://example.domain/hpp/cgi_Q0fYDFaHlqb5MCdl",
            "method": "GET",
            "params": [],
            "metadata": {
            "sid": "cgi_Q0fYDFaHlqb5MCdl",
            "token": "eyJ0eXAiOiJKV1QiLRiGCg2O...nGE7E"
            }
        },
        "flow": "hpp",
        "payment_flow": "charge",
        "created": 1592232050,
        "updated": 1592232071,
        "payload": {
            "token": null,
            "client_ip": "54.36.117.30",
            "payment_card": {
            "last": "0000",
            "mask": "512381******0000",
            "brand": "mastercard",
            "first": "512381",
            "holder": null,
            "expiry_year": "33",
            "issuer_name": "FIRST DATA CORPORATION",
            "expiry_month": "11",
            "issuer_country": "US"
            }
        },
        "description": null,
        "descriptor": null,
        "callback_url": "https://test.doc.home",
        "return_url": "https://example.com",
        "return_urls": {
            "fail": "https://example.com/sorry-page",
            "pending": "https://example.com/wait-for-it-page",
            "success": "https://example.com/thank-you-page"
        },
        "original_data": null,
        "rrn": null,
        "approval_code": null,
        "reserved_amount": null,
        "reserve_expires": null,
        "unreserved": null,
        "source": null,
        "callback_logs": []
        },
        "relationships": {
        "payment-service": {
            "data": {
            "type": "payment-services",
            "id": "payment_card_usd_hpp"
            }
        },
        "payment-method": {
            "data": {
            "type": "payment-methods",
            "id": "payment_card"
            }
        },
        "customer": {
            "data": null
          }
        },
        "links": {
        "self": "/api/payment-invoices/cpi_yv1RgJ2l8ty2AxIs"
        }
    }
}

```

--------------------------------

### Initialize Payment Widget using JavaScript

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This JavaScript snippet demonstrates how to initialize the Payment Widget on your website. It requires including the widget library and configuring it with your public key, API base URL, payment details, and display options. The widget is mounted to a specified HTML element.

```html
<script src="https://unpkg.com/@paycore/merchant-widget-js@0.3.0/dist/merchantWidget.umd.js"></script>
<div id="merchant-widget-mount-point" style="width: 375px; height: 600px;"></div>
<script>
    window.widget.init({
        public_key: "your_public_key", // replace the value with your commerce public key
        baseUrl: "{BASE COM API URL}/hpp/",
        flow: "iframe",
        selector: "merchant-widget-mount-point",
        amount: 10,
        currency: "USD",
        language: "en",
        description: "Simple description of your payment operation.",
        reference_id: "",
        metadata: {
            key: "value"
        },
        display: {
            hide_header: false,
            hide_footer: false,
            hide_progress_bar: false,
            hide_method_filter: false,
            hide_lifetime_counter: false
        }
     });
 </script>
```

--------------------------------

### JSON Example: 405 Method Not Allowed Response

Source: https://merchant-docs.paycore.io/en/integration/payouts/common

This snippet illustrates the JSON structure for a 405 Method Not Allowed error. It means the HTTP method used in the request is not supported by the server for the given resource. For example, using GET on an endpoint that only accepts POST.

```json
{
    "errors": [
        {
            "status": "Method Not Allowed",
            "code": "405"
        }
    ]
}
```

--------------------------------

### JSON Example: 401 Unauthorized Response

Source: https://merchant-docs.paycore.io/en/integration/payouts/common

This snippet demonstrates the JSON structure for a 401 Unauthorized error response. It indicates that the client must authenticate itself to get the requested response. This is common in APIs requiring authentication tokens.

```json
{
    "errors": [
        {
            "status": "Unauthorized",
            "code": "401"
        }
    ]
}
```

--------------------------------

### Payment with Customer Details - Payment Link (HTML Form)

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

Constructs an HTML form for payment links that includes customer details. Fields for customer reference ID, email, name, and nested metadata can be passed directly in the form to pre-populate customer information.

```html
<form action="{BASE COM API URL}/hpp/" method="get">
    <input type="hidden" name="public_key" value="<your_public_key>" />
    <input type="hidden" name="reference_id" value="<your_unique_reference_id>" />
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="amount" value="100" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="customer[reference_id]" value="cus_1234567" />
    <input type="hidden" name="customer[email]" value="somename@domain.com" />
    <input type="hidden" name="customer[name]" value="John Wick" />
    <input type="hidden" name="customer[metadata][key1]" value="value1" />
    <input type="hidden" name="customer[metadata][key1]" value="value2" />
    <input type="submit" value="Pay" />
</form>
```

--------------------------------

### Integrate Payment Widget with JavaScript

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This JavaScript code snippet demonstrates how to initialize and configure the Paycore Payment Widget. It requires including the widget's script and then calling the `init` function with various parameters to customize the payment experience, such as currency, amount, and display options. The widget is mounted to a specified DOM element.

```javascript
    <script src="https://unpkg.com/@paycore/merchant-widget-js@0.3.0/dist/merchantWidget.umd.js"></script>
    <div id="merchant-widget-mount-point" style="width: 375px; height: 600px;"></div>
    <script>
        window.widget.init({
            public_key: "your_public_key", // replace the value with YOUR commerce public key
            baseUrl: "{BASE COM API URL}/hpp/",
            flow: "iframe",
            selector: "merchant-widget-mount-point",
            amount: 10,
            currency: "USD",
            language: "en",
            description: "Simple description of your payment operation.",
            reference_id: "",
            metadata: {
                key: "value"
            },
            display: {
                hide_header: false,
                hide_footer: false,
                hide_progress_bar: false,
                hide_method_filter: false,
                hide_lifetime_counter: false
            }
        });
    </script>
```

--------------------------------

### Embed Payment Link with HTML Form

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

This HTML form is used to create a payment link with predefined parameters. It sends a GET request to the specified action URL, including hidden fields for public key, currency, description, and amount. This is a straightforward way to embed a payment option directly into a webpage.

```html
<form action="{BASE COM API URL}/hpp/" method="get">
    <input type="hidden" name="public_key" value="<your_public_key>" />
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="amount" value="100" />
    <input type="submit" value="Pay" />
</form>
```

--------------------------------

### Payment Widget (JS) Example

Source: https://merchant-docs.paycore.io/en/guides/checkout/reference

Example of initializing the payment widget with customer data.

```APIDOC
## Payment Widget (JS) Example

This example demonstrates how to initialize the payment widget and include customer data in the configuration.

### Request Example

```html
<script src="https://unpkg.com/@paycore/merchant-widget-js@0.3.0/dist/merchantWidget.umd.js"></script>
<div id="merchant-widget-mount-point"></div>
<script>
    window.widget.init({
    public_key: "your_public_key", //replace this value with your public key
    baseUrl: "{BASE COM API URL}/hpp",
    flow: "iframe",
    selector: "merchant-widget-mount-point",
    amount: 10,
    currency: "USD",
    language: "en",
    description: "Simple description of your payment operation.",
    reference_id: "",
    expires: 1652479200,
    cpi: "",
    service: "payment_card_usd_hpp",
    metadata: {
        key: "value"
    },
    customer: {
        reference_id: "5ae4002f-5332-4a0f-b951-da4b9a1c46c4",
        email: "email@customer.com",
        phone: "123456789000000",
        metadata: {
            key: "value",
            key1: "value1"
            },
        address: {
            country: "GB",
            region: "London City",
            city: "London",
            street: "Oxford Street",
            full_address: "Postal Address",
            post_code: "SW1A2AA"
            },
        name: "New Customer"
        }
    });
</script>
```
```

--------------------------------

### Payment with Customer Details - Payment Widget (JS)

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

Initializes the PayCore payment widget to include customer details. This allows for pre-filling customer information like reference ID, email, name, and metadata directly within the widget.

```javascript
<script async src="https://unpkg.com/@paycore/merchant-widget-js@0.3.0/dist/merchantWidget.umd.js"></script>
<div id="merchant-widget-mount-point" style="width: 375px; height: 600px;"></div>
<script>
window.widget.init({
    public_key: "your_public_key", // replace the value with YOUR commerce public key
    baseUrl: "{BASE COM API URL}/hpp/",
    flow: "iframe",
    selector: "merchant-widget-mount-point",
    reference_id: "",
    amount: 10,
    currency: "USD",
    language: "en",
    description: "Simple description of your payment operation.",
    customer: {
        reference_id: "cus_1234567",
        email: "somename@domain.com",
        name: "John Wick",
        metadata: {
            key1: "SomeValue1",
            key2: "SomeValue2"
         }
 });
</script>
```

--------------------------------

### Payment Link (HTML Form) Example

Source: https://merchant-docs.paycore.io/en/guides/checkout/reference

Example of creating a payment link using an HTML form with customer data.

```APIDOC
## Payment Link (HTML Form) Example

This example shows how to construct an HTML form to create a payment link, including customer data as hidden input fields.

### Request Example

```html
<form action="{BASE COM API URL}/hpp/" method="GET">
    <input type="hidden" name="public_key" value="your_public_key"/>  <!--> replace this value with your public key <-->
    <input type="hidden" name="reference_id" value="Test_order_01_1"/>
    <input type="hidden" name="currency" value="USD"/>
    <input type="hidden" name="service" value="payment_card_usd_hpp"/>
    <input type="hidden" name="amount" value="10.00"/>
    <input type="hidden" name="description" value="Some info about order"/>
    <input type="hidden" name="expires" value="1602414000" />
    <input type="hidden" name="customer[reference_id]" value="test12345"/>
    <input type="hidden" name="customer[name]" value="Test Customer"/>
    <input type="hidden" name="customer[address][full_address]" value="Test Address"/>
    <input type="hidden" name="customer[address][country]" value="UK"/>
    <input type="hidden" name="customer[metadata][key1]" value="value1" />
    <input type="hidden" name="customer[metadata][key1]" value="value2" />
    <input type="submit" value="PAY"/>
</form>
```
```

--------------------------------

### Payment with Editable Amount - Payment Widget (JS)

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

Demonstrates initializing the PayCore payment widget with a dynamic amount. The amount is fetched from an input field on the page, allowing the user or system to specify the payment value at runtime before initializing the widget.

```javascript
<script>
function initPaymentWidget() {
    const amount = document.getElementById("amount").value;
    window.payment_widget.init( {
        public_key: "<your_public_key>",
        reference_id: "<your_unique_reference_id>",
        amount: amount,
        currency: "USD",
        description: "Some goods",
    });
}
</script>
Enter amount:<input type="number" id="amount" name="amount"/><br/>
<input type="button" value="init" onclick="initPaymentWidget()"/>
```

--------------------------------

### Standard Payment - Payment Widget (JS)

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

Initializes the PayCore payment widget for a standard order. It requires a public key, base API URL, reference ID, amount, currency, description, and an expiration timestamp. The widget is rendered in a specified div element.

```javascript
<script src="https://unpkg.com/@paycore/merchant-widget-js@0.3.0/dist/merchantWidget.umd.js"></script>
<div id="merchant-widget-mount-point" style="width: 375px; height: 600px;"></div>
<script>
window.widget.init({
    public_key: "your_public_key", // replace the value with YOUR commerce public key
    baseUrl: "{BASE COM API URL}/hpp/",
    flow: "iframe",
    selector: "merchant-widget-mount-point",
    reference_id: "12345", // The order is placed with unique ID is 12345
    amount: 100.00, // Amount of the order bill is 100 USD
    currency: "USD", // Currency of the order bill is USD
    description: "1 digital camera", // Order summary information to display on the payment review page for the order: 1 digital camera
    expires: 1602414000 // The payment expires on *October 11th 2020, 11:00 am (UNIX timestamp format)
});
</script>
```

--------------------------------

### Full-Page Redirect Payment Link (HTML Form)

Source: https://merchant-docs.paycore.io/en/guides/checkout/quickstart

Implements a full-page redirect for payments using an HTML form. This approach is straightforward and suitable for direct payment link generation. The form submits payment details such as public key, currency, description, and amount to the specified Paycore API endpoint.

```html
<form action="{BASE COM API URL}/hpp/" method="get" target="_self">
    <input type="hidden" name="public_key" value="<your_public_key>" />	<!-- replace the value with your commerce public key -->
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="amount" value="100" />
    <input type="submit" value="Pay" />
</form>
```