Home
Guides

Apple Pay Vanilla JS KIT

This guide will walk you through the process of integrating Apple Pay into your HTML page using the Tap Payments package. Apple Pay offers a seamless and secure way for users to make payments online.

Pre-requesites

  • Your domain is registered with Apple Register Your Domain
  • An HTML page where you want to integrate Apple Pay.
  • Access to your Tap Payments account.
  • API credentials, including a public key.

Install

Start by including the necessary scripts and stylesheets for Apple Pay in the section of your HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Pay Button Integration</title>
    <!-- Include the Apple Pay Button CSS and JavaScript -->
    <link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.13/main.css">
    <script src="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.13/main.js"></script>
</head>
<body>
    <!-- Create a container for the Apple Pay button -->
    <div id="apple-pay-button"></div>
    <!-- Include the JavaScript to render the button -->
    <script type="text/javascript">
        // JavaScript code for Apple Pay integration
        // ...
    </script>
</body>
</html>

Import

Import the required components and constants:

const { renderApplePayButton, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } = window.TapSDKs;

Configuration

Create a container

with the id apple-pay-button where the Apple Pay button will be rendered. Configure the Apple Pay button:

renderApplePayButton(
    {
        publicKey: 'pk_test_7xxxxxxxxx',
        environment: Environment.Development,
        scope: Scope.TapToken,
        merchant: {
            domain: 'tp-txxxxxxxx',
            id: 'merchant_xxxxxxxxxx'
        },
        transaction: {
            currency: 'SAR',
            amount: '3'
        },
        acceptance: {
            supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
            supportedCards: ['DEBIT', 'CREDIT'],
            supportedCardsWithAuthentications: ['3DS', 'EMV']
        },
        customer: {
            id: 'cus_xxx',
            name: [
                {
                    locale: 'en',
                    first: 'test',
                    last: 'tester',
                    middle: 'test'
                }
            ],
            contact: {
                email: '[email protected]',
                phone: {
                    number: '10XXXXXX56',
                    countryCode: '+20'
                }
            }
        },
        interface: {
            locale: Locale.EN,
            theme: ThemeMode.DARK,
            type: ButtonType.BUY,
            edges: Edges.CURVED
        },
        onCancel: async () => {
            console.log('Payment cancelled');
        },
        onError: async (error) => {
            console.log('Payment error:', error);
        },
        onSuccess: async (data) => {
            console.log('Payment successful:', data);
        },
        onReady: async () => {
            console.log('Apple Pay button is ready');
        }
    },
    'apple-pay-button' // Container ID
);

📘

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

Conclusion

By following this guide, you've successfully integrated Apple Pay into your HTML page. Your users can now enjoy a convenient and secure payment experience.

Updated about 1 year ago