FlexPay Payment Platform

FlexPay Payment Platform enables your users to securely finance their order with an easy to use Lease to Own experience.

Add the Payment Button to your store

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

Make sure to switch AUTH_KEY with your assigned authorization key

Creating a transaction

We're going to implement the createOrder method, which is called when the Pay Weekly | FlexShopper button is clicked which:

  • Makes use of actions.transaction.create() to create a valid order, a complete list of fields can be found here.

  • Launches the FlexShopper Payment modal where the consumer may apply and sign their lease

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,
                    }
                ]
            });
    }
}).render('#elementSelector');

Finalize the transaction

One the consumer has signed their lease there onSign method will be called where you'll have the opportunity to:

  • Retrieve the order from our system and validate the signed agreement

  • Finalize the order, letting us know the Lease's totals and items are correct and you'll be sending out the product(s) to the consumer.

On the Frontend

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

the data object will look like:

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

On the Backend

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

const flexShopperClient = axios.create({
 baseURL: 'https://apis.sandbox.flexshopper.com/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);
 }; 

Endpoints

pageCheckoutpageGet Transaction By ID

After the order has been placed

FlexShopper uses shipping information to confirm the consumer has received their item and the originating store should now be paid for those goods, to that end we need the item's shipping information which can be done with our Confirm Shipment API call

pageConfirm Shipment

Last updated