Set up Samsung Pay
This topic describes how to use FramePay to tokenize payment card data from Samsung Pay.
1. Register your domain with Samsung Pay
To use Samsung Pay, you must register a domain, which is a manual process. Contact us for help with this process.
2. Obtain IDs and a publishable API key
When you first log in to Rebilly, you create an organization as part of the setup process. A default website is created when a new organization is created. For more information, see Organizations and websites.
- Log in or sign up to Rebilly.
- Obtain your organization ID and website ID:
- In the left navigation bar, press Settings .
- In the Management section, press My organization & websites.
- In the Organization details section, note the ID value.
- In the Website section, note the ID value.
- Obtain your publishable API key:
- In the left navigation bar, press Automations .
- In the Development section, press API keys.
- Optionally, if you have not created a publishable key:
- In top right of the screen, press Create API key.
- In the API key type section, select Publishable.
- Optionally, in the Organizations dropdown, select the organizations that can use the API key.
- Optionally, in the Allowed IPs field, enter the IP addresses that are permitted to use the API key.
- Press Save API key.
- Go to the API keys page.
- Select a publishable key and copy the Key value.
3. Set up Samsung Pay
This step describes how to use FramePay to tokenize payment card data from Samsung Pay.
Samsung Pay has limited support for devices and browsers. For more information, see the Samsung Pay Web Payments Integration Guide prerequisites.
To pass Samsung Pay authentication parameters, the initial transaction must be completed using the payment token, and not using a payment instrument created from the token.
After completing a transaction using the token, the payment instrument will be returned and can be re-used.
Samsung Pay authentication parameters are not persisted to the payment instrument but the gateway will have reference of this initial customer-facing transaction.
Creating a payment instrument from the token and using that will only include the basic card data (device PAN, expiry).
For more information, see Payment instruction.
Initial set up
Set up the library and provide the HTML.
Include the FramePay stylesheet
This adds default styles to FramePay elements on the page.
Include the FramePay script
This exposes FramePay in the global JS scope as Framepay.
Include the HTML mounting points
You must specify an empty HTML element where FramePay renders the Samsung Pay button.
Edit your checkout form to add new HTML element with a unique ID.
Configure FramePay
This step describes the basic set up for mounting.
Initialize
Initialize FramePay with a configuration object.
Rebilly data
Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.
Transaction data
Provide the transaction data. Samsung Pay requires amount, currency, and label.
Get the payment token
Mount FramePay onto your page and listen for a payment token.
Mount the Samsung Pay button
After initialization, mount the Samsung Pay button in the container element.
Listen for the generated payment token
When a customer completes the Samsung Pay flow, Rebilly creates a payment token.
To retrieve it, listen for the token-ready event.
- HTML
- JavaScript
1<!doctype HTML>2<HTML>3 <head>4 <link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet">5 <script src="https://framepay.rebilly.com/framepay.js"></script>6 </head>7 <body>8 <form>9 <div id="samsung-pay-mount"></div>10 </form>11 </body>12</HTML>1Framepay.initialize({2 publishableKey: 'pk_sandbox_123',3 organizationId: 'org-123',4 websiteId: 'website-123',5 transactionData: {6 currency: 'USD',7 amount: 10,8 label: 'Demo purchase label',9 lineItems: [10 {11 label: 'Subtotal',12 amount: '8.70',13 },14 {15 label: 'Tax',16 amount: '1.30',17 }18 ]19 },20});21Framepay.on('ready', function () {22 const samsungPay = Framepay.samsungPay.mount('#samsung-pay-mount');23});24Framepay.on('token-ready', (data) => {25 // At this point, you can use the token for other operations26 // for example to create a payment instrument or transaction27 console.log('Payment token:', data);28});Interactive example
To interact with this example, you must open this webpage in a Samsung mobile device.