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!!!!
BrunoSayNoMore
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
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()
}
}