This guide will walk you through the process of integrating the Juicyway Payment Widget into your application.

​
Overview

The Juicyway Payment Widget provides a secure and customizable payment solution that can be easily integrated into your website or application. Follow these steps to implement the widget in your platform.

​
Integration Steps

1

Include the Juicyway Library

Add the following script tag to the <head> section of your HTML:

<script src="https://checkout.juicyway.com/pay.js"></script>
2

Create the Payment Function

Define a JavaScript function to initialize the payment widget:

function openWidget() {
    Juicyway.PayWithJuice({
        // Configuration options detailed below
        onClose: () => {
            // Called when user closes widget
        },
        onSuccess: () => {
            // Called when payment is successful
        },
        onError: (error) => {
            // Called when payment fails
        },
        // Required parameters
        reference: "unique_ref_123",
        amount: 1000,
        currency: "USD",
        description: "Product purchase",
        isLive: true,
        key: "YOUR_API_KEY",
        order: {
            identifier: "ORDER123",
            items: [
                { 
                    name: "E-book",
                    type: "digital",
                    qty: 1,
                    amount: 1000
                }
            ]
        },
        // Optional parameters
        appName: "Your App Name",
        customer: {
            email: "customer@email.com",
            first_name: "Test",
            last_name: "Customer",
            phone_number: "+1234567890",
            billing_address: { 
                line1: "123 Main St",
                city: "San Francisco",
                state: "CA",
                zip_code: "94105",
                country: "US"
            }
        },
        paymentMethod: {
            type: "card"
        },
        metadata: {
            // Additional payment metadata
        }
    });
}
3

Implement the Payment Button

Create a button or link that triggers the payment widget:

<button onclick="openWidget()">Make Payment</button>

​
Configuration Parameters

​
Required Parameters

​
reference
string
required

A unique identifier for the payment transaction

​
amount
number
required

The payment amount in the smallest denomination of the currency (e.g., cents for USD)

​
currency
string
required

A three-letter ISO 4217 currency code (e.g., USD, NGN, CAD)

​
description
string
required

A short description of the payment

​
isLive
boolean
required

Set to true for production environment, false for sandbox testing

​
key
string
required

Your Juicyway API key

​
order
object
required

Order details object containing:

​
Optional Parameters

​
appName
string

The name of your merchant’s business or application

​
customer
object

Customer details object containing:

​
paymentMethod
object

Payment method configuration:

​
metadata
object

Additional data related to the payment

​
Callback Functions

​
onClose
function

Called when the user closes the payment widget

​
onSuccess
function

Called when the payment is successfully completed

​
onError
function

Called when an error occurs during payment processing

For security purposes, always ensure you’re using the correct API key for your environment (test or live).

Payment WidgetFetch Payment