Payment Checkout

Eyowo checkout provides the fastest way to accept payment on your app or web via our checkout either using Redirect Approach or Modal Pop up.

Re-direct Approach

For a regular bill (transactional bill), once generated, the server returns a payment checkout link, which redirects to the checkout page. After the transaction is made the user is redirected back to the redirectURL you had provided during the bill creation.

For a dynamic bill (non-transactional bill), either for staging or production environment, the generated bill reference builds the URL path to the Eyowo’s payment page.

Example:

• https://eyowo.me/{{billReference}} (production)

• https://pay-staging.eyowo.com/{{billReference}} (staging)

Screenshot of Eyowo Payment Page (https://eyowo.me)

Eyowo Payment Page handles the dynamic bill (non-transactional bill), where the user is required to enter:

• Amount to be paid (this is turned on/off by you when creating the bill, turning it off means the user will be unable to edit the amount).

• First Name, Last Name (required)

• Organisation Name (required, if payment is made on behalf of an organisation)

• Email address (required)

• Remark field (optional)

Customer Details Page

After all the required fields are filled, the pay button is enabled and clicking the button pops up the checkout modal (as shown in the images below)

Checkout Modal

Checkout Modal

Here the checkout page is launched on your web app as a pop up without leaving the page (as shown in the diagram above), this can only be removed by clicking the close button (top right corner). To implement this, here are the few steps to take:

Eyowo Inline JS <script></script>

 // Add Eyowo inline JS script
 <script src="https://checkout.eyowo.com/eyowo-checkoutv3-inline.js">
</script>

// Configure Eyowo.config
<script>
/* Create a function that executes the Eyowo.config method and provide the required object parameters as shown below in your JS code */
 function payWithEyowo(e){
        Eyowo.config({
          reference: 'EYW_XXXXXXXXXXXX',
          type: 'dynamic',
          onClose: function (evtMessage) {},
          callback: function (evtMessage) {
           alert('Payment Successfully made by Oladapo Oti');
         },
         testEnv: true     
       })
   }
 </script>
 
 
 /* You can call the payWithEyowo function using for example 
 a button click event in your HTML code */
 
 <div>
   <button onclick="payWithEyowo()">Pay</button>
 </div>
 

NB: Anytime the Eyowo.config function is executed with the required config object, the pop up modal loads up.

Checkout Modal Properties

Properties	Descriptions	Type	Required
reference	The bill reference generated.	String	True
type	Valid payment bill reference.	Enum ["dynamic", "regular"]	True
onClose	Callback function invoked after the modal closes.	Function	False
callback	Callback function invoked after a successful payment. Also closes the modal.	Function	False
testEnv	Enables or disable the checkout environement to launch. Default false launches checkout production environment.	Boolean	False