Handling Samsung Pay button in React and vanilla JS
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
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)
}}
/>
)
}
<!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>
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 |