In this guide, we will walk you through the process of integrating the Tap Payments BenefitPay button into your web page using Vanilla JavaScript.

Setting HTML

Start by creating an HTML file. This will serve as the foundation for your payment integration. Include the necessary scripts to get things rolling:

<!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>Tap Payments Benefit Pay Integration</title>
    <!-- Include the Tap Payments Benefit Pay SDK -->
    <script src="https://tap-sdks.b-cdn.net/benefit-pay/build-1.0.4/main.js"></script>
</head>
<body>
    <!-- Create a container for the BenefitPay button -->
    <div id="benefit-pay-button"></div>
    
    <!-- Include the JavaScript to render the button -->
    <script type="text/javascript">
        const { renderBenefitPayButton, Edges, Environment, Locale, ThemeMode } = window.TapSDKs;
        // ... (Continue to Step 2)
    </script>
</body>
</html>

In this HTML setup, we're including the Tap Payments BenefitPay SDK and creating a container where the Apple Pay button will appear.

JavaScript Configuration

Now, let's dive into the JavaScript portion. We'll configure the BenefitPay button using Vanilla JavaScript:

// ... (Above HTML continues here)

renderBenefitPayButton(
    {
        operator: {
            publicKey: 'pk_test_XXXXXXXX'
        },
        environment: Environment.Development,
        debug: true,
        merchant: {
            id: 'merchant_xxxxxxxxxx'
        },
        transaction: {
            amount: '12',
            currency: 'BHD'
        },
        customer: {
            names: [
                {
                    lang: Locale.EN,
                    first: 'test',
                    last: 'tester',
                    middle: 'test'
                }
            ],
            contact: {
                email: '[email protected]',
                phone: {
                    countryCode: '20',
                    number: '1000000000'
                }
            }
        },
        interface: {
            locale: Locale.EN,
            edges: Edges.CURVED
        },
        onReady: () => {
            console.log('Ready');
        },
        onClick: () => {
            console.log('Clicked');
        },
        onCancel: () => console.log('Cancelled'),
        onError: (err) => console.log('onError', err),
        onSuccess: (data) => {
            console.log(data);
        }
    },
    'benefit-pay-button' // Container ID
);

In this JavaScript code, we're using Vanilla JavaScript to configure the Benefit Pay button. We set various options, including the public key, environment, merchant details, transaction information, and more.

Conclusion

By following this guide, you've successfully integrated the Tap Payments Benefit Pay button into your web page using the simplicity and control of Vanilla JavaScript. This approach gives you full control over your code, resulting in a lightweight solution that can be tailored to your business specific needs.