TypeError: Object is not a constructor (evaluating 'new PaymentRequest(METHOD_DATA, DETAILS)')

Question

I got an error react-native-payments-reborn library when I tried to implement Apple Pay.

I got the error in the below line

    const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS);

Code is given below. Thanks in advance.

const PaymentRequest = require('react-native-payments-reborn').PaymentRequest;

const METHOD_DATA = [{
    supportedMethods: ['apple-pay'],
    data: {
        merchantIdentifier: 'merchant.apple.test',
        supportedNetworks: ['visa', 'mastercard', 'amex'],
        countryCode: 'US',
        currencyCode: 'USD'
    }
}];

const DETAILS = {
    id: 'basic-example',
    displayItems: [
        {
            label: 'Movie Ticket',
            amount: { currency: 'USD', value: '15.00' }
        },
        {
            label: 'Grocery',
            amount: { currency: 'USD', value: '5.00' }
        }
    ],
    /*shippingOptions: [{
        id: 'economy',
        label: 'Economy Shipping',
        amount: { currency: 'USD', value: '0.00' },
        detail: 'Arrives in 3-5 days' // `detail` is specific to React Native Payments
    }],*/
    total: {
        label: 'Enappd Store',
        amount: { currency: 'USD', value: '20.00' }
    }
};

const OPTIONS = {
    requestPayerName: true,
    requestPayerPhone: true,
    requestPayerEmail: true,
    requestShipping: true
};

export default class ApplePay extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};

        const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS);

        paymentRequest.addEventListener('shippingaddresschange', e => {
            const updatedDetails = getUpdatedDetailsForShippingAddress(paymentRequest.shippingAddress);

            e.updateWith(updatedDetails);
        });

        paymentRequest.addEventListener('shippingoptionchange', e => {
            const updatedDetails = getUpdatedDetailsForShippingOption(paymentRequest.shippingOption);

            e.updateWith(updatedDetails);
        });
    }

    render() {
       .....
    }
}

PaymentRequest.js

 // Types
import type {
  PaymentMethodData,
  PaymentDetailsInit,
  PaymentOptions,
} from './types';
    
export default class PaymentRequest {

  constructor(
    methodData: Array<PaymentMethodData> = [],
    details?: PaymentDetailsInit = [],
    options?: PaymentOptions = {}) 
  {
       ......
  }

    ......          

}

Answer 1

The supportedMethods must be 'https://apple.com/apple-pay' rather than 'apple-pay'.