Option 1: Inline

A popup right on your site. And BOOOM!, you're paid!

In this case, clicking your "Pay now" button button should pop the Paystack payment form onto your webpage. Note that it is important to save the values, so you will be using jQuery Ajax to post the values to your server.

  1. Change the button type from submit to button
  2. Add paystack inline js by adding this line in the form: <script src="https://js.paystack.co/v1/inline.js"></script>
  3. Remove all hidden inputs.
  4. Create a javascript object that will be posted to the server so we can save the order.
  5. Create the function that posts the order to your server
  6. Create the function that pops the Paystack payment form
  7. Set the button's click to save the order and start payment.
<form action="#">
  <script src="https://js.paystack.co/v1/inline.js"></script>
  <button type="button" name="pay_now" id="pay-now" title="Pay now"  onclick="saveOrderThenPayWithPaystack()">Pay now</button>
</form>

<script >
  var orderObj = {
    email_prepared_for_paystack: '<?php echo $email; ?>',
    amount: <?php echo $amount_in_kobo; ?>,
    cartid: <?php echo $cartid; ?>
    // other params you want to save
  };

  function saveOrderThenPayWithPaystack(){
    // Send the data to save using post
    var posting = $.post( '/save-order', orderObj );

    posting.done(function( data ) {
      /* check result from the attempt */
      payWithPaystack(data);
    });
    posting.fail(function( data ) { /* and if it failed... */ });
  }

  function payWithPaystack(data){
    var handler = PaystackPop.setup({
      // This assumes you already created a constant named
      // PAYSTACK_PUBLIC_KEY with your public key from the
      // Paystack dashboard. You can as well just paste it
      // instead of creating the constant
      key: '<?php echo PAYSTACK_PUBLIC_KEY; ?>',
      email: orderObj.email_prepared_for_paystack,
      amount: orderObj.amount,
      metadata: {
        cartid: orderObj.cartid,
        orderid: data.orderid,
        custom_fields: [
          {
            display_name: "Paid on",
            variable_name: "paid_on",
            value: 'Website'
          },
          {
            display_name: "Paid via",
            variable_name: "paid_via",
            value: 'Inline Popup'
          }
        ]
      },
      callback: function(response){
        // post to server to verify transaction before giving value
        var verifying = $.get( '/verify.php?reference=' + response.reference);
        verifying.done(function( data ) { /* give value saved in data */ });
      },
      onClose: function(){
        alert('Click "Pay now" to retry payment.');
      }
    });
    handler.openIframe();
  }
</script>

Drop comments here