Widget Integration Example - React
import React from "react";
import { render } from "react-dom";
import ExpressCheckout from "express-checkout";
const attributes = {
configuration: {
baseURL: "....",
clientId: "....",
country: "DE",
language: "en_US",
translation: [
{
language: "en",
resource: {
confirm: "confirm",
},
},
{
language: "de",
resource: {
confirm: "bestätigen",
},
},
],
paymentMethodsConfiguration: [
{
code: "PAYPAL",
style: {
size: "small",
color: "gold",
shape: "rect",
label: "checkout",
}
},
{
code: "AMAZONPAY",
type: "PwA",
color: "Gold",
size: "small",
language: "en-GB",
proceedButtonText: "Continue",
cancelButtonText: "Cancel Payment",
constraints: {
PaymentMethodNotAllowed:
"There has been a problem with the selected payment method from your Amazon account, please update the payment method or choose another one.",
},
},
],
},
createTransactionDetails: function(requestData) {
return {
transactionId: "tr-" + new Date().getTime(),
country: "DE",
providerRequest: requestData,
payment: {
amount: 2,
currency: "EUR",
reference: "Payment #1",
longReference: {
essential: "Thank you for your purchase!",
},
},
products: [
{
name: "product 1 (green)",
amount: 2,
},
],
};
},
customFunctions: {
getExpressList: ({ url, clientId, country }) => console.log(""),
createExpressPreset: ({ url, transaction, network, clientId }) => console.log(""),
updateExpressPreset: ({ url, transaction, network }) => console.log(""),
cancelExpressPreset: ({ url, transaction, network }) => console.log(""),
getExpressPresetAccount: ({ url }) => console.log(""),
confirmExpressPreset: ({ url, network }) => console.log(""),
onProceed: ({ preset, step, dispatch }) => console.log(""),
onAbort: ({ preset, step, dispatch }) => console.log(""),
onReload: ({ preset, step, dispatch }) => console.log(""),
onTryOtherNetwork: ({ preset, step, dispatch }) => console.log(""),
onTryOtherAccount: ({ preset, step, dispatch }) => console.log(""),
onRetry: ({ preset, step, dispatch }) => console.log(""),
onCustomerAbort: ({ preset, step, dispatch }) => console.log(""),
onClientException: ({ preset, step, dispatch }) => console.log(""),
onError: ({ resultInfo, network, step, dispatch }) => console.log(""),
},
};
const Demo = () => {
return (
<div>
<h1>Merchant Demo</h1>
<ExpressCheckout {...attributes} />
</div>
);
};
render(<Demo />, document.querySelector("#demo"));
