Add a PayPal block to replace the PayPal shortcode

[bobbingwide]

My wife uses PayPal for her products.

• A while ago we switched from the [paypal] shortcode to using hosted buttons.
• But these appear to have stopped working.
• Consequently, I had to revert the solution to use the shortcode.
• The shortcode's not easy to use in the block editor
• You can use the TinyMCE dialog in the Classic block
• But it would be nice as a native block
• That generates the shortcode and/or uses Server Side Rendering

It would be nice if the block supports transformations from the shortcode.

[bobbingwide]

I actually found it quite easy to develop the PayPal block using ACF-Pro, but ACF is a bit of an overhead in a site that doesn't use it for anything else. So now I'm going to see how quickly I can develop it for oik.

Process

• Copy and cobble files from oik/address to oik/paypal
  • block.json
  • style.scss
  • editor.scss
  • transforms.js
  • index.js
• Update webpack.config.js
• Update oik.php to
  • register the block,
  • set script translations
  • implement the server side rendering

[bobbingwide]

There are some new options for PayPal buttons.

• Automatic billing
• Gift vouchers
• Subscriptions

The Buy Now / Pay Now button has an option to "Display debit and credit card logos".

So does Subscriptions.

[bobbingwide]

It would be nice if the block supports transformations from the shortcode.

While attempting to implement this I also tried implementing a transformation from the acf/paypal block that I prototyped in bobbingwide/acf-oik-blocks#2
But I didn't realise that the ACF block doesn't use the user friendly names. Instead it stores the values for the fields in data.

<!-- wp:acf/paypal {"id":"block_624d603f31dc1","name":"acf/paypal","data":{"field_624b1f22a571f":"buy","field_624be3810117c":"","field_624be4850117d":"","field_624be5010117e":"","field_624be51a0117f":"0"},"align":"","mode":"preview"} /-->

Given no one's ever used the acf/paypal block it seems a waste of time attempting to implement the transform.
Perhaps if I separate this block into a single block plugin then it would make sense to implement the to/from transform between blocks.

[bobbingwide]

The block needs to support all the attributes that can be set by the user. This includes:

Field	Contents	Example	Default
email	PayPal email address	herb@bobbingwide.com	oik options paypal-email
location	PayPal location	GB	oik options paypal-country -2 digit country code
currency	PayPal currency	GBP	oik options paypal-currency

The default values from oik options can be applied to the block registration using the block_type_metadata filter.

There were three extra fields for the Add to Cart payment button

Field	Contents	Example	Default
weight	Weight in lbs or kilos	1.00	None
shipcost	Shipping cost 1 ( shipping )	1.00	None
shipcost2	Shipping cost 2 ( shipping2 )	1.00	None

It would appear only shipcost ( shipping hidden field for PayPal) is supported now.

See https://www.paypal.com/buttons/

[bobbingwide]

Example Add to Cart button

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="herb@bobbingwide.com">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="productname">
<input type="hidden" name="item_number" value="sku">
<input type="hidden" name="amount" value="1.00">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="shipping" value="0.99">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

Note: There are some minor differences between the code generated by PayPal and the current code generated by bw_pp_shortcodes(), which was written 8 years ago.

[bobbingwide]

I was wondering whether or not I need to make the productname field a required field.
PayPal is happy for the Description field to be blank so I'm not going to bother at the moment.

[bobbingwide]

It would appear only shipcost ( shipping hidden field for PayPal) is supported now.

I'm not thefore enabling weight nor shipcost2 in the PayPal block.

[bobbingwide]

There are 3 pages of ISO 3166 Standard Country Codes defined in the PDF I referenced when first writing the plugin
https://www.paypalobjects.com/WEBSCR-640-20120609-1/en_US/GB/pdf/PP_OrderManagement_IntegrationGuide.pdf

Do we need this as a select list of location. Does Gutenberg already provide this?

[bobbingwide]

Note: The input tag for the submit action is defined by PayPal as

<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" 
border="0" 
name="submit" alt="PayPal – The safer, easier way to pay online!">

• This attempts to set border="0".
• But CSS styling from the theme may override this; it does in genesis-oik
• This can be prevented by some custom CSS

/* Remove the border around a PayPal button. */
form input[type="image"] {
    border: none;
}

• or it could be done by changing the HTML to use the style attribute.
• I'll go for the custom CSS solution initially.

[bobbingwide]

Delivered in v4.8.1. The documentation for the PayPal block has now been cloned.