I have an persistent issue. When i makle a GET to the endpoint, this is my response:
"epochTimestamp": 1689705258191,
"expiresAt": 1689708858191,
"merchantSessionIdentifier": "SSH8907CA4E29424A14969C5450CA01D99E_C23A0D3024FAB8B12CBB67660B4C1B48ABF1272EC8B61399E3A647290C8BE67A",
"nonce": "6e127ad6",
"merchantIdentifier": "B06C8CE272C72F8CC8C496721B5AB7904427AC91188AB4F711A54FEC31B5CDE5",
"domainName": "ecommerce.bckd.co",
"displayName": "Bucked Up",
"signature": "308006092a864886f70d010702a0803080020101310d300b0609608648016503040201308006092a864886f70d0107010000a080308203e330820388a00302010202084c304149519d5436300a06082a8648ce3d040302307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b3009060355040613025553301e170d3139303531383031333235375a170d3234303531363031333235375a305f3125302306035504030c1c6563632d736d702d62726f6b65722d7369676e5f5543342d50524f4431143012060355040b0c0b694f532053797374656d7331133011060355040a0c0a4170706c6520496e632e310b30090603550406130255533059301306072a8648ce3d020106082a8648ce3d03010703420004c21577edebd6c7b2218f68dd7090a1218dc7b0bd6f2c283d846095d94af4a5411b83420ed811f3407e83331f1c54c3f7eb3220d6bad5d4eff49289893e7c0f13a38202113082020d300c0603551d130101ff04023000301f0603551d2304183016801423f249c44f93e4ef27e6c4f6286c3fa2bbfd2e4b304506082b0601050507010104393037303506082b060105050730018629687474703a2f2f6f6373702e6170706c652e636f6d2f6f63737030342d6170706c65616963613330323082011d0603551d2004820114308201103082010c06092a864886f7636405013081fe3081c306082b060105050702023081b60c81b352656c69616e6365206f6e207468697320636572746966696361746520627920616e7920706172747920617373756d657320616363657074616e6365206f6620746865207468656e206170706c696361626c65207374616e64617264207465726d7320616e6420636f6e646974696f6e73206f66207573652c20636572746966696361746520706f6c69637920616e642063657274696669636174696f6e2070726163746963652073746174656d656e74732e303606082b06010505070201162a687474703a2f2f7777772e6170706c652e636f6d2f6365727469666963617465617574686f726974792f30340603551d1f042d302b3029a027a0258623687474703a2f2f63726c2e6170706c652e636f6d2f6170706c6561696361332e63726c301d0603551d0e041604149457db6fd57481868989762f7e578507e79b5824300e0603551d0f0101ff040403020780300f06092a864886f76364061d04020500300a06082a8648ce3d0403020349003046022100be09571fe71e1e735b55e5afacb4c72feb445f30185222c7251002b61ebd6f55022100d18b350a5dd6dd6eb1746035b11eb2ce87cfa3e6af6cbd8380890dc82cddaa63308202ee30820275a0030201020208496d2fbf3a98da97300a06082a8648ce3d0403023067311b301906035504030c124170706c6520526f6f74204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b3009060355040613025553301e170d3134303530363233343633305a170d3239303530363233343633305a307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b30090603550406130255533059301306072a8648ce3d020106082a8648ce3d03010703420004f017118419d76485d51a5e25810776e880a2efde7bae4de08dfc4b93e13356d5665b35ae22d097760d224e7bba08fd7617ce88cb76bb6670bec8e82984ff5445a381f73081f4304606082b06010505070101043a3038303606082b06010505073001862a687474703a2f2f6f6373702e6170706c652e636f6d2f6f63737030342d6170706c65726f6f7463616733301d0603551d0e0416041423f249c44f93e4ef27e6c4f6286c3fa2bbfd2e4b300f0603551d130101ff040530030101ff301f0603551d23041830168014bbb0dea15833889aa48a99debebdebafdacb24ab30370603551d1f0430302e302ca02aa0288626687474703a2f2f63726c2e6170706c652e636f6d2f6170706c65726f6f74636167332e63726c300e0603551d0f0101ff0404030201063010060a2a864886f7636406020e04020500300a06082a8648ce3d040302036700306402303acf7283511699b186fb35c356ca62bff417edd90f754da28ebef19c815e42b789f898f79b599f98d5410d8f9de9c2fe0230322dd54421b0a305776c5df3383b9067fd177c2c216d964fc6726982126f54f87a7d1b99cb9b0989216106990f09921d00003182018830820184020101308186307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b300906035504061302555302084c304149519d5436300b0609608648016503040201a08193301806092a864886f70d010903310b06092a864886f70d010701301c06092a864886f70d010905310f170d3233303731383138333431385a302806092a864886f70d010934311b3019300b0609608648016503040201a10a06082a8648ce3d040302302f06092a864886f70d010904312204206380e03422682ab5e9cfa737daae5685eaff231e252f1905611ecd90fa7006df300a06082a8648ce3d0403020447304502210082f04e750bbb46b5870cec6055e17a235e7658b5f6e1101e22641614cb96e1d702205b156449d1e5573006889f18800f7fca2d5326cfeeb7cfb2ca59fb1e57eb25b2000000000000",
"operationalAnalyticsIdentifier": "Bucked Up:B06C8CE272C72F8CC8C496721B5AB7904427AC91188AB4F711A54FEC31B5CDE5",
"retries": 0,
"pspId": "B06C8CE272C72F8CC8C496721B5AB7904427AC91188AB4F711A54FEC31B5CDE5"
}
and this is the that I used to display the payment sheets. But nothing happen, is like session.onvalidatemerchante doesn't make anything:
export default function ApplePayButton() {
// Constants
const startApplePaySession = async () => {
if (window.ApplePaySession) {
const appleSession = window.ApplePaySession
// Define ApplePayPaymentRequest
const request = {
'countryCode': 'US',
'currencyCode': 'USD',
'merchantCapabilities': [
'supports3DS'
],
'supportedNetworks': [
'visa',
'masterCard',
'amex',
'discover'
],
'total': {
'label': 'Demo (Card is not charged)',
'type': 'final',
'amount': '2.00' // harcoded amount
}
}
const session = new appleSession(6, request)
session.onvalidatemerchant = async function(event) {
try {
const {data} = await getApplePay()
session.completeMerchantValidation(data)
} catch (error) {
console.log(error)
}
}
session.begin()
}
}
return (
<button
className='apple-pay-btn'
id='apple-btn'
onClick={startApplePaySession}
>
Button here
</button>
)
}
Please what I making wrong!!!!
Post
Replies
Boosts
Views
Activity
I have a persistent issue. When i make a GET to our endpoint, this is my response:
"expiresAt": 1689708858191,
"merchantSessionIdentifier": "SSH8907CA4E29424A14969C5450CA01D99E_C23A0D3024FAB8B12CBB67660B4C1B48ABF1272EC8B61399E3A647290C8BE67A",
"nonce": "6e127ad6",
"merchantIdentifier": "B06C8CE272C72F8CC8C496721B5AB7904427AC91188AB4F711A54FEC31B5CDE5",
"domainName": "ecommerce.bckd.co",
"displayName": "Bucked Up",
"signature": "308006092a864886f70d010702a0803080020101310d300b0609608648016503040201308006092a864886f70d0107010000a080308203e330820388a00302010202084c304149519d5436300a06082a8648ce3d040302307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b3009060355040613025553301e170d3139303531383031333235375a170d3234303531363031333235375a305f3125302306035504030c1c6563632d736d702d62726f6b65722d7369676e5f5543342d50524f4431143012060355040b0c0b694f532053797374656d7331133011060355040a0c0a4170706c6520496e632e310b30090603550406130255533059301306072a8648ce3d020106082a8648ce3d03010703420004c21577edebd6c7b2218f68dd7090a1218dc7b0bd6f2c283d846095d94af4a5411b83420ed811f3407e83331f1c54c3f7eb3220d6bad5d4eff49289893e7c0f13a38202113082020d300c0603551d130101ff04023000301f0603551d2304183016801423f249c44f93e4ef27e6c4f6286c3fa2bbfd2e4b304506082b0601050507010104393037303506082b060105050730018629687474703a2f2f6f6373702e6170706c652e636f6d2f6f63737030342d6170706c65616963613330323082011d0603551d2004820114308201103082010c06092a864886f7636405013081fe3081c306082b060105050702023081b60c81b352656c69616e6365206f6e207468697320636572746966696361746520627920616e7920706172747920617373756d657320616363657074616e6365206f6620746865207468656e206170706c696361626c65207374616e64617264207465726d7320616e6420636f6e646974696f6e73206f66207573652c20636572746966696361746520706f6c69637920616e642063657274696669636174696f6e2070726163746963652073746174656d656e74732e303606082b06010505070201162a687474703a2f2f7777772e6170706c652e636f6d2f6365727469666963617465617574686f726974792f30340603551d1f042d302b3029a027a0258623687474703a2f2f63726c2e6170706c652e636f6d2f6170706c6561696361332e63726c301d0603551d0e041604149457db6fd57481868989762f7e578507e79b5824300e0603551d0f0101ff040403020780300f06092a864886f76364061d04020500300a06082a8648ce3d0403020349003046022100be09571fe71e1e735b55e5afacb4c72feb445f30185222c7251002b61ebd6f55022100d18b350a5dd6dd6eb1746035b11eb2ce87cfa3e6af6cbd8380890dc82cddaa63308202ee30820275a0030201020208496d2fbf3a98da97300a06082a8648ce3d0403023067311b301906035504030c124170706c6520526f6f74204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b3009060355040613025553301e170d3134303530363233343633305a170d3239303530363233343633305a307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b30090603550406130255533059301306072a8648ce3d020106082a8648ce3d03010703420004f017118419d76485d51a5e25810776e880a2efde7bae4de08dfc4b93e13356d5665b35ae22d097760d224e7bba08fd7617ce88cb76bb6670bec8e82984ff5445a381f73081f4304606082b06010505070101043a3038303606082b06010505073001862a687474703a2f2f6f6373702e6170706c652e636f6d2f6f63737030342d6170706c65726f6f7463616733301d0603551d0e0416041423f249c44f93e4ef27e6c4f6286c3fa2bbfd2e4b300f0603551d130101ff040530030101ff301f0603551d23041830168014bbb0dea15833889aa48a99debebdebafdacb24ab30370603551d1f0430302e302ca02aa0288626687474703a2f2f63726c2e6170706c652e636f6d2f6170706c65726f6f74636167332e63726c300e0603551d0f0101ff0404030201063010060a2a864886f7636406020e04020500300a06082a8648ce3d040302036700306402303acf7283511699b186fb35c356ca62bff417edd90f754da28ebef19c815e42b789f898f79b599f98d5410d8f9de9c2fe0230322dd54421b0a305776c5df3383b9067fd177c2c216d964fc6726982126f54f87a7d1b99cb9b0989216106990f09921d00003182018830820184020101308186307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b300906035504061302555302084c304149519d5436300b0609608648016503040201a08193301806092a864886f70d010903310b06092a864886f70d010701301c06092a864886f70d010905310f170d3233303731383138333431385a302806092a864886f70d010934311b3019300b0609608648016503040201a10a06082a8648ce3d040302302f06092a864886f70d010904312204206380e03422682ab5e9cfa737daae5685eaff231e252f1905611ecd90fa7006df300a06082a8648ce3d0403020447304502210082f04e750bbb46b5870cec6055e17a235e7658b5f6e1101e22641614cb96e1d702205b156449d1e5573006889f18800f7fca2d5326cfeeb7cfb2ca59fb1e57eb25b2000000000000",
"operationalAnalyticsIdentifier": "Bucked Up:B06C8CE272C72F8CC8C496721B5AB7904427AC91188AB4F711A54FEC31B5CDE5",
"retries": 0,
"pspId": "B06C8CE272C72F8CC8C496721B5AB7904427AC91188AB4F711A54FEC31B5CDE5"
And this is the code that I used to display the payment sheets. But nothing happens, is like session.onvalidatemerchante doesn't make anything:
// Constants
const startApplePaySession = async () => {
if (window.ApplePaySession) {
const appleSession = window.ApplePaySession
// Define ApplePayPaymentRequest
const request = {
'countryCode': 'US',
'currencyCode': 'USD',
'merchantCapabilities': [
'supports3DS'
],
'supportedNetworks': [
'visa',
'masterCard',
'amex',
'discover'
],
'total': {
'label': 'Demo (Card is not charged)',
'type': 'final',
'amount': '2.00' // harcoded amount
}
}
const session = new appleSession(6, request)
session.onvalidatemerchant = async function(event) {
try {
const {data} = await getApplePay()
session.completeMerchantValidation(data)
} catch (error) {
console.log(error)
}
}
session.begin()
}
}
return (
<button
className='apple-pay-btn'
id='apple-btn'
onClick={startApplePaySession}
>
Button here
</button>
)
}
Please what I'm making wrong!!!!
I have troubles sometimes (with slow internet connections) when the customers clicks on my Buy Now button, i got the error "Must crerate a new ApplePaySession from a user gesture hanlder..."
I removed some logics to shipping to nt make this too long, but essentially my code is:
export default function ApplePayButton({setLoadingApple}) {
// Effects
React.useEffect(() => {
// listen click
const button = document.querySelector('apple-pay-button')
if(button){
button.addEventListener('click', startApplePaySession)
}
return () => {
button.removeEventListener('click', startApplePaySession)
}
}, [])
// Methods
const selectStep = step => {
// Check if step is available
if (state.steps.allowed >= step) {
dispatch({
type: 'UPDATE_STEPS',
data: {
...state.steps,
current: step
}
})
}
}
const startApplePaySession = () => {
const apple = window.buckedup.payment_extensions.find(extension => extension.code === 'apple_pay')
if (window.ApplePaySession && apple) {
setLoadingApple(true)
let clientToken
if (window.braintree_config) {
const {
token
} = window.braintree_config
clientToken = token
}
window.braintree.client.create({
authorization: clientToken
}, (clientErr, clientInstance) => {
if (clientErr) {
setLoadingApple(false)
console.error('Error creating client:', clientErr)
return
}
window.braintree.applePay.create({
client: clientInstance
}, (applePayErr, applePayInstance) => {
if (applePayErr) {
setLoadingApple(false)
console.error('Error creating applePayInstance:', applePayErr)
return
}
const amount = state.totals.amount_due.amount
const appleSession = window.ApplePaySession
// Build request object
const request = applePayInstance.createPaymentRequest({
'countryCode': 'US',
'currencyCode': 'USD',
'merchantCapabilities': [
'supports3DS',
'supportsDebit',
'supportsCredit'
],
'shippingMethods': [],
'shippingType': 'shipping',
'supportedNetworks': [
'visa',
'masterCard',
'amex',
'discover'
],
'requiredBillingContactFields': [
'postalAddress',
'name'
],
'requiredShippingContactFields': [
'postalAddress',
'name',
'phone',
'email'
],
'total': {
'label': 'Bucked Up',
'amount': amount,
'type': 'final'
}
})
// Define ApplePayPaymentRequest
const session = new appleSession(3, request)
// Validate merchant
session.onvalidatemerchant = async event => {
// Do request
const response = await getApplePay()
applePayInstance.performValidation({
validationURL: event.validationURL,
displayName: 'Bucked Up'
}, (err, merchantSession) => {
if (err) {
setLoadingApple(false)
return
}
session.completeMerchantValidation(response.data)
setLoadingApple(false)
})
}
// Validate payment method
session.onpaymentmethodselected = async event => {
// Update totals
const totals = await postApplePayment()
const update = {
'newTotal': {
'label': 'Bucked Up',
'amount': totals.data.amount_owed
}
}
session.completePaymentMethodSelection(update)
}
// Request to track shipping user data
session.onshippingcontactselected = async event => {
// Extract user available
const dataShipping = event.shippingContact
let body
// Do first request to checkout endpoint
const responseData = await shippingService(body)
if (responseData.success) {
// Get Shipping methods
const body = {
combined_shipments: true
}
const responseMethods = await getMethods(body)
if (responseMethods.success) {
const methods = responseMethods.data.shipments
// Do request to update totals
const responseTotals = await postApplePayment()
const update = {
'newTotal': {
'label': 'Bucked Up',
'amount': responseTotals.data.amount_owed
},
'newShippingMethods': mappedMethods
}
session.completeShippingContactSelection(update)
}
}
}
// Authorize purchase
session.onpaymentauthorized = async (event) => {
applePayInstance.tokenize({
token: event.payment.token
}, async (tokenizeErr, payload) => {
if (tokenizeErr) {
console.error('Error tokenizing Apple Pay:', tokenizeErr)
session.completePayment(appleSession.STATUS_FAILURE)
return
}
const nonce = payload.nonce
const billing = event.payment.billingContact
const shipping = event.payment.shippingContact
const body = {
shipping,
billing
}
const response = await patchApplePayment(body)
if (response.success) {
// Process payment
const bodyBraintree = {
apple_pay: true,
payment_method_nonce: nonce
}
const responseBraintree = await postBraintree(bodyBraintree)
if (responseBraintree.success) {
// Define ApplePayPaymentAuthorizationResult
const result = {
'status': appleSession.STATUS_SUCCESS
}
session.completePayment(result)
location.href = `${API_URL}checkout/thank-you`
}
}
})
}
session.oncancel = (event) => {
console.log(event, 'session cancel')
setLoadingApple(false)
selectStep(1)
}
session.begin()
}
)
})
}
}
return (
<apple-pay-button buttonstyle='black' locale='en' type='plane' />
)
}
If the customer closes Apple payment sheet before validation is complete, the error appears.
It's not a big deal, but we are improving our performance, so I need to fix this annoying log:
My code to validate merchant works and is this (I'm using braintree with apple pay):
// Validate merchant
session.onvalidatemerchant = async event => {
// Do request
const response = await getApplePay()
console.log(response)
if (response.success) {
instance.performValidation({
validationURL: event.validationURL,
displayName: 'Bucked Up'
}, (err, merchantSession) => {
if (err) {
setLoadingApple(false)
session.abort()
return
} else if(merchantSession) {
session.completeMerchantValidation(response.data)
setLoadingApple(false)
}
})
} else {
setLoadingApple(false)
session.abort()
}
}