# Payment Plugin

The Payment Plugin is a suite of embeddable components that enable your customers to sign-up or sign-in through FlexShopper, apply for a spending limit, enter payment method(s), submit their First Payment and sign their lease.

## Embed Inline Frame (iframe)

```markup
<script src="https://pp3.flexshopper.com/sdk/js?authKey=AUTH_KEY"></script>
<script>
    FlexSDK.Button({
        createOrder: function() {}
        onSign: function() {}
    }).render('#elementSelector');
</script>
```

{% hint style="danger" %}
Make sure to replace AUTH\_KEY with your organization's assigned authorization key.
{% endhint %}

## Create Transaction

To create a lease, the `createOrder` method must be implemented. It will be called when the customer clicks on the FlexPay Payments button; once called, `createOrder`:

* Makes use of `actions.transaction.create()` to create a valid order.
* Launches the FlexShopper Payment modal where the customer may apply, get a spending limit, and sign the lease for their cart. Upon receiving a spending limit, customers are also given the chance to return to the store and add more items to their cart.

```javascript
FlexSDK.Button({
    createOrder: function(data, actions) {
        return actions.transaction.create({
                cost: 120.34,
                transactionId: "ABC-129384",
                items: [
                    {
                        description: "Macbook Pro 13",
                        sku: "ABC123",
                        cost: 120.34,
                        brand: "Apple",
                        condition: "new",
                        quantity: 1,
                        images: [ // optional
                          "https://images.dog.ceo/breeds/husky/n02110185_11635.jpg"
                        ],
                        shipping: {
                          cost: 10.33,
                          date: new Date(),
                          method: "UPS"
                        }
                    }
                ]
            });
    }
}).render('#elementSelector');
```

## Finalize Transaction

Once the consumer has signed their lease, the `onSign` method will be called. In this method you are required to:

* Retrieve the order from FlexShopper's system and validate the signed agreement.
* Finalize the order, confirming the lease's total value and items, as well as confirming that the shipping process is underway.

If these steps are not followed, orders may not be fulfilled or billed correctly. You will have to implement an endpoint that your customers can interact with that consumes our Backend API:

### Client-side

```javascript
FlexSDK.Button({
    onSign: function(data) {
        return fetch('/validate-order', {
            method: 'POST',
            body: JSON.stringify(data)
        })
    }
}).render('#elementSelector');
```

The `data` object will have the following shape:

```javascript
{
    "leaseNumber": "1234567",
    "transactionId": "ABC-129384"
}
```

### Server-side

{% tabs %}
{% tab title="node.js" %}

```javascript
const axios = require('axios');
// helper method holding business logic to validate order
const checkOrder = require('utils/check-order.js');

const flexShopperClient = axios.create({
 baseURL: '/v3',
 headers: {
  Authorization: 'YOUR_API_KEY'
 }
});

 export const validateOrderHandler = async (req, res) => {
  const transactionId = req.body.transactionId;
  const transaction = await flexShopperClient.get(`/transactions/${transactionId}`)
  const orderStatus = await checkOrder(transaction)

  if (!orderStatus.isValid) {
   res.json({valid: false, errors: orderStatus.errors});
   return res.send(400);
  }

  await flexShopperClient.post(`/transactions/${transactionId}/finalize`)

  res.json({valid: true});
  res.send(200);
 };
```

{% endtab %}

{% tab title="PHP" %}

```php
use GuzzleHttp\Client;
use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Message\ResponseInterface;
use Zend\Diactoros\Response\JsonResponse;

$app->post('/validate-order', function (ServerRequestInterface $request): ResponseInterface {
    $flexShopperClient = new Client([
        'base_uri' => '/v3',
        'headers' => [
            'Authorization' => 'YOUR_API_KEY'
        ]
    ]);

    $transactionId = $request->getParsedBody()['transactionId'];
    $transaction = json_decode($flexShopperClient->get("/transactions/${transactionId}")->getBody());
    $orderStatus = $checkOrder($transaction);

    if (!$orderStatus->isValid) {
        return new JsonResponse(['valid' => false, 'errors' => $orderStatus->errors], 400);
    }

    $flexShopperClient->post("/transactions/${transactionId}/finalize");

    return new JsonResponse(['valid' => true, 'parsed_body' => $transactionId]);
});


```

{% endtab %}

{% tab title="Python" %}

```python
from flask import Flask
from flask import jsonify
from flask import request
from requests_toolbelt import sessions

app = Flask(__name__)


flexshopper_client = sessions.BaseUrlSession(base_url='/v3')
flexshopper_client.headers.update({'Authorization': 'YOUR_API_KEY'})


@app.route('/validate-order', methods=['POST'])
def validate_order():
    data = request.get_json()
    transaction_id = data['transactionId']
    transaction = flexshopper_client.get('/transaction/%s' % transaction_id)
    order_status = check_order(transaction)

    if not order_status['valid']:
        return jsonify({'valid': False, 'errors': order_status['errors']}), 400, {'ContentType': 'application/json'}

    flexshopper_client.post('/transaction/%s/finalize' % transaction_id)
    return jsonify({'valid': True}), 200

```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
Make sure to replace API\_KEY with your organization's assigned API key. Note that API keys and authorization keys are separate.
{% endhint %}

## Confirm Order

Once FlexShopper receives confirmation that the consumer has received their item (delivery confirmation), your organization will be paid for the value of the lease. Use the `Confirm Shipment` API endpoint to inform FlexShopper of the shipment's status:

{% content-ref url="../lease/confirm-shipment" %}
[confirm-shipment](https://dev.flexshopper.com/medusa/lease/confirm-shipment)
{% endcontent-ref %}

***

Once you've confirmed shipment, you're done. That's all there is to it!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.flexshopper.com/medusa/integration-guides/payment-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.