Widget Integration Guide

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

Include the Juicyway Library

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

<script
  src="https://checkout.juicyway.com/pay.js"
  integrity="sha384-ROsbTCP6XBvgKuKoF3VSg21iu7C48d0RZHByswNEGppV+u2KkCt4rbEq9LpO3M9e"
  crossorigin="anonymous"
></script>

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
    }
  });
}

Implement the Payment Button

Create a button or link that triggers the payment widget:

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

Configuration Parameters

Required Parameters

string

required

A unique identifier for the payment transaction

number

required

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

string

required

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

string

required

A short description of the payment

boolean

required

Set to true for production environment, false for sandbox testing

string

required

Your Juicyway API key

object

required

Order details object containing:

Show Properties

string

required

Unique identifier for the order

array

required

Array of items in the order

Show Item Properties

string

required

Name of the item

string

required

Type of item (e.g., “digital”, “physical”)

number

Quantity of the item

number

Price per item

Optional Parameters

string

The name of your merchant’s business or application

object

Customer details object containing:

Show Properties

string

Customer’s email address

string

Customer’s first name

string

Customer’s last name

string

Customer’s phone number with country code

object

Show Address Properties

string

Street address

string

City

string

State/Province

string

Postal/ZIP code

string

Two-letter country code

object

Payment method configuration:

Show Properties

string

Payment method type: “card” | “bank_account” | “interac”

object

Additional data related to the payment

Callback Functions

function

Called when the user closes the payment widget

function

Called when the payment is successfully completed

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).

Home

Customers

Payments

Payment Transactions

Transfers

Exchange

Wallet As A Service

Widget Integration Guide

Overview

Integration Steps

Configuration Parameters

Required Parameters

Optional Parameters

Callback Functions

​Overview

​Integration Steps

​Configuration Parameters

​Required Parameters

​Optional Parameters

​Callback Functions

Overview

Integration Steps

Configuration Parameters

Required Parameters

Optional Parameters

Callback Functions