Skip to main content

Credo Popup

Credo inline pop up describes a scenario where you want to collect payments, and you don't want your customers to leave your site. The payment widget will pop up on your site and allow the users to make payment


Body Parameters​

» key   string   required

Your public key from Credo. Use test key for test mode and live key for live mode Example: "0PUB0024x8k5w4TU1dq570Jb8zJn0dLH"

» amount   number   required

This is a number indicating how much is to be paid by the customer (in the lowest currency value - kobo, pesewas or cent) Example: 500000

» currency   string   

The currency the requested amount is in. This should be the three-letter (ISO 4217) currency code, such as "NGN". For a list of supported currencies, use the fetch currencies endpoint. Example: "NGN"

» callbackUrl   string   required

The URL from the merchant where the user will be redirected once payment is complete. Example: "https://credocentral.com/paymentSuccessful"

» reference   string      

Unique case-sensitive transaction reference. Only alphanumeric characters are allowed. If you do not pass this parameter, one is automatically generated for each transaction. Example: "iy67f64hvc63"

» channels   array   

Supply payment option such as an array of ‘card’, ‘bank’ or an array of both, so your user can payment through these options you have made available Example: ["card","bank]

» email   string   required

The email of the customer performing the transaction, this will be supplied by the customer. Example: "cirochwukunle@example.com"

» customerFirstName   string   optional

The first name of the customer performing the transaction, this will be supplied by the customer. Example: "Ciroma"

» customerLastName   string   optional

The last name of the customer performing the transaction, this will be supplied by the customer. Example: "Adekunle"

» customerPhoneNumber   string   optional

The phone number of the customer performing the transaction, this will be supplied by the customer. Example: "08012345678"

» serviceCode   string   optional

Dynamic settlement service code. Example: "00R284us01"

» metadata   object   optional

This can contain extra data you want to supply such as logoUrl e.t.c Example: {bankAccount: "209 12892 727"}

» callback   function   required

This function will be executed once the payment is complete.

» onClose   function   required

This function is executed when the user closes the payment modal.

Sample Implementation​

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Credo Inline Payment</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script src="https://pay.credocentral.com/inline.js"></script>
    <button onClick="handler.openIframe()">Start Payment</button>
    <script>
      const generateRandomNumber = (min, max) =>
        Math.floor(Math.random() * (max - min) + min)
      const transRef = `iy67f${generateRandomNumber(
        10,
        60,
      )}hvc${generateRandomNumber(10, 90)}`
      let handler = CredoWidget.setup({
        key: '0PUB0024x8k5w4TU1dq570Jb8zJn0dLH', //You should store your API key as an environment variable
        customerFirstName: 'Ciroma',
        customerLastName: 'Chukwuma',
        email: 'stephen@genuinesols.com',
        amount: 109000,
        currency: 'NGN',
        renderSize: 0,
        channels: ['card', 'bank'],
        reference: transRef, // Please generate your own transRef that is unique for each transaction
        customerPhoneNumber: '08032698425',
        metadata: {
            bankAccount: "0114877128",
            customFields: [
                {
                    variable_name: "gender",
                    value: "Male",
                    display_name: "Gender"
                }
           ]
        },
        callbackUrl: 'https://merchant-test-line.netlify.app/successful',
        onClose: () => {
          console.log('Widget Closed')
        },
        callBack: (response) => {
          console.log('Successful Payment')
          console.log(response)
          window.location.href = response.callbackUrl
        },
      })
    </script>
  </body>
</html>