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"
    },
    order: {
        // Additional payment order
    }
  });
}
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:
​
order
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).