> ## Documentation Index
> Fetch the complete documentation index at: https://docs.juicyway.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Widget Integration Guide
> Step-by-step guide to integrate the Juicyway Payment Widget
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
Add the following script tag to the `` section of your HTML:
```html theme={null}
```
Define a JavaScript function to initialize the payment widget:
```javascript theme={null}
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
}
});
}
```
Create a button or link that triggers the payment widget:
```html theme={null}
```
## Configuration Parameters
### Required Parameters
A unique identifier for the payment transaction
The payment amount in the smallest denomination of the currency (e.g., cents for USD)
A three-letter ISO 4217 currency code (e.g., USD, NGN, CAD)
A short description of the payment
Set to `true` for production environment, `false` for sandbox testing
Your Juicyway API key
Order details object containing:
Unique identifier for the order
Array of items in the order
Name of the item
Type of item (e.g., "digital", "physical")
Quantity of the item
Price per item
### Optional Parameters
The name of your merchant's business or application
Customer details object containing:
Customer's email address
Customer's first name
Customer's last name
Customer's phone number with country code
Street address
City
State/Province
Postal/ZIP code
Two-letter country code
Payment method configuration:
Payment method type: "card" | "bank\_account" | "interac"
Additional data related to the payment
## Callback Functions
Called when the user closes the payment widget
Called when the payment is successfully completed
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).