I'm implementing a payment-checkout which is a white-label of ACI and the payment provider is VR-payment. So far everything worked smooth except the displaying of the apple pay button. The button works correctly and I can pay with it but it doesn't have the correct styling. ACI/VR-payment are saying in their documenation that the button doesn't need any styling just like the credit card and gpay. I'm using React as Framework and as far as I know the HTML-Script-Tags doesn't work. That's why I implemented it with a workaround which is shown below. Maybe someone used the same Framework and also used ACI/VR-payment for implementing the payment.
This is how the button looks like:
Here is the documentation of VR-payment: https://vr-pay-ecommerce.docs.oppwa.com/tutorials/integration-guide/fast-checkout/apple-pay
` import * as React from "react" import {useEffect} from "react"; import {FaRegCreditCard} from'react-icons/fa'; import "../../styles/shoppingBag.css";
export function RenderPaymentScript({checkoutId,orderId}) { console.log(checkoutId); const id = localStorage.getItem("restaurantUid"); const isSafari = window.safari !== undefined;
useEffect(async ()=>{
window.wpwlOptions={
applePay: {
displayName: "example",
total: { label: "example" },
style: "white-with-line"
},
style: "plain",
locale:"de",
googlePay:{
}
};
const script = document.createElement("script");
script.src =`${process.env.REACT_APP_VR_PAYMENT_URL}${checkoutId}`;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
},[]);
return (
<div>
<form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="APPLEPAY" /*data-brands={`${paymentMethod}`}*//>
<form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="GOOGLEPAY"/>
<div className="paymentBox">
<text>Kreditkarte</text>
<FaRegCreditCard size={25} color={'#6C5AF2'} className="paymentIcon"/>
</div>
<form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="VISA MASTER"/>
</div>
)
}
export default RenderPaymentScript;