End of checkout placement
[Step 5 of 10] You can also add HAQM Pay to the payment selection page of your checkout as an end of checkout payment option. Unlike the express checkout flow, the buyer will provide order-related data such as the delivery address on your site instead of selecting it from the HAQM address book. You will redirect the buyer to the HAQM Pay hosted payment page once they're ready to place their order to complete the payment process.
In this step, you will configure the HAQM Pay Checkout Session object and then render the HAQM Pay button. At the end of this step, you will be able to redirect the buyer to an HAQM Pay hosted page where they can select their preferred payment instrument, review order details, and complete checkout.
You must add the domains where the HAQM Pay button will be rendered to Seller Central. See Add domains to Seller Central for more information.
- Key differences from the Express recurring integration
- 1. Add the HAQM Pay script
- 2. Generate the Create Checkout Session payload
- 3. Sign the payload
- 4. Render the button
Key differences from the Express recurring integration
You can re-use most of the code from your Express recurring integration. The key differences are:
- You will set payment info when you render the HAQM Pay button instead of setting it via Update Checkout Session
- Since the HAQM Pay button is at the end of checkout, the buyer has already manually entered their shipping address in your shop. You must provide this information in
addressDetails
for all physical goods transactions. ProvidingaddressDetails
for digital goods transactions will result in an error.
1. Add the HAQM Pay script
Add the HAQM Pay script to your HTML file. Be sure you select the correct region.
<script src="http://static-na.payments-haqm.com/checkout.js"></script>
<script src="http://static-eu.payments-haqm.com/checkout.js"></script>
<script src="http://static-fe.payments-haqm.com/checkout.js"></script>
2. Generate the Create Checkout Session payload
To render the HAQM Pay button, you will need to provide a payload that HAQM Pay will use to create a Checkout Session object. You will use the Checkout Session object to manage the buyer’s active session on your website. The payload has the same structure as the request body for the Create Checkout Session API. Providing the payload as part of the button removes the need to call this API. In the payload, you must provide all details required for the buyer to complete checkout.
Instructions for generating button payload:
- Set
webCheckoutDetails.checkoutMode
to ProcessOrder. - Set
checkoutResultReturnUrl
to the URL that the buyer is redirected to after they complete checkout on the HAQM Pay hosted page. The Checkout Session ID will be appended as a query parameter to the provided URL. - Set
paymentDetails
:paymentIntent
- The payment action when the buyer clicks the HAQM “Pay Now” buttonchargeAmount
- Checkout amount
- Set
productType
to PayAndShip for physical transactions that require shipping address. SetproductType
to PayOnly for digital transactions. - You must set
addressDetails
with the shipping address provided by the buyer ifproductType
is PayAndShip. See address formatting and validation for more info on how to pass address data. - Set
recurringMetadata.frequency
to increase buyer confidence. Note that HAQM Pay only uses the values provided to calculate the Charge Permission expiration date and in buyer communication. You are still responsible for calling Create Charge to charge the buyer for each billing cycle. - Specify the buyer information you need to complete checkout using the
scopes
parameter. If you do not set this value, all buyer information except billing address will be requested.
Optional integrations steps:
- Use
merchantMetadata
to associate additional order details with this transaction. - If you registered for HAQM Pay in the EU or UK, you can use the
presentmentCurrency
parameter to charge your buyer using a different supported currency. See multi-currency integration for more info.
Payload example
{
"webCheckoutDetails": {
"checkoutResultReturnUrl": "http://a.com/merchant-review-page",
"checkoutMode": "ProcessOrder"
},
"storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
"scopes": ["name", "email", "phoneNumber", "billingAddress"],
"paymentDetails": {
"paymentIntent": "AuthorizeWithCapture",
"chargeAmount": {
"amount": "10",
"currencyCode": "USD"
},
"presentmentCurrency":"USD"
},
"recurringMetadata": {
"frequency": {
"unit": "Month",
"value": "1"
},
"amount": {
"amount": "10",
"currencyCode": "USD"
}
},
"merchantMetadata": {
"merchantReferenceId":"Merchant-order-123",
"merchantStoreName":"Merchant Store Name",
"noteToBuyer":"Thank you for your order"
},
"addressDetails": {
"name": "Paul Smith",
"addressLine1": "9999 First Avenue",
"city": "New York",
"stateOrRegion": "NY",
"postalCode": "10016",
"countryCode": "US",
"phoneNumber": "212555555"
}
}
Name
|
Location
|
Description
|
webCheckoutDetails (required) Type: webCheckoutDetails |
Body
|
URLs associated to the Checkout Session used to complete checkout. The URLs must use HTTPS protocol Use checkoutMode to specify whether the buyer will return to your website to review their order before completing checkout
|
storeId (required) Type: string |
Body
|
HAQM Pay store ID. Retrieve this value from HAQM Pay Integration Central: US, EU, JP
|
scopes Type: list <scope> |
Body
|
The buyer details that you're requesting access to. Specify whether you need shipping address using button productType parameter in Step 4.Supported values:
scopes parameter is not set
|
chargePermissionType Type: string |
Body
|
The type of Charge Permission requested Supported values:
|
paymentDetails Type: paymentDetails |
Body
|
Payment details specified by the merchant, such as the amount and method for charging the buyer |
recurringMetadata Type: recurringMetadata |
Body
|
Metadata about how the recurring Charge Permission will be used. HAQM Pay only uses this information to calculate the Charge Permission expiration date and in buyer communication Note that it is still your responsibility to call Create Charge to charge the buyer for each billing cycle |
merchantMetadata Type: merchantMetadata |
Body
|
Merchant-provided order details
|
addressDetails Type: addressDetail |
Body
|
Buyer provided shipping address. Only use this parameter if checkoutMode is ProcessOrder and productType is PayAndShip
|
3. Sign the payload
You must secure the payload using a signature. The payload does not include a timestamp so you can re-use the signature as long as the payload does not change. If you need to change the payload and your button signature is dynamic, you should decouple button render from checkout initialization to avoid re-rendering the button.
Option 1 (recommended): Generate a signature using the helper function provided in the HAQM Pay SDKs. The signature generated by the helper function is only valid for the button and not for API requests.
<?php
include 'vendor/autoload.php';
$amazonpay_config = array(
'public_key_id' => 'MY_PUBLIC_KEY_ID',
'private_key' => 'keys/private.pem',
'region' => 'US',
'sandbox' => true,
'algorithm' => 'AMZN-PAY-RSASSA-PSS-V2'
);
$client = new HAQM\Pay\API\Client($amazonpay_config);
$payload = '{"storeId":"amzn1.application-oa2-client.xxxxx","webCheckoutDetails":{"checkoutResultReturnUrl":"http://example.com/review.html"},"chargePermissionType":"Recurring","recurringMetadata":{"frequency":{ unit":"Month","value":"1"},"amount":{"amount":"30","currencyCode":"USD"}}}';
$signature = $client->generateButtonSignature($payload);
echo $signature . "\n";
?>
var payConfiguration = new ApiConfiguration
(
region: Region.Europe,
environment: Environment.Sandbox,
publicKeyId: "MY_PUBLIC_KEY_ID",
privateKey: "PATH_OR_CONTENT_OF_MY_PRIVATE_KEY",
algorithm: HAQMSignatureAlgorithm.V2
);
var request = new CreateCheckoutSessionRequest
(
checkoutResultReturnUrl: "http://example.com/review.html",
storeId: "amzn1.application-oa2-client.xxxxx"
);
request.ChargePermissionType = ChargePermissionType.Recurring;
request.RecurringMetadata.Frequency.Unit = FrequencyUnit.Month;
request.RecurringMetadata.Frequency.Value = 1;
request.RecurringMetadata.Amount.Unit = 99.99M;
request.RecurringMetadata.Amount.CurrencyCode = Currency.EUR;
// generate the button signature
var signature = client.GenerateButtonSignature(request);
// the payload as JSON string that you must assign to the button in the next step
var payload = request.ToJson();
PayConfiguration payConfiguration = null;
try {
payConfiguration = new PayConfiguration()
.setPublicKeyId("YOUR_PUBLIC_KEY_ID")
.setRegion(Region.YOUR_REGION_CODE)
.setPrivateKey("YOUR_PRIVATE_KEY_STRING")
.setEnvironment(Environment.SANDBOX)
.setAlgorithm("AMZN-PAY-RSASSA-PSS-V2");
}catch (HAQMPayClientException e) {
e.printStackTrace();
}
HAQMPayClient client = new HAQMPayClient(payConfiguration);
String payload = "{\"storeId\":\"amzn1.application-oa2-client.xxxxxx\",\"webCheckoutDetails\":{\"checkoutResultReturnUrl\":\"http://example.com/review.html\"},\"chargePermissionType\":\"Recurring\",\"recurringMetadata\":{\"frequency\":{\"unit\":\"Month\",\"value\":\"1\"},\"amount\":{\"amount\":\"30\",\"currencyCode\":\"USD\"}}}";
String signature = client.generateButtonSignature(payload);
const fs = require('fs');
const Client = require('@amazonpay/amazon-pay-api-sdk-nodejs');
const config = {
publicKeyId: 'ABC123DEF456XYZ',
privateKey: fs.readFileSync('tst/private.pem'),
region: 'us',
sandbox: true,
algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
};
const testPayClient = new Client.HAQMPayClient(config);
const payload = {
"webCheckoutDetails": {
"checkoutResultReturnUrl": "http://example.com/review.html"
},
"storeId": "amzn1.application-oa2-client.xxxxx",
"chargePermissionType": "Recurring",
"recurringMetadata": {
"frequency": {
"unit": "Month",
"value": "1"
},
"amount": {
"amount": "30",
"currencyCode": "USD"
}
}
};
const signature = testPayClient.generateButtonSignature(payload);
Option 2: Build the signature manually by following steps 2 and 3 of the signing requests guide.
4. Render the button
Use the values from the previous two steps to render the HAQM Pay button to a HTML container element. The button will be responsive and it will inherit the size of the container element, see responsive button logic for details.
The code below will initiate HAQM Pay checkout immediately on button click. If you need control of the click event, you can decouple button render and checkout initiation. See HAQM Pay script for more info.
Code sample
Function parameters
Parameter
|
Description
|
merchantId (required) Type: string |
HAQM Pay merchant account identifier
|
createCheckoutSessionConfig (required) Type: buttonConfig |
Create Checkout Session configuration. This is a required field if you use PayAndShip or PayOnly productType |
placement (required) Type: string |
Placement of the HAQM Pay button on your website Supported values:
|
ledgerCurrency (required) Type: string |
Ledger currency provided during registration for the given merchant identifier Supported values:
|
productType Type: string |
Product type selected for checkout Supported values:
|
buttonColor Type: string |
Color of the HAQM Pay button Supported values: 'Gold', 'LightGray', 'DarkGray' Default value: 'Gold' |
checkoutLanguage Type: string |
Language used to render the button and text on HAQM Pay hosted pages. Please note that supported language(s) is dependent on the region that your HAQM Pay account was registered for Supported values:
|
sandbox Type: boolean |
Sets button to Sandbox environment
You do not have to set this parameter if your publicKeyId has an environment prefix (for example: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B)
Default value: false |