Skip to content

Latest commit

 

History

History
205 lines (162 loc) · 3.65 KB

NativePayments.md

File metadata and controls

205 lines (162 loc) · 3.65 KB
Raw

NativePayments

createPaymentRequest(methodData, details, options)

Sends methodData, details and options over the bridge to initialize Apple Pay/Android Pay.

Arguments

  • methodData - PaymentMethodData
  • details - PaymentDetailsInit
  • ?options - PaymentOptions
Example 
const METHOD_DATA = [
  {
    supportedMethods: ['apple-pay'],
    data: {
      merchantIdentifier: 'merchant.com.your-app.namespace',
      supportedNetworks: ['visa', 'mastercard', 'amex'],
      countryCode: 'US',
      currencyCode: 'USD'
    }
  }
];

const DETAILS = {
  id: 'demo',
  displayItems: [
    {
      label: 'Movie Ticket',
      amount: { currency: 'USD', value: '15.00' }
    },
    {
      label: 'Shipping',
      amount: { currency: 'USD', value: '0.00' }
    }
  ],
  total: {
    label: 'Merchant Name',
    amount: { currency: 'USD', value: '15.00' }
  },
  shippingOptions: [
    {
      id: 'economy',
      label: 'Economy Shipping',
      amount: { currency: 'USD', value: '0.00' },
      detail: 'Arrives in 3-5 days',
      selected: true
    },
    {
      id: 'express',
      label: 'Express Shipping',
      amount: { currency: 'USD', value: '5.00' },
      detail: 'Arrives tomorrow'
    }
  ]
};

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

NativePayments.createPaymentRequest(METHOD_DATA, DETAILS, OPTIONS);

handleDetailsUpdate(details)

Sends details over the bridge to update Apple Pay/Android Pay.

Arguments

  • details - PaymentDetailsUpdate
Example 
NativePayments.handleDetailsUpdate({
  displayItems: [
    {
      label: 'Movie Ticket',
      amount: { currency: 'USD', value: '15.00' }
    },
    {
      label: 'Shipping',
      amount: { currency: 'USD', value: '5.00' }
    }
  ],
  total: {
    label: 'Merchant Name',
    amount: { currency: 'USD', value: '20.00' }
  },
  shippingOptions: [
    {
      id: 'economy',
      label: 'Economy Shipping',
      amount: { currency: 'USD', value: '0.00' },
      detail: 'Arrives in 3-5 days'
    },
    {
      id: 'express',
      label: 'Express Shipping',
      amount: { currency: 'USD', value: '5.00' },
      detail: 'Arrives tomorrow',
      selected
    }
  ]
});

canMakePayments()

Returns if Apple Pay/Android Pay is available given the device and the supportNetworks provided.

Arguments

Example 
NativePayments.canMakePayments();

canMakePaymentsUsingNetworks()

(IOS only) Returns if user has available cards at Apple Pay that matches passed networks.

Arguments

  • usingNetworks - Array
Example 
NativePayments
    .canMakePaymentsUsingNetworks(['Visa', 'AmEx', 'MasterCard'])
    .then(canMakePayments => {
        if (canMakePayments) {
            // do some stuff
        }
    });

show()

Displays Apple Pay/Android Pay to the user.

Example 
NativePayments.show();

abort()

Dismisses the Apple Pay/Android Pay sheet.

Example 
NativePayments.abort();

complete(paymentStatus)

Displays a success/failure animation and dismisses Apple Pay/Android Pay based on the payment status provided.

Arguments

  • paymentStatus - PaymentComplete
Example 
NativePayments.complete('success');