/* Import Open Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* Apply Open Sans globally */
:root {
  --font-family-base: 'Open Sans', sans-serif;
}

/* Override default font families */
body,
html {
  font-family: var(--font-family-base) !important;
  letter-spacing: 0.02em;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-base) !important;
}

/* Navigation and UI elements */
.mintlify-navigation,
.mintlify-sidebar,
.mintlify-navbar,
nav {
  font-family: var(--font-family-base) !important;
}

/* Content areas */
.mintlify-content,
.markdown,
article,
p,
span,
div {
  font-family: var(--font-family-base) !important;
}

/* Paragraphs and text content */
p {
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* Code blocks - keep monospace for readability */
code,
pre,
.code-block,
.highlight {
  font-family: 'JetBrains Mono', 'Fira Code', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
}

/* Buttons and interactive elements */
button,
.button,
.btn,
input,
select,
textarea {
  font-family: var(--font-family-base) !important;
}

/* API documentation specific elements */
.api-method,
.api-endpoint,
.parameter-name {
  font-family: var(--font-family-base) !important;
}

/* Search box */
.search-input,
.search-box input {
  font-family: var(--font-family-base) !important;
}

/* Tables */
table,
th,
td {
  font-family: var(--font-family-base) !important;
}

/* Ensure proper font weights are available */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
}

[class*="language-"],
.highlight,
pre {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

[class*="language-"]::-webkit-scrollbar,
.highlight::-webkit-scrollbar,
pre::-webkit-scrollbar {
  display: block !important;
}

/* Custom table with white borders and outer border */
.white-border-table table {
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid white;
  /* Outer border */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  table-layout: fixed;
  width: 100%;
}

.white-border-table th,
.white-border-table td {
  padding: 14px 17px;
  width: 7.14%;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}

/* White border below first row (header) */
.white-border-table tr:first-child th {
  border-bottom: 2px solid white;
}

/* White border to the right of first column */
.white-border-table td:first-child,
.white-border-table th:first-child {
  border-right: 2px solid white;
}

/* White border to the right of last column (rightmost position) */
.white-border-table td:last-child,
.white-border-table th:last-child {
  border-right: 2px solid white;
}

.white-border-table th {
  font-weight: 600;
  height: 60px;
}

// Support Matrix Tab Switching
function switchTab(tabName) {
  const paymentTab = document.getElementById('payment-methods-tab');
  const flowsTab = document.getElementById('transaction-flows-tab');
  const paymentBtn = document.getElementById('payment-methods-btn');
  const flowsBtn = document.getElementById('transaction-flows-btn');
  
  if (!paymentTab || !flowsTab || !paymentBtn || !flowsBtn) {
    console.error('Required elements not found');
    return;
  }
  
  // Hide all tabs
  paymentTab.style.display = 'none';
  flowsTab.style.display = 'none';
  
  // Reset all button styles
  paymentBtn.className = 'px-6 py-3 rounded-md font-medium hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 transform border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:border-gray-400';
  paymentBtn.style.backgroundColor = '';
  
  flowsBtn.className = 'px-6 py-3 rounded-md font-medium hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 transform border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:border-gray-400';
  flowsBtn.style.backgroundColor = '';
  
  // Show selected tab and style active button
  if (tabName === 'payment-methods') {
    paymentTab.style.display = 'block';
    paymentBtn.className = 'px-6 py-3 rounded-md font-medium text-white shadow hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 transform';
    paymentBtn.style.backgroundColor = '#6FAD00';
  } else if (tabName === 'transaction-flows') {
    flowsTab.style.display = 'block';
    flowsBtn.className = 'px-6 py-3 rounded-md font-medium text-white shadow hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 transform';
    flowsBtn.style.backgroundColor = '#6FAD00';
  }
}

// Initialize tabs when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
  // Initialize with payment methods tab active
  switchTab('payment-methods');
});

// Make function globally available
window.switchTab = switchTab;


🛠️ BNPLX Payment Gateway for WooCommerce – Installation Guide

📋 Plugin Overview

✅ Prerequisites

📩 Step 1: Request Credentials

🔌 Step 2: Install the Plugin

🔧 Core Settings

🏷️ Label & Display

🔑 API Credentials

💳 Payment Behavior

⚙️ Step 3: Configure the Plugin

🧪 Step 4: Test the Integration

🚀 Step 5: Go Live

📞 Support

WooCommerce Plugin

Your unified BNPL orchestrator for smarter payment processing

GreenBanana

Match. Connect. Convert. Your unified BNPL orchestrator for smarter payment processing

Welcome to GreenBanana

What is BNPL?

Buy Now, Pay Later (BNPL)

About Us

BNPL Flow

Environments

Quickstart

Account Setup

Get API Keys

Setup Connector

First payment

Authentication

Authentication & API Keys

Dashboard Overview

Webhook

Error Codes

Rate Limits

Go-live Checklist

FAQs

Overview

**Use this API to initiate a payment.**

When you create a payment, it is stored with GreenBanana. At this stage, the payment intent is generated but requires confirmation from either the user or merchant to proceed.

Once confirmed (by including confirm=true and payment_method), the request is sent to the selected BNPL provider to verify if the customer is eligible for credit to proceed with the Buy Now, Pay Later (BNPL) provider.

The following request body example demonstrates how to create a payment with GreenBanana, which can be processed through any BNPL provider.

**Note:** The `metadata` field is used to carry additional information required by the BNPL provider. We have compiled all necessary metadata fields to ensure compatibility with any BNPL provider.

Payments - Create

**Use this API to confirm the payment and forward it to the BNPL provider.**

Alternatively, you can confirm the payment directly in the *Payments/Create* API by setting `confirm=true`. After confirmation, the payment may result in one of the following outcomes:

Once payments confirm is successfully completed, we will have payment status as `requires_capture` or `succeeded` indicating the amount for customer is authorized by the BNPL provider

1. **Fail** with a `failed` status.
2. **Transition** to a `requires_customer_action` status, along with a `next_action` block.
3. **Succeed**, with either:
- `succeeded` (for automatic capture), or
- `requires_capture` (for manual capture).

`BNPL providers typically use methods like `manual_capture` or `manual_multiple_capture` for capturing payments, as specified in the Payments Create request.

You can configure routing rules to process specific payments through specific connectors. If you would like to route a specific payment with specific connector you can also pass
"connector": ["connector_name"] to process the payment.


Payments - Confirm

To capture the funds for an uncaptured payment

Payments - Capture

A Payment could can be cancelled when it is in one of these statuses: `requires_payment_method`, `requires_capture`, `requires_confirmation`, `requires_customer_action`.

Payments - Cancel

To update the properties of a *PaymentIntent* object. This may include attaching a payment method, or attaching customer object or metadata fields after the Payment is created

Payments - Update

Retrieves a Payment. This API can also be used to get the status of a previously initiated payment or next action for an ongoing payment

Payments - Retrieve

Payments - List

Authorized amount for a payment can be incremented if it is in status: requires_capture

Payments - Incremental Authorization

Creates a session object or a session token for wallets like Apple Pay, Google Pay, etc. These tokens are used by Green Banana's SDK to initiate these wallets' SDK.

Payments - Session token

To retrieve the properties of a Payment Link. This may be used to get the status of a previously initiated payment or next action for an ongoing payment

Payments Link - Retrieve

External 3DS Authentication is performed and returns the AuthenticationResponse

Payments - External 3DS Authentication

Payments - Complete Authorize

Creates a refund against an already processed payment. In case of some processors, you can even opt to refund only a partial amount multiple times until the original charge amount has been refunded

Refunds - Create

Updates the properties of a Refund object. This API can be used to attach a reason for the refund or metadata fields

Refunds - Update

Retrieves a Refund. This may be used to get the status of a previously initiated refund

Refunds - Retrieve

Lists all the refunds associated with the merchant, or for a specific payment if payment_id is provided

Field	Description	Default
Enable BNPLX Payment	Toggle BNPLX on/off	`yes`
Hide at checkout for non-admin users	Restrict BNPLX to admins only	`yes`
Turn DEV mode on/off	Enable sandbox/dev mode	`yes`

Field	Description	Default
Checkout label	The label shown at checkout (e.g. “Pay later”)	`Pay later`
Show gender dropdown	Add gender field at checkout	`yes`
Show date of birth dropdown	Add date of birth field at checkout	`yes`

Field	Description
API url	Endpoint for BNPLX API (e.g., `https://api.staging.bnplx.com`)
API key	Found under “API Keys” > “Developers” in your BNPLX Dashboard
Publishable key	Also under “API Keys” > “Developers”
Payment response hash key	Used for webhook validation
Business profile ID	Found under “Business Profiles” in BNPLX Settings

Field	Description	Default
Capture method	How payments are captured: currently supports `manual_multiple`	`manual_multiple`
Order of payment methods	Control the display order. Possible values:
`invoice`, `direct_debit`, `installment_invoice`, `installment_direct_debit`, `subscription_invoice`, `subscription_direct_debit`
`invoice; direct_debit; installment_invoice; installment_direct_debit; subscription_invoice; subscription_direct_debit`

Installation & Setup

​🛠️ BNPLX Payment Gateway for WooCommerce – Installation Guide

​📋 Plugin Overview

​✅ Prerequisites

​📩 Step 1: Request Credentials

​🔌 Step 2: Install the Plugin

​⚙️ Step 3: Configure the Plugin

​🔧 Core Settings

​🏷️ Label & Display

​🔑 API Credentials

​💳 Payment Behavior

​🧪 Step 4: Test the Integration

​🚀 Step 5: Go Live

​📞 Support