Widget Integration Guide

Key Features

  • Seamless Integration: Easily embed the payment widget into your website or application.

  • Customizable: Tailor the widget's appearance to match your brand.

  • Secure Transactions: Juicyway prioritizes the security of your customers' financial information.

  • Multiple Payment Options: Support a variety of payment methods (e.g., cards, bank transfers).

Parameters

Request param
Description
Required

amount

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

Yes

currency

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

Yes

description

A short description of the payment.

Yes

isLive

Set to true for real payments, false for testing in the sandbox.

Yes

appName

The name of your merchant's business or app.

No

customer

An object containing customer details like name, email, and address.

No

key

Your Juicyway API key.

Yes

metadata

An object for extra data related to this payment. The order object within it is particularly useful for order-related details.

No

order

Order details

Yes

reference

A unique identifier for the payment.

Yes

paymentMethod

paymentMethod object contains the payment method details to create payments. To present a pre-selected payment method to the user, pass the specific method details.

No

Integration Steps

  1. Include the Juicyway Library: Add the following line to the <head> section of your HTML:

HTML

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

  1. Create the Payment Function: Define a JavaScript function to initialize the payment widget:

JavaScript

function openWidget() {
    Juicyway.PayWithJuice({
        onClose: () => {
            // Called when user closes widget
        },
        onSuccess: () => {
            // Called when payment is successful
        },
        onError: (error) => {
            // Called when payment fails
        },
        reference: "<unique_reference>", // Unique reference for the payment
        amount: 1000,      // Payment amount in the minor unit of the currency
        currency: "NGN | USD | CAD",     // Three-letter currency code (e.g., USD, NGN)
        description: "<description>",
        isLive: true,       // Set to false for sandbox testing, true for production
        appName: "<YOUR_APP_NAME>",
        customer: {
            billing_address: { 
                line1: "<street address>",
                city: "<city>",
                state: "<state>",
                zip_code: "<zip_code>"
                country: "<2-letter country code>"
            },
            email: "customer@email.com",
            first_name: "Test",
            last_name: "Customer",
            phone_number: "<full_phone_number_with_country_code>"
        },
         "paymentMethod": {
            "type": "card" | "bank_account" | "interac"
          },
        customerId: "*****", // For existing customers. This is mutually-exclusive with the customer field.
        key: "<YOUR_API_KEY>",  // Replace with your actual API key
        order: {
            identifier: "<order_identifier>",
            items: [
                { 
                  name: "E-book",
                  type: "digital",
                  qty: 1, // optional
                  amount: 1000 // optional
                }
            ]
        },
        metadata: {
            // optional payment metadata
        }
    });
}

  1. Trigger the Payment: Create a button or link that calls the openWidget() function:

HTML

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

PreviousPayment WidgetNextFetch Payment

Last updated