Loading...
To integrate with Hosted Fields, you first need to configure your payment page. For more information, see the Hosted Fields configuration article.
You must link our JavaScript library to your payment page. To do so, include the following JavaScript tag in the header of your page.
<script src= "https://js.paygateway.com/secure_payment/v1/globalpayments.js"></script>Generate the authTokenV2 to be included in the next step. For information, see authTokenV2.
To start processing Apple Pay transactions, add your credentials to the Global Payments library.
The AuthToken must be refreshed each time you process an Apple Pay transaction.
GlobalPayments.configure( {
'X-GP-Api-Key' : "QwAnDXXXXXXXXXXXXXXXXXXXXXXETHqV",
'X-GP-Environment' : "test",
'enableAutocomplete': true,
'Authorization' : "AuthToken {{authTokenV2}}",
'X-GP-Merchant-Key': "{{terminal-merchant-key}}"
});To enable the Apple Pay button, update your payment page with the following configuration. To customize, see the Apple Pay button documentation.
The total object in the code sample below is part of the Apple Wallet processing page.
const paymentRequestForm = GlobalPayments.paymentRequest.setup("#paymentRequestPlainButton", {
total: { label: 'Donation', amount: { currency: 'USD', value: '34.00' } },
}, [{
supportedMethods: 'basic-card',
data: {supportedNetworks: ['amex', 'diners', 'discover', 'jcb', 'mastercard', 'unionpay',
'visa', 'mir'], supportedTypes: ['debit', 'credit', 'prepaid']},
}, {
supportedMethods: "https://apple.com/apple-pay",
data: {
version: 3,
merchantIdentifier: "{{your-apple-merchant-identifier}}", // usually starts with merchant.com....
merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
supportedNetworks: ["amex", "discover", "masterCard", "visa"],
countryCode: "US",
storeDisplayName: "{{store_name}}"
},
}]);When the customer completes the Apple Pay checkout process, the JavaScript Library sends a token-success callback with a temporary_token. This is the token that you must submit to the REST API in order to process the transaction.
paymentRequestForm.on("token-success", (resp) => {
// Payment data was successfully tokenized
// TODO: pass to the server-side for processing
});
paymentRequestForm.on("token-error", (resp) => {
// TODO: Handle error received during tokenization
});
paymentRequestForm.on("error", (resp) => {
// TODO: Handle Error received during the request process.
});
// Mark the payment as `success`, `fail`, or `unknown` based on the REST API response
GlobalPayments.paymentRequest.complete("success");Once you have the temporary_token, submit the Apple Pay transaction to the REST API.
| Environment | HTTP method | URL |
|---|---|---|
| Sandbox | POST | https://api.pit.paygateway.com/transactions/creditsales |
| Production | POST | https://api.paygateway.com/transactions/creditsales |
{
"reference_id": "{{transaction_reference_d}}",
"card": {
"temporary_token": "{{temp_token}}"
},
"customer": {
"billing_address": {
"line1": "8200 Central Ave.",
"postal_code": "94560"
}
},
"payment": {
"amount": "0.00",
"currency_code": "840"
},
"transaction": {
"country_code": "840",
"processing_indicators": {
"create_token": true,
"address_verification_service": true,
"generate_receipt": true
}
}
}{
"sale_id": "000000003015",
"status": "Approved",
"approval_code": "005741",
"cardsecurity_response": "match",
"processor_response": "DEVELOPMENT APPROVAL",
"card": {
"masked_card_number": "545454XXXXXX5454",
"expiry_month": "12",
"expiry_year": "35",
"type": "MasterCard"
},
"payment": {
"amount": "33.00",
"currency_code": "840",
"reference_id": "PAYAPI-8f07eb9a-6e05-4a9f-b03d-7b05280a4ae6",
"type": "Credit"
},
"transaction": {
"batch_amount": "543.00",
"batch_number": "000253",
"entry_type": "Keyed",
"language": "en-US"
}
}For additional capabilities and shared details - like follow on transactions, supported codes, error references etc, see: