@tap-payments/apple-pay-button 0.0.5-test → 0.0.6-staging

package/README.md

@@ -22,96 +22,219 @@ yarn add @tap-payments/apple-pay-button
 
 ### ES6
 
-```js
+```javascript
 import React from 'react'
-import { ApplePayButton, ButtonStyle, SupportedNetworks, Scope } from '@tap-payments/apple-pay-button'
+import {
+ ApplePayButton,
+ ThemeMode,
+ SupportedNetworks,
+ Scope,
+ Environment,
+ Locale,
+ ButtonType,
+ Edges
+} from '@tap-payments/apple-pay-button'
 
 const App = () => {
-	return (
-		<ApplePayButton
-			// required (The public Key provided by Tap)
-			publicKey={'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxzh'}
-			// required
-			merchant={{
-				// required (The merchant domain name)
-				domain: 'example.com',
-				// optional (The merchant identifier provided by Tap)
-				id: '1xxxxx8'
-			}}
-			// required
-			transaction={{
-				// required (The amount to be charged)
-				amount: '12',
-				// required (The currency of the amount)
-				currency: 'KWD'
-			}}
-			// optional (The scope of the SDK and it can be one of these scopes:
-			// [TapToken,AppleToken], by default it is TapToken)
-			scope={Scope.TapToken}
-			// optional (The supported networks for the Apple Pay button and it
-			// can be one of these networks: [Mada,Visa,MasterCard], by default
-			// we bring all the supported networks from tap merchant configuration)
-			supportedNetworks={[SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]}
-			// optional (The style of the Apple Pay button and it can be one of
-			// these styles: [White,WhiteOutline,Black], by default it is WhiteOutline)
-			buttonStyle={ButtonStyle.WhiteOutline}
-			// optional (The billing contact information)
-			billingContact={{
-				// required
-				email: {
-					// required
-					address: 'test@gmail.com'
-				},
-				// required
-				name: {
-					// required
-					first: 'test',
-					// required
-					last: 'tester',
-					// optional
-					middle: 'test'
-				},
-				// required
-				phone: {
-					number: '10XXXXXX56',
-					code: '+20'
-				}
-			}}
-			// optional (A callback function that will be called when you cancel
-			// the payment process)
-			onCancel={() => console.log('cancelled')}
-			// optional (A callback function that will be called when you have an error)
-			onError={(err) => console.error(err)}
-			// optional (A async function that will be called after creating the token
-			// successfully)
-			onSuccess={async (token) => {
-				// do your stuff here...
-				console.log(token)
-			}}
-		/>
-	)
+ return (
+  <ApplePayButton
+   // The public Key provided by Tap
+   publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
+   //The environment of the SDK and it can be one of these environments
+   environment={Environment.Development}
+   //to enable the 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 and it can be one of these scopes:
+   // [TapToken,AppleToken], by default it is TapToken)
+   scope={Scope.TapToken}
+   acceptance={{
+    // The supported networks for the Apple Pay button and it
+    // can be one of these networks: [Mada,Visa,MasterCard], by default
+    // we bring all the supported networks from tap merchant configuration
+    supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
+    supportedCards : ["DEBIT","CREDIT"],
+         supportedCardsWithAuthentications : ["3DS","EMV"]
+   }}
+   // The billing contact information
+   customer={{
+    id: 'cus_xxx',
+    name: [
+     {
+      //"en or ar",
+      lang: Locale.EN,
+      // "First name of the customer.",
+      first: 'test',
+      //"Last name of the customer.",
+      last: 'tester',
+      // "Middle name of the customer.",
+      middle: 'test'
+     }
+    ],
+    // Defines the contact details for the customer & to be used in creating the billing contact info in Apple pay request
+    contact: {
+     //"The customer's email",
+     email: 'test@gmail.com',
+     //"The customer's phone number"
+     phone: {
+      //"The customer's country code",
+      countryCode: '+20',
+      //"The customer's phone number
+      number: '10XXXXXX56'
+     }
+    }
+   }}
+   //for styling button
+   interface={{
+    //The locale of the Apple Pay button and it can be one of these locales:[EN,AR]
+    locale: Locale.EN,
+    // The theme of the Apple Pay button and it can be one of
+    // these values : [light,Dark], by default it is detected from user device
+    theme: ThemeMode.DARK,
+    // The type of the Apple Pay
+    type: ButtonType.BUY,
+    // The border of the Apple Pay button and it can be one of these values:[curved,straight]
+    edges: Edges.CURVED
+   }}
+   // optional (A callback function that will be called when you cancel
+   // the payment process)
+   onCancel={() => console.log('cancelled')}
+   // optional (A callback function that will be called when you have an error)
+   onError={(err) => console.error(err)}
+   // optional (A async function that will be called after creating the token
+   // successfully)
+   onSuccess={async (token) => {
+    // do your stuff here...
+    console.log(token)
+   }}
+   // optional (A callback function that will be called when you button is clickable)
+   onReady={() => {
+    console.log('Ready')
+   }}
+   // optional (A callback function that will be called when the button clicked)
+   onClick={() => {
+    console.log('Clicked')
+   }}
+  />
+ )
 }
 ```
 
 ### Vanilla JS
 
-```js
-// coming soon...
+```html
+<!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</title>
+		<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-0.0.36-test/main.css" />
+		<script src="https://tap-sdks.b-cdn.net/apple-pay/build-0.0.36-test/main.js"></script>
+	</head>
+
+	<body>
+		<div id="apple-pay-button"></div>
+		<script type="text/javascript">
+			const { renderApplePayButton, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } =
+				window.TapSDKs
+			renderApplePayButton(
+				{
+					publicKey: 'pk_test_7xxxxxxxxx',
+					environment: Environment.Sandbox,
+					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: 'test@gmail.com',
+							phone: {
+								number: '10XXXXXX56',
+								countryCode: '+20'
+							}
+						}
+					},
+					interface: {
+						locale: Locale.EN,
+						theme: ThemeMode.DARK,
+						type: ButtonType.BUY,
+						edges: Edges.CURVED
+					},
+					onCancel: async () => {
+						console.log('onCancel')
+					},
+					onError: async (error) => {
+						console.log('onError', error)
+					},
+					onSuccess: async (data) => {
+						console.log('onSuccess', data)
+					},
+					onReady: async () => {
+						console.log('onReady')
+					}
+				},
+				'apple-pay-button'
+			)
+		</script>
+	</body>
+</html>
 ```
 
 ## Configurations
 
-| Name                 | Type                  | R/O        | Description                                                                |
-| -------------------- | --------------------- | ---------- | -------------------------------------------------------------------------- |
-| publicKey            | `string`              | `required` | The public Key provided by Tap                                             |
-| merchant.id          | `string`              | `optional` | The merchant identifier provided by Tap                                    |
-| merchant.domain      | `string`              | `required` | The merchant domain name                                                   |
-| transaction.amount   | `string`              | `required` | The amount to be charged                                                   |
-| transaction.currency | `string`              | `required` | The currency of the amount                                                 |
-| scope                | `Scope`               | `optional` | The scope of the SDK                                                       |
-| supportedNetworks    | `SupportedNetworks[]` | `optional` | The supported networks for the Apple Pay button                            |
-| buttonStyle          | `ButtonStyle`         | `optional` | The style of the Apple Pay button                                          |
-| billingContact       | `BillingContact`      | `optional` | The billing contact information                                            |
-| onCancel             | `function`            | `optional` | A callback function that will be called when you cancel the process        |
-| onError              | `function`            | `optional` | A callback function that will be called when you have an error             |
-| onSuccess            | `function`            | `optional` | A async function that will be called after creating the token successfully |
+| Name                                         | Type         | R/O        | Description                                                                      |
+| -------------------------------------------- | ------------ | ---------- | -------------------------------------------------------------------------------- |
+| publicKey                                    | `string`     | `required` | The public Key provided by Tap                                                   |
+| environment                                  | `enum`       | `optional` | The environment of the SDK and it can be one of these environments `Environment` |
+| debug                                        | `boolean`    | `optional` | To enable the debug mode                                                         |
+| merchant.id                                  | `string`     | `required` | The merchant identifier provided by Tap                                          |
+| merchant.domain                              | `string`     | `required` | The merchant domain name                                                         |
+| transaction.amount                           | `string`     | `required` | The amount to be charged                                                         |
+| transaction.currency                         | `string`     | `required` | The currency of the amount                                                       |
+| scope                                        | `enum`       | `optional` | The scope of the SDK                                                             |
+| acceptance.supportedBrands                   | `array`      | `optional` | The supported networks for the Apple Pay button                                  |
+| acceptance.supportedCards                    | `array`      | `optional` | The supported cards for the Apple Pay button                                     |
+| acceptance.supportedCardsWithAuthentications | `array`      | `optional` | The supported cards with authentications for the Apple Pay button                |
+| interface.theme                              | `enum`       | `optional` | The theme of the Apple Pay button                                                |
+| interface.locale                             | `Locale`     | `optional` | The locale of the Apple Pay button                                               |
+| interface.type                               | `ButtonType` | `optional` | The type of the Apple Pay button                                                 |
+| interface.edges                              | `ButtonType` | `optional` | The border of the Apple Pay button                                               |
+| customer                                     | `object`     | `optional` | The Customer details information                                                 |
+| onCancel                                     | `function`   | `optional` | A callback function that will be called when you cancel the process              |
+| onError                                      | `function`   | `optional` | A callback function that will be called when you have an error                   |
+| onSuccess                                    | `function`   | `optional` | A async function that will be called after creating the token successfully       |
+| onClick                                      | `function`   | `optional` | A callback function that will be called when the button clicked                  |
+| onReady                                      | `function`   | `optional` | A callback function that will be called when you button is clickable             |

package/build/@types/ApplePayButtonProps.d.ts

@@ -0,0 +1,56 @@
+import { type ButtonSDKProps } from '@tap-payments/acceptance-sdk';
+import { CheckoutProfileResponse } from './checkoutProfile';
+import { MerchantCapabilities, SupportedNetworks, IntegrationType } from './enums';
+export interface ApplePayRequestData {
+    countryCode: string;
+    currencyCode: string;
+    merchantCapabilities: Array<MerchantCapabilities>;
+    supportedNetworks: Array<SupportedNetworks>;
+    billingContact?: {
+        phoneNumber?: string;
+        emailAddress?: string;
+        givenName: string;
+        familyName: string;
+    };
+    total: {
+        label: string;
+        amount: number;
+    };
+}
+export interface ApplePayDataToLunchSDKFromMerchantSide {
+    headers: Record<string, any>;
+    BASE_URL: string;
+    merchant: Record<string, any>;
+    applePayRequestData: ApplePayRequestData;
+    debug?: boolean;
+    applePaySDKVersion?: number;
+}
+export type Acceptance = Exclude<ButtonSDKProps['acceptance'], undefined>;
+export type ProfileData = Exclude<Exclude<ButtonSDKProps['metadata'], undefined>['profileData'], undefined>;
+export type Transaction = Exclude<ButtonSDKProps['transaction'], undefined>;
+export interface ApplePayButtonProps extends ButtonSDKProps {
+    merchant: ButtonSDKProps['merchant'] & {
+        identifier?: string;
+    };
+    onClick?: (data?: ApplePayDataToLunchSDKFromMerchantSide) => void;
+    integration?: IntegrationType;
+}
+export interface MerchantValidationRequestData {
+    validationUrl: string;
+    origin: string;
+    merchantId: string;
+    merchantName: string;
+    merchantIdentifier: string;
+}
+export interface MerchantResponse {
+    id: string;
+    name: string;
+    country_code: string;
+    session_token: string;
+    [other: string]: string;
+}
+export interface MetaData {
+    merchant: MerchantResponse;
+    payment_options: CheckoutProfileResponse['payment_options'];
+    headers: Record<string, string>;
+}

package/build/@types/ApplePayButtonProps.js

@@ -0,0 +1 @@
+export {};

package/build/@types/charge.d.ts

@@ -0,0 +1,56 @@
+export interface ChargeRequestBody {
+    source: {
+        id: string;
+    };
+    ipaddress?: string;
+    amount: number;
+    currency: string;
+    selected_amount?: number;
+    selected_currency?: string;
+    product: string;
+    threeDSecure?: boolean;
+    save_card: boolean;
+    customer: {
+        id?: string;
+        first_name?: string;
+        middle_name?: string;
+        last_name?: string;
+        email?: string;
+        phone?: {
+            country_code: string;
+            number: string;
+        };
+    };
+    hashstring?: string;
+    metadata?: Record<string, string>;
+    post?: {
+        url: string;
+    };
+    redirect?: {
+        url: string;
+    };
+    merchant?: {
+        id: string;
+    };
+    order?: {
+        id: string;
+    };
+    payment_agreement?: {
+        id: string;
+        contract?: {
+            id: string;
+        };
+    };
+    destinations?: Record<string, any>;
+    reference?: {
+        order?: string;
+        transaction?: string;
+    };
+    description?: string;
+}
+export interface AuthorizeRequestBody extends ChargeRequestBody {
+    auto?: {
+        type: string;
+        time: string;
+    };
+}

package/build/@types/charge.js

@@ -0,0 +1 @@
+export {};

package/build/@types/checkoutProfile.d.ts

@@ -0,0 +1,216 @@
+import { SupportedNetworks, ThemeMode } from '..';
+export interface CheckoutProfileRequest {
+    supported_payment_methods: string[];
+    supported_currencies: string[];
+    transaction_mode: string;
+    currency: string;
+    merchant_id: string;
+    total_amount: number;
+    order: {
+        id?: string;
+        amount: number;
+        currency: string;
+        description?: string;
+        metadata?: Record<string, string>;
+        customer?: {
+            id?: string;
+            email?: string;
+            first_name?: string;
+            last_name?: string;
+            phone?: {
+                country_code: string;
+                number: string;
+            };
+        };
+        items: {
+            quantity: number;
+            amount: number;
+            currency: string;
+            name: string;
+            description: string;
+        }[];
+        merchant: {
+            id: string;
+        };
+    };
+}
+export interface CheckoutProfileResponse {
+    status: string;
+    merchant: MerchantResponse;
+    assests: Assests;
+    payment_options: Paymentoptions;
+    session: string;
+}
+interface Paymentoptions {
+    id: string;
+    object: string;
+    payment_methods: PaymentMethod[];
+    currency: string;
+    country: string;
+    settlement_currency: string;
+    supported_currencies: Supportedcurrency[];
+    api_version: string;
+    order: Order;
+}
+interface Order {
+    id: string;
+    amount: number;
+    currency: string;
+    customer: {
+        id?: string;
+        email: string;
+        phone?: {
+            country_code: string;
+            number: string;
+        };
+        first_name?: string;
+        last_name?: string;
+    };
+    items: Array<OrderItem>;
+}
+interface OrderItem {
+    name: string;
+    amount: number;
+    currency: string;
+    quantity: number;
+    requires_shipping: boolean;
+    description: string;
+}
+interface Supportedcurrency {
+    symbol: string;
+    name: string;
+    flag: string;
+    decimal_digit: number;
+    selected: boolean;
+    rate: number;
+    logos: Logos2;
+    order_by: number;
+    currency: string;
+    amount: number;
+}
+interface Logos2 {
+    dark: Disabled;
+    light: Disabled;
+    light_mono: Disabled;
+    dark_colored: Disabled;
+}
+export interface PaymentMethod {
+    id: string;
+    name: string;
+    name_ar: string;
+    image: string;
+    payment_type: string;
+    supported_card_brands: SupportedNetworks[];
+    supported_currencies: string[];
+    order_by: number;
+    cc_markup: number;
+    asynchronous: boolean;
+    threeDS: string;
+    api_version: number;
+    api_version_minor: number;
+    logos: Logos;
+    payment_order_type: string;
+    button_style: Buttonstyle;
+    display_name: string;
+    default_currency: string;
+    identifier?: string;
+}
+interface Buttonstyle {
+    background: Background2;
+    title_asset: 'https://tap-assets.b-cdn.net/action-button/{theme}/{lang}/mastercard';
+}
+interface Background2 {
+    light: Light2;
+    dark: Light2;
+    light_mono: Light2;
+    dark_colored: Light2;
+}
+interface Light2 {
+    base_color: string;
+    background_colors: string[];
+}
+interface Logos {
+    dark: Dark2;
+    light: Dark2;
+    light_mono: Dark2;
+    dark_colored: Dark2;
+}
+interface Dark2 {
+    svg: string;
+    png: string;
+    disabled: Disabled;
+    currency_widget: Disabled;
+    card_icon: Disabled;
+}
+interface Disabled {
+    svg: string;
+    png: string;
+}
+interface Assests {
+    localisation: Localisation;
+    theme: Theme;
+    web: Theme;
+}
+type Theme = Record<ThemeMode, string> & {
+    card: {
+        light: string;
+        dark: string;
+    };
+};
+interface Localisation {
+    url: string;
+    card: {
+        url: string;
+    };
+}
+interface MerchantResponse {
+    id: string;
+    api_version: string;
+    live_mode: boolean;
+    object: string;
+    name: string;
+    country_code: string;
+    logo: string;
+    background: Background;
+    contact: any[];
+    powered_by: boolean;
+    sdk_settings: Sdksettings;
+    session_token: string;
+    key_type: string;
+    encryption_key: string;
+    permissions: string[];
+    permission: Permission;
+}
+interface Permission {
+    card_wallet: boolean;
+    threeDSecure: boolean;
+    pci_dss: boolean;
+}
+interface Sdksettings {
+    status_display_duration: number;
+    otp_resend_interval: number;
+    otp_resend_attempts: number;
+}
+interface Background {
+    url: string;
+    mode: string;
+    color: Color;
+}
+interface Color {
+    dark: Dark;
+    light: Light;
+}
+interface Light {
+    color: string;
+    rectangle: Rectangle;
+    image: string;
+}
+interface Rectangle {
+    background: string;
+    'backdrop-filter': string;
+}
+interface Dark {
+    color: string;
+    image: string;
+}
+export {};

package/build/@types/checkoutProfile.js

@@ -0,0 +1 @@
+export {};