<dependencies>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	<dependency>
		<groupId>org.projectlombok</groupId>
		<artifactId>lombok</artifactId>
		<optional>true</optional>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-test</artifactId>
		<scope>test</scope>
	</dependency>
</dependencies>

<dependency>
	<groupId>com.paypal.sdk</groupId>
	<artifactId>paypal-core</artifactId>
	<version>1.7.2</version>
</dependency>
<dependency>
	<groupId>com.paypal.sdk</groupId>
	<artifactId>rest-api-sdk</artifactId>
	<version>1.14.0</version>
</dependency>

paypal:
  client-id: Abb6FbBc0xolDAxyh7i2WeTHpCcIgTK4hN2NgFyyVxbRbs8FjOO8UM0AE6uBoIhUy3WmPG_mHsAlxf6b
  client-secret: EJqoIjF64JUMRonuSBdc0WSkRjlUoKRa_GZA96YPjdI1phmNTPFGCsdftRdyuEQy0b9DJP8fsWJpvD-W
  mode: sandbox

@Configuration
public class PaypalConfig {
    @Value("${paypal.client-id}")
    private String clientId;

    @Value("${paypal.client-secret}")
    private String clientSecret;

    @Value("${paypal.mode}")
    private String mode;

    @Bean
    public APIContext apiContext() {
        return new APIContext(clientId, clientSecret, mode);
    }
}

public ResponseEntity<PaymentResponse<?>> create(PaymentCreateReq req, String type)
        throws PayPalRESTException {
    Amount amount = new Amount();
    amount.setCurrency(req.getCurrency());
    amount.setTotal(String.format(Locale.forLanguageTag(req.getCurrency()), "%.2f", req.getTotal()));

    Transaction transaction = new Transaction();
    transaction.setDescription(req.getDescription());
    transaction.setAmount((amount));

    List<Transaction> transactions = new ArrayList<>();
    transactions.add(transaction);

    Payment payment = this.getPayment(req, type, transactions);

    payment = payment.create(apiContext);
    LOGGER.info("State of created payment {} is {}", payment.getId(), payment.getState());

    PaymentCreateRespBody respBody = PaymentCreateRespBody.builder()
            .id(payment.getId())
            .state(payment.getState())
            .links(payment.getLinks())
            .payer(payment.getPayer())
            .build();

    return ResponseEntity.ok(PaymentResponse.builder()
            .code(PaymentRespCode.SUCCESS)
            .data(respBody)
            .build());
}

private Payment getPayment(PaymentCreateReq req, String type, List<Transaction> transactions) {
    Payer payer = new Payer();
    payer.setPaymentMethod(req.getMethod());

    RedirectUrls redirectUrls = new RedirectUrls();
    if (PaymentConst.TYPE_WEB.equals(type)) {
        redirectUrls.setCancelUrl(WEB_CANCEL_URL);
        redirectUrls.setReturnUrl(WEB_SUCCESS_URL);
    } else {
        redirectUrls.setCancelUrl(API_CANCEL_URL);
        redirectUrls.setReturnUrl(API_SUCCESS_URL);
    }

    Payment payment = new Payment();
    payment.setIntent(PaymentConst.INTENT_SALE);
    payment.setPayer(payer);
    payment.setTransactions(transactions);
    payment.setRedirectUrls(redirectUrls);
    return payment;
}

public ResponseEntity<PaymentResponse<?>> execute(PaymentExecuteReq req) throws PayPalRESTException {
    Payment payment = new Payment();
    payment.setId(req.getPaymentId());

    PaymentExecution paymentExecution = new PaymentExecution();
    paymentExecution.setPayerId(req.getPayerId());

    payment = payment.execute(apiContext, paymentExecution);
    LOGGER.info("State of executed payment {} is {}", payment.getId(), payment.getState());

    PaymentExecuteRespBody respBody = PaymentExecuteRespBody.builder()
            .id(payment.getId())
            .state(payment.getState())
            .fullName(payment.getPayer().getPayerInfo().getFirstName().concat(" ").concat(payment.getPayer().getPayerInfo().getLastName()))
            .email(payment.getPayer().getPayerInfo().getEmail())
            .build();

    return ResponseEntity.ok(PaymentResponse.builder()
            .code(PaymentRespCode.SUCCESS)
            .data(respBody)
            .build());
}

@RequiredArgsConstructor
@RestController
@CrossOrigin(origins = "http://localhost:5173/")
@RequestMapping("/api/v1")
public class PaypalRestController {
    private final PaypalService paypalService;

    @PostMapping("/payment/create")
    public ResponseEntity<PaymentResponse<?>> createPayment(@RequestBody PaymentCreateReq createReq)
            throws PayPalRESTException {
        return paypalService.create(createReq, PaymentConst.TYPE_API);
    }

    @PostMapping("/payment/execute")
    public ResponseEntity<PaymentResponse<?>> paymentSuccess(@RequestBody PaymentExecuteReq executionReq)
            throws PayPalRESTException {
        return paypalService.execute(executionReq);
    }
}

<Form onSubmit={handleSubmit(onSubmit)}>
  <FormRow label={'Payment method'} isRequired={true} error={errors?.method?.message}>
    <Input
      type="text"
      id="method"
      defaultValue={'Paypal'}
      {...register('method', { required: 'Payment method is required' })}
    />
  </FormRow>

  <FormRow label={'Total amount'} isRequired={true} error={errors?.amount?.message}>
    <Input
      type="text"
      id="total"
      defaultValue={'10.0'}
      {...register('total', { required: 'Total amount is required' })}
    />
  </FormRow>

  <FormRow label={'Currency'} isRequired={true} error={errors?.currency?.message}>
    <Input
      type="text"
      id="currency"
      defaultValue={'USD'}
      {...register('currency', { required: 'Currency is required' })}
    />
  </FormRow>

  <FormRow label={'Description'} isRequired={true} error={errors?.description?.message}>
    <Input
      type="text"
      id="description"
      defaultValue={'Ip15 promax from David'}
      {...register('description', { required: 'Description is required' })}
    />
  </FormRow>
  <FormRow>
    <Button disabled={isLoading} onClick={handleClick} type={'submit'}>
      Pay with PayPal
    </Button>
  </FormRow>
</Form>

const onSubmit = async (data) => {
  try {
    const response = await fetch('http://localhost:8080/api/v1/payment/create', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })

    if (response.ok) {
      const result = await response.json()
      let linkHref = ''
      result?.data?.links.map((link) => {
        if (link.rel === 'approval_url') linkHref = link.href
        setIsLoading(true)
      })
      window.open(linkHref, '_self', 'noopener,noreferrer')
    } else {
      console.error('Error:', response.statusText)
    }
  } catch (error) {
    console.error('Error:', error)
  }
}

useEffect(() => {
  const reqData = {
    paymentId: paymentId,
    payerId: payerId,
  }

  const sendPostRequest = async () => {
    try {
      const res = await axios.post('http://localhost:8080/api/v1/payment/execute', reqData)
      setResponse(res.data)
    } catch (err) {
      setError(err.message)
    } finally {
      setIsLoading(false)
    }
  }
  sendPostRequest()
}, [paymentId, payerId])

<Container>
  {isLoading ? (
    <h1>Payment is executing...</h1>
  ) : response !== null ? (
    <div>
      <h1>Payment is made successfully!</h1>
      <DisplayInfo label={'Payment ID:'} value={response.data.id} />
      <DisplayInfo label={"Payer's name:"} value={response.data.fullName} />
      <DisplayInfo label={"Payer's email:"} value={response.data.email} />
    </div>
  ) : (
    <h1>Payment is fail!</h1>
  )}
  <p>{error ? 'Error: ' + error : ''}</p>
  <Button onClick={redirectToPaymentPage}>Back to homepage</Button>
</Container>

function CancelPage() {
  const navigate = useNavigate()

  const redirectToPaymentPage = () => {
    navigate('/')
  }

  return (
    <>
      <Container>
        <h1>Payment is canceled.</h1>
        <Button onClick={redirectToPaymentPage}>Back to homepage</Button>
      </Container>
    </>
  )
}

export default CancelPage