Integrating the Patron Popup Verification Widget

Follow this start-to-finish tutorial to embed the official Patron perk verification popup button into your store checkout layout.

Select Tech Framework:

Step 1: Place the Verification Button Markup

Add a button element to your shopping cart or checkout payment form:

<button id="patron-discount-btn" type="button" class="patron-btn">
  Apply Patron Membership Perk
</button>

Step 2 & 3: Include Script & Initialize (JS)

<!-- Include Patron Widget Script -->
<script src="https://www.patron.com.ng/widget/v1.js"></script>

<script>
  // Initialize with your Merchant ID
  PatronWidget.init({
    merchantId: '00000000-0000-4000-c000-000000000001'
  });
</script>

Step 4: Handle the Success Callback & Apply Cart Discount

When verification succeeds, the onSuccess callback receives the member profile and perk discount details:

PatronWidget.open({
  onSuccess: function(result) {
    console.log('Member Name:', result.member.full_name);
    console.log('Membership Tier:', result.member.membership_tier);
    console.log('Discount Percent:', result.perk.discount_percent);
    
    // Example: Deduct 20% discount from cart order total
    const cartSubtotal = 10000;
    const discountAmount = cartSubtotal * (result.perk.discount_percent / 100);
    const finalTotal = cartSubtotal - discountAmount;
    
    updateCheckoutUI(finalTotal, discountAmount);
  }
});