@tap-payments/samsung-pay-button
TypeScript icon, indicating that this package has built-in type declarations

0.0.2-test • Public • Published

samsung-pay-button

Handling Samsung Pay button in React and vanilla JS

Install

This is a React module available through the npm registry. Installation is done using the npm install command:

npm install @tap-payments/samsung-pay-button

---------------------------- OR -------------------------

yarn add @tap-payments/samsung-pay-button

Examples

ES6

import React from 'react'
import {
	SamsungPayButton,
	ButtonStyle,
	SupportedNetworks,
	Scope,
	Environment,
	ButtonType,
	Locale
} from '@tap-payments/samsung-pay-button'

const App = () => {
	return (
		<SamsungPayButton
			// required (The public Key provided by Tap)
			publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
			// optional (The environment of the SDK and it can be one of these Environment)
			environment={Environment.Development}
			// optional (to enable the debug mode)
			debug
			// required (The merchant identifier provided by Tap)
			merchantIdentifier='merchant.tap.samsungpay.test'
			// 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,SamsungToken], by default it is TapToken)
			scope={Scope.TapToken}
			// optional (The supported networks for the Samsung 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 Samsung Pay button and it can be one of
			// these styles: [White,WhiteOutline,Black], by default it is WhiteOutline)
			buttonStyle={ButtonStyle.WhiteOutline}
			// optional (The locale of the Samsung Pay button and it can be one of these locales)
			locale={Locale.EN}
			// optional (The type of the Samsung Pay button and it can be one of these types)
			type={ButtonType.PLAIN}
			// 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)
			}}
		/>
	)
}

Vanilla JS

<!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>samsung pay button</title>
		<link rel="stylesheet" href="https://samsung-pay-button.b-cdn.net/build-0.0.8-test/main.css" />
		<script src="https://samsung-pay-button.b-cdn.net/build-0.0.8-test/main.js"></script>
	</head>
	<body>
		<div id="samsung-pay-button"></div>
		<script type="text/javascript">
			const { renderSamsungPayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
			renderSamsungPayButton(
				{
					// required
					publicKey: 'pk_test_xxxxxxxxxxxxxxxzh',
					// optional (The environment of the SDK and it can be one of these Environment)
					environment: Environment.Development,
					// optional (to enable the debug mode)
					debug: true,
					// required (The merchant identifier provided by Tap)
					merchantIdentifier: 'merchant.tap.samsungpay.test',
					merchant: {
						// required
						domain: 'example.com'
						// optional
						// id: '123...'
					},
					// required
					transaction: {
						// required
						currency: 'USD',
						// required
						amount: '100'
					},
					// optional
					scope: Scope.TapToken,
					// optional
					buttonStyle: ButtonStyle.WhiteOutline,
					// optional (The locale of the Samsung Pay button and it can be one of these locales)
					locale: Locale.EN,
					// optional (The type of the Samsung Pay button and it can be one of these types)
					type: ButtonType.PLAIN,
					// optional
					supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard],
					// 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
					onCancel: () => {
						console.log('onCancel')
					},
					// optional
					onError: (error) => {
						console.log('onError', error)
					},
					// optional
					onSuccess: async (data) => {
						console.log('onSuccess', data)
					}
				},
				'samsung-pay-button'
			)
		</script>
	</body>
</html>

Configurations

Name Type R/O Description
publicKey string required The public Key provided by Tap
environment Environment optional The environment of the SDK and it can be one of these environments Environment
debug boolean optional To enable the debug mode
merchantIdentifier string required The merchant identifier 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 Samsung Pay button
buttonStyle ButtonStyle optional The style of the Samsung Pay button
locale Locale optional The locale of the Samsung Pay button
type ButtonType optional The type of the Samsung 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

Readme

Keywords

none

Package Sidebar

Install

npm i @tap-payments/samsung-pay-button

Weekly Downloads

83

Version

0.0.2-test

License

ISC

Unpacked Size

59.3 kB

Total Files

42

Last publish

Collaborators

  • elsharkawy
  • waqast
  • hala.q
  • reham_alsabbagh
  • kalpanatap
  • sherifashraftap
  • sadbarkhattak
  • i.mousa
  • muhammadazhar007
  • mud_fahmi
  • haitham-tap
  • ahmedkaram-tap
  • mostafaabobakr.tap
  • aya_tap
  • mahmoudallam
  • a.safwat-tap
  • ali-sanad-tap
  • omar_saber