Payment modal

The easiest way to start accepting payments using the ProcessOut platform is to use the ProcessOut embedded payment modal. The modal will take care of handling the entire payment flow of your customer. It is an easy and effective way to get paid for products or services you sell.

If you’d rather control the whole checkout experience of your customer, we’ve also created ProcessOut.js that lets you do just that.


Getting started with an invoice

To get started, let’s create an Invoice:

curl -X POST https://api.processout.com/invoices \
    -u test-proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x:key_sandbox_jqSPvwq3AG5MlYAgqxlwwgOcAC3Zy7d8 \
    -d name="Awesome invoice" \
    -d amount="9.99" \
    -d currency=USD 
var ProcessOut = require("processout");
var client = new ProcessOut(
    "test-proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x",
    "key_sandbox_jqSPvwq3AG5MlYAgqxlwwgOcAC3Zy7d8");

client.newInvoice().create({
    name:     "Amazing item",
    amount:   "4.99",
    currency: "USD"
}).then(function(invoice) {
    //

}, function(err) {
    // An error occured

});
import processout
client = processout.ProcessOut(
    "test-proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x", 
    "key_sandbox_jqSPvwq3AG5MlYAgqxlwwgOcAC3Zy7d8")

invoice = client.new_invoice().create({
    "name":     "Amazing item",
    "amount":   "4.99",
    "currency": "USD"
})
require "processout"
client = ProcessOut::Client.new(
    "test-proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x", 
    "key_sandbox_jqSPvwq3AG5MlYAgqxlwwgOcAC3Zy7d8")

invoice = client.invoice.create(
    name:     "Amazing item",
    amount:   "4.99",
    currency: "USD"
)
<?php
$client = new \ProcessOut\ProcessOut(
    "test-proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x", 
    "key_sandbox_jqSPvwq3AG5MlYAgqxlwwgOcAC3Zy7d8");

$invoice = $client->newInvoice()->create(array(
    "name"     => "Amazing item",
    "amount"   => "4.99",
    "currency" => "USD"
));
import "gopkg.in/processout.v4"
client := processout.New(
    "test-proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x", 
    "key_sandbox_jqSPvwq3AG5MlYAgqxlwwgOcAC3Zy7d8")

iv, err := client.NewInvoice().Create(processout.InvoiceCreateParameters{
    Invoice: &processout.Invoice{
        Name:     processout.String("Amazing item"),
        Amount:   processout.String("4.99"),
        Currency: processout.String("USD"),
    },
})

This newly created invoice will give us an url, which we can use to redirect the customer to the checkout page.

<a href="<generated-link-goes-here>">Pay now!</a>

Once the payment goes through, you’ll receive an email notifying you of the payment. You may also use our Webhooks to programmatically execute actions when you get paid.

Embed the modal in your website

Redirecting customers to a new payment page often means a total change of payment context, which can significantly reduce your conversion rates. For this reason, ProcessOut lets merchants use the payment modal directly on their websites so that your customers never change context.

To automatically embed the modal in your website, only 2 lines are needed:

<a href="<generated-link-goes-here>" class="processout-modal-button">Pay now!</a>
<script src="https://js.processout.com/modal.js"></script>

Notice the processout-modal-button: it is used by ProcessOut.js to deduct which link should be converted to a modal.

Advanced modal use case

While automatically converting links to embed the modal is very handy, it can be quite limited in some use-cases. It is possible to control the flow of the modal and manually trigger its loading/appearance using some Javascript.

<script src="https://js.processout.com/processout.js"></script>
var processOut = new ProcessOut.ProcessOut("proj_gAO1Uu0ysZJvDuUpOGPkUBeE3pGalk3x");

processOut.newModal({
  url: "<generated-link-goes-here>",
  // or:
  amount:   5.99,
  currency: "USD",
  name:     "$5.99 invoice",
  // and some additional options to further customize:
  onReady: function(modal) {
    modal.show({
      onShow:         function(modal)       { /* ... */ },
      onHide:         function(modal)       { /* ... */ },
      onError:        function(modal, err)  { /* ... */ },
      onPayment:      function(modal, data) { /* ... */ },
      onPaymentError: function(modal, err)  { /* ... */ },
      hideAfterSuccessTimeout: 2500 // in ms. If <= 0, doesn't hide automatically
    });
  },
  onError: function(err) {
    console.log("The modal couldn't be loaded:"+err);
  }
});