Angular集成Instamojo：如何关闭Checkout Script打开的弹窗？

I get it, integrating Instamojo in Angular can feel tricky when the official docs don't spell out every detail—especially closing the modal programmatically. Let's fix this for you.

First, the good news: Instamojo's JS SDK actually has a built-in close() method that you can use to shut the modal manually. The issue in your current code is that you're not leveraging this method, and your handler setup can be adjusted to fit better with Angular's component structure.

Step 1: Update Your Component Code #

Let's refactor your code to include the close method and organize handlers properly within the component:

import { Component } from '@angular/core';
declare var Instamojo: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-test';
  
  constructor(){ 
    // Move configuration inside the component to bind context correctly
    Instamojo.configure({
      handlers: {
        onOpen: () => this.onOpenHandler(),
        onClose: () => this.onCloseHandler(),
        onSuccess: () => this.onPaymentSuccessHandler(),
        onFailure: () => this.onPaymentFailureHandler()
      }
    });
  }

  // Open the Instamojo modal
  openPaymentModal(){
    Instamojo.open('https://www.instamojo.com/@syntagsprofessionalservices/310c0309f6e344a08447ab7167dcf7c8')
  }

  // Method to programmatically close the modal
  closePaymentModal() {
    // Add checks to avoid runtime errors
    if (typeof Instamojo !== 'undefined' && typeof Instamojo.close === 'function') {
      Instamojo.close();
    }
  }

  onPaymentFailureHandler() { 
    console.log('Payment failed'); 
    // You can add cleanup logic here if needed
  }

  onPaymentSuccessHandler() { 
    console.log('Payment succeeded'); 
    // Maybe navigate the user to a success page here
  }

  onCloseHandler() { 
    console.log('Modal closed'); 
  }

  onOpenHandler() { 
    console.log('Modal opened'); 
  }
}

Step 2: Add a Close Trigger in Your Template #

In your app.component.html, add a button (or any element) to trigger the close method:

<button (click)="openPaymentModal()">Open Payment Modal</button>
<button (click)="closePaymentModal()">Close Payment Modal</button>

Key Notes: #

• Context Binding: By using arrow functions in the Instamojo.configure() handlers, we ensure that the this keyword refers to your Angular component—so you can call other component methods inside these handlers if needed.
• Safety Checks: The closePaymentModal() method includes checks to make sure the Instamojo SDK is loaded and the close() method exists, preventing unexpected errors.
• Official SDK Method: Instamojo.close() is the official way to shut the modal; it handles removing the modal iframe and cleaning up any attached event listeners automatically.

Verify SDK Loading #

Make sure you've added the Instamojo checkout script in your index.html (usually in the <head> section):

<script src="https://js.instamojo.com/v1/checkout.js"></script>

This should resolve your issue with closing the Instamojo modal programmatically in Angular.

内容的提问来源于stack exchange，提问作者Ashish