Home
Guides

ApplePay React KIT

This guide will walk you through the process of integrating Apple Pay into your React application using the Tap Payments NPM package. Apple Pay is a convenient way to allow users to make payments securely and efficiently.

Pre-requisites

Before you begin, make sure you have the following:

  • Node.js and npm must be installed on your deployment environment.
  • Your Domain is registered with Apple Register Your Domain
  • You are subscribed with Tap Payments.
  • API credentials, including a public test key.

Import Package

Import the necessary modules and components as follows:

import React from 'react';
import {
  ApplePayButton,
  ThemeMode,
  SupportedNetworks,
  Scope,
  Environment,
  Locale,
  ButtonType,
  Edges
} from '@tap-payments/apple-pay-button';

Configuration

Create a React component for your Apple Pay button, and configure it:

const App = () => {
  return (
    <ApplePayButton
      // The public Key provided by Tap
      publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
      // The environment of the SDK (Development or Live)
      environment={Environment.Development}
      // Enable debug mode
      debug
      merchant={{
        // The merchant domain name
        domain: 'example.com',
        // The merchant identifier provided by Tap
        id: '1xxxxx8'
      }}
      transaction={{
        // The amount to be charged
        amount: '12',
        // The currency of the amount
        currency: 'KWD'
      }}
      // The scope of the SDK (TapToken or AppleToken)
      scope={Scope.TapToken}
      acceptance={{
        // Supported networks for the Apple Pay button
        supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
        supportedCards: ["DEBIT", "CREDIT"],
        supportedCardsWithAuthentications: ["3DS", "EMV"]
      }}
      // The billing contact information
      customer={{
        id: 'cus_xxx',
        name: [
          {
            lang: Locale.EN,
            first: 'test',
            last: 'tester',
            middle: 'test'
          }
        ],
        contact: {
          email: '[email protected]',
          phone: {
            countryCode: '+20',
            number: '10XXXXXX56'
          }
        }
      }}
      // Interface settings for styling the button
      interface={{
        // The locale of the Apple Pay button (EN or AR)
        locale: Locale.EN,
        // The theme of the Apple Pay button (light or dark)
        theme: ThemeMode.DARK,
        // The type of the Apple Pay button (BUY)
        type: ButtonType.BUY,
        // The border style of the button (curved or straight)
        edges: Edges.CURVED
      }}
      // Optional callback functions
      onCancel={() => console.log('Payment cancelled')}
      onError={(err) => console.error('Error:', err)}
      onSuccess={async (token) => {
        // Handle successful payment
        console.log('Payment successful. Token:', token);
      }}
      onReady={() => {
        console.log('Button is ready');
      }}
      onClick={() => {
        console.log('Button clicked');
      }}
    />
  );
}

📘

Customise the configuration to match your specific requirements. Implement callback functions to handle events like cancellation, errors, and success.

Conclusion

By following this guide, you can easily integrate Apple Pay into your React application using the Tap Payments NPM package. This allows you to offer a seamless and secure payment experience to your users.

Updated about 1 year ago