feat: Allow Apple Pay to be auto configured (#55)

* feat: Allow Apple Pay to be auto configured * chore: Bump package version * fix: Fix test * chore: Add link to Apple Pay fixture in nav.js
Rebilly · Feb 9, 2022 · 957cdfa · 957cdfa
1 parent 1b8c690
commit 957cdfa
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "1.1.5",
+    "version": "1.2.0",
     "description": "A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features",
     "main": "build/index.js",
     "author": "Rebilly",
@@ -123,13 +123,13 @@
             "**/*.spec.js"
         ]
     },
-  "resolutions": {
-    "yargs-parser": "^13.1.2",
-    "dot-prop": "^4.2.1",
-    "node-notifier": "^8.0.1",
-    "glob-parent": "^5.1.2",
-    "trim-newlines": "^3.0.1",
-    "node-forge": "^0.10.0",
-    "postcss": "^7.0.36"
-  }
+    "resolutions": {
+        "yargs-parser": "^13.1.2",
+        "dot-prop": "^4.2.1",
+        "node-notifier": "^8.0.1",
+        "glob-parent": "^5.1.2",
+        "trim-newlines": "^3.0.1",
+        "node-forge": "^0.10.0",
+        "postcss": "^7.0.36"
+    }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,7 @@ import { SUPPORTED_CARD_BRANDS } from './lib/constants';
 
 import {
     withFramePay,
+    withFramePayApplePayComponent,
     withFramePayBankComponent,
     withFramePayCardComponent,
     withFramePayIBANComponent
@@ -25,6 +26,7 @@ export {
     withFramePayCardComponent,
     withFramePayBankComponent,
     withFramePayIBANComponent,
+    withFramePayApplePayComponent,
     FramePayComponentProps,
     FramePayCardProps,
     FramePayBankProps,

diff --git a/src/lib/components/elements/applepay-element.tsx b/src/lib/components/elements/applepay-element.tsx
@@ -7,7 +7,7 @@ export default class ApplePayElement extends BaseElement<
     ApplePayState
 > {
     setupElement() {
-        const { Rebilly, onTokenReady, extraData, form } = this.props;
+        const { Rebilly, onTokenReady } = this.props;
 
         const makeElement = () => {
             // elementNode already checked in BaseElement.handleSetupElement
@@ -20,10 +20,7 @@ export default class ApplePayElement extends BaseElement<
             }
 
             try {
-                return Rebilly.applePay.mount(this.elementNode, {
-                    extraData,
-                    form
-                });
+                return Rebilly.applePay.mount(this.elementNode);
             } catch (e) {
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,

diff --git a/src/lib/components/injector.tsx b/src/lib/components/injector.tsx
@@ -9,6 +9,7 @@ import DigitalWalletElementComponent from './elements/digitalwallet-element';
 import IBANElementComponent from './elements/iban-element';
 
 import {
+    FramePayApplePayProps,
     FramePayBankProps,
     FramePayCardProps,
     FramePayComponentProps,
@@ -201,7 +202,7 @@ const elementsFabric = (type: PaymentElements): object => {
             (data: FramePayContext) =>
                 ({
                     Rebilly: makeRebillyProps(data)
-                } as DigitalWalletProps)
+                } as ApplePayProps)
         );
 
         return {
@@ -371,3 +372,35 @@ export function withFramePayIBANComponent<OriginalProps extends object>(
         }
     };
 }
+
+export function withFramePayApplePayComponent<OriginalProps extends object>(
+    WrappedComponent: React.ComponentType<OriginalProps & FramePayApplePayProps>
+) {
+    const elements = elementsFabric('applePay');
+    return class extends React.Component<
+        OriginalProps & FramePayApplePayProps,
+        {}
+    > {
+        static readonly displayName = `withFramePayApplePayComponent${name}(${WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component'})`;
+
+        render() {
+            return (
+                <ContextConsumer>
+                    {(data: FramePayContext) => {
+                        return (
+                            <WrappedComponent
+                                {...{
+                                    ...this.props,
+                                    ...elements,
+                                    Rebilly: makeRebillyProps(data)
+                                }}
+                            />
+                        );
+                    }}
+                </ContextConsumer>
+            );
+        }
+    };
+}
diff --git a/test/e2e/fixtures/apple-pay.html b/test/e2e/fixtures/apple-pay.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Test Apple Pay</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script src="apple-pay.js"></script>
+    <script src="nav.js"></script>
+</body>
+
+</html>
diff --git a/test/e2e/fixtures/apple-pay.js b/test/e2e/fixtures/apple-pay.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import { FramePayProvider, withFramePayApplePayComponent } from '../../../build';
+import { ReactVersion } from './util';
+import './style.css';
+
+const params = {
+    publishableKey: 'pk_sandbox_S95ATjj4hXZs-T9QpZq1ENl2tDSrUkCGv98utc9',
+    organizationId: '5977150c-1c97-4dd4-9860-6bb2bab070b4',
+    websiteId: 'demo.com',
+    transactionData: {
+        amount: 10,
+        currency: 'USD',
+        label: 'Purchase label 1',
+    },
+};
+
+class ApplePayElementComponent extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            token: {
+                error: null,
+                data: null
+            }
+        };
+    }
+
+    render() {
+        return (<div>
+            <h2>{this.props.title}</h2>
+            <h3>FramePay version: {this.props.Rebilly.version}</h3>
+            <div className="flex-wrapper">
+                <div className="example-2">
+                    <this.props.ApplePayElement />
+                </div>
+            </div>
+        </div>);
+    }
+}
+
+const ApplePayElement = withFramePayApplePayComponent(ApplePayElementComponent);
+
+class App extends Component {
+
+    render() {
+        return (<FramePayProvider injectStyle
+                                  {...params}
+                                  onReady={() => {
+                                      console.log('FramePayProvider.onReady');
+                                  }}
+                                  onError={(err) => {
+                                      console.log('FramePayProvider.onError', err);
+                                  }}>
+            <div>
+                {ReactVersion()}
+                <ApplePayElement />
+            </div>
+        </FramePayProvider>);
+    }
+}
+
+ReactDOM.render(<App/>, document.getElementById('app'));
diff --git a/test/e2e/fixtures/nav.js b/test/e2e/fixtures/nav.js
@@ -1,6 +1,7 @@
 setTimeout(() => {
     const node = document.createElement('ul');
     [
+        'apple-pay',
         'bank-separate',
         'card-separate',
         'card-separate-rebilly-fields',

diff --git a/test/unit/specs/index.spec.ts b/test/unit/specs/index.spec.ts
@@ -4,6 +4,7 @@ const exportKeys: ReadonlyArray<string> = [
     'SUPPORTED_CARD_BRANDS',
     'FramePayProvider',
     'withFramePay',
+    'withFramePayApplePayComponent',
     'withFramePayCardComponent',
     'withFramePayBankComponent',
     'withFramePayIBANComponent'

diff --git a/types/elements.d.ts b/types/elements.d.ts
@@ -37,8 +37,6 @@ interface ApplePayProps extends RebillyProps {
     readonly Rebilly: RebillyProps;
     readonly id?: string;
     readonly onTokenReady?: (data: string) => void;
-    readonly form: HTMLElement | React.Component;
-    readonly extraData: Object;
 }
 
 interface DigitalWalletProps extends PaymentComponentProps {

diff --git a/types/rebilly/settings.d.ts b/types/rebilly/settings.d.ts
@@ -83,12 +83,21 @@ interface FramePayCardSettings {
     readonly brands?: FramePayCardBrands;
 }
 
+interface ApplePayDisplayOptions {
+    readonly buttonType: string;
+    readonly buttonColor: string;
+    readonly buttonLanguage: string;
+}
+
 interface FramePaySettings {
     readonly publishableKey: string;
+    readonly organizationId: string;
+    readonly websiteId: string;
     readonly locale?: supportedLocales;
     readonly icon?: FramePaySettingsIcon;
     readonly placeholders?: FramePaySettingsPlaceholders;
     readonly style?: FramePaySettingsStyles;
     readonly classes?: FramePaySettingsClasses;
     readonly card?: FramePayCardSettings;
+    readonly applePay?: ApplePayDisplayOptions;
 }